diff --git a/docs/ru/reference/default-theme-team-page.md b/docs/ru/reference/default-theme-team-page.md new file mode 100644 index 00000000..86774a33 --- /dev/null +++ b/docs/ru/reference/default-theme-team-page.md @@ -0,0 +1,252 @@ + + +# Страница команды {#team-page} + +Если вы хотите представить свою команду, вы можете использовать компоненты Team для создания страницы команды. Есть два варианта использования этих компонентов. Один из вариантов — встроить их в страницу с макетом `doc`, а другой — создать полноценную страницу команды. + +## Отображение членов команды на странице {#show-team-members-in-a-page} + +Вы можете использовать компонент ``, доступный из `vitepress/theme`, для отображения списка членов команды на любой странице. + +```html + + +# Поприветствуйте нашу замечательную команду + + +``` + +Вышеуказанное отобразит члена команды в виде карточки. Должно отобразиться что-то похожее на то, что показано ниже. + + + +Компонент `` поставляется в двух различных размерах, `small` и `medium`. Хотя это зависит от ваших предпочтений, обычно размер `small` лучше подходит для использования на странице с макетом `doc`. Кроме того, вы можете добавить дополнительные свойства для карточки члена команды, например, добавить «описание» или кнопку «спонсировать». Подробнее об этом в разделе [``](#vpteammembers). + +Встраивание членов команды в страницу документа хорошо подходит для небольших команд, где наличие полной страницы команды может быть слишком большим, или для представления частичных членов команды в качестве ссылки на контекст документации. + +Если у вас большое количество участников или вы просто хотите иметь больше места для отображения членов команды, подумайте о [создании отдельной страницы команды](#create-a-full-team-page). + +## Создание отдельной страницы команды {#create-a-full-team-page} + +Вместо того чтобы добавлять членов команды на страницу с макетом `doc`, вы можете создать полноценную страницу команды, подобно созданию пользовательской [главной страницы](./default-theme-home-page). + +Чтобы создать страницу команды, сначала создайте новый md-файл. Имя файла не имеет значения, но здесь мы назовем его `team.md`. В этом файле установите в блоке метаданных параметр `layout: page`, а затем вы можете организовать структуру страницы, используя компоненты `TeamPage`. + +```html +--- +layout: page +--- + + + + + + + + + + +``` + +При создании полной страницы команды не забудьте обернуть все компоненты компонентом ``. Этот компонент обеспечит всем вложенным компонентам, связанным с командой, правильную структуру макета, например, расстояние между ними. + +Компонент `` добавляет блок заголовка страницы. Заголовок — это тег `

`. Используйте слоты `#title` и `#lead`, чтобы рассказать о своей команде. + +`` работает так же, как и при использовании в doc-странице. Отобразится список участников. + +### Добавление секций для разделения членов команды {#add-sections-to-divide-team-members} + +Вы можете добавить «секции» на страницу команды. Например, у вас могут быть разные типы членов команды, такие как члены основной команды и партнёры сообщества. Вы можете разделить этих членов на секции, чтобы лучше объяснить роли каждой группы. + +Для этого добавьте компонент `` в файл `team.md`, который мы создали ранее. + +```html +--- +layout: page +--- + + + + + + + + + + + + + + + +``` + +Компонент `` может иметь слоты `#title` и `#lead`, аналогичные компоненту `VPTeamPageTitle`, а также слот `#members` для отображения членов команды. + +Не забудьте поместить компонент `` в слот `#members`. + +## `` {#vpteammembers} + +Компонент `` отображает заданный список членов команды. + +```html + +``` + +```ts +interface Props { + // Размер карточки каждого члена команды. По умолчанию `medium`. + size?: 'small' | 'medium' + + // Список членов команды для отображения. + members: TeamMember[] +} + +interface TeamMember { + // Изображение аватара. + avatar: string + + // Имя члена команды. + name: string + + // Заголовок, отображаемый под именем члена команды. + // например: разработчик, инженер-программист и т. д. + title?: string + + // Организация, в которой состоит текущий член команды. + org?: string + + // URL-адрес сайта организации. + orgLink?: string + + // Описание члена команды. + desc?: string + + // Социальные ссылки: GitHub, Twitter и т. д. + // Могут быть переданы в виде объекта. + // См. https://vitepress.dev/reference/default-theme-config.html#sociallinks + links?: SocialLink[] + + // URL-адрес спонсорской страницы члена команды. + sponsor?: string + + // Текст спонсорской ссылки. По умолчанию 'Sponsor'. + actionText?: string +} +``` + +## `` {#vpteampage} + +Корневой компонент при создании отдельной страницы команды. Принимает только один слот. Он будет стилизовать все передаваемые компоненты, связанные с командой. + +## `` {#vpteampagetitle} + +Добавляет блок «заголовка» страницы. Лучше всего использовать в самом начале внутри ``. Принимает слоты `#title` и `#lead`. + +```html + + + + + + +``` + +## `` {#vpteampagesection} + +Создает «секцию» на странице команды. Принимает слоты `#title`, `#lead` и `#members`. Внутри `` вы можете добавить столько секций, сколько захотите. + +```html + + ... + + + + + + +```