# Страница команды {#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 ... ```