vitepress/docs/ru/reference/default-theme-team-page.md

<script setup>
import { VPTeamMembers } from 'vitepress/theme'

const members = [
  {
    avatar: 'https://github.com/yyx990803.png',
    name: 'Эван Ю',
    title: 'Создатель',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
  {
    avatar: 'https://github.com/kiaking.png',
    name: 'Киа Кинг Исии',
    title: 'Разработчик',
    links: [
      { icon: 'github', link: 'https://github.com/kiaking' },
      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
    ]
  }
]
</script>

# Страница команды {#team-page}

Если вы хотите представить свою команду, вы можете использовать компоненты Team для создания страницы команды. Есть два варианта использования этих компонентов. Один из вариантов — встроить их в страницу с макетом `doc`, а другой — создать полноценную страницу команды.

## Отображение членов команды на странице {#show-team-members-in-a-page}

Вы можете использовать компонент `<VPTeamMembers>`, доступный из `vitepress/theme`, для отображения списка членов команды на любой странице.

```html
<script setup>
  import { VPTeamMembers } from 'vitepress/theme'

  const members = [
    {
      avatar: 'https://www.github.com/yyx990803.png',
      name: 'Эван Ю',
      title: 'Создатель',
      links: [
        { icon: 'github', link: 'https://github.com/yyx990803' },
        { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
      ]
    },
    ...
  ]
</script>

# Поприветствуйте нашу замечательную команду

<VPTeamMembers size="small" :members="members" />
```

Вышеуказанное отобразит члена команды в виде карточки. Должно отобразиться что-то похожее на то, что показано ниже.

<VPTeamMembers size="small" :members="members" />

Компонент `<VPTeamMembers>` поставляется в двух различных размерах, `small` и `medium`. Хотя это зависит от ваших предпочтений, обычно размер `small` лучше подходит для использования на странице с макетом `doc`. Кроме того, вы можете добавить дополнительные свойства для карточки члена команды, например, добавить «описание» или кнопку «спонсировать». Подробнее об этом в секции [`<VPTeamMembers>`](#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
---

<script setup>
  import {
    VPTeamPage,
    VPTeamPageTitle,
    VPTeamMembers
  } from 'vitepress/theme'

  const members = [
    {
      avatar: 'https://www.github.com/yyx990803.png',
      name: 'Эван Ю',
      title: 'Создатель',
      links: [
        { icon: 'github', link: 'https://github.com/yyx990803' },
        { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
      ]
    },
    ...
  ]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title> Наша команда </template>
    <template #lead>
      Разработкой VitePress руководит международная команда, некоторые члены
      которой представлены ниже.
    </template>
  </VPTeamPageTitle>
  <VPTeamMembers :members="members" />
</VPTeamPage>
```

При создании полной страницы команды не забудьте обернуть все компоненты компонентом `<VPTeamPage>`. Этот компонент обеспечит всем вложенным компонентам, связанным с командой, правильную структуру макета, например, расстояние между ними.

Компонент `<VPPageTitle>` добавляет блок заголовка страницы. Заголовок — это тег `<h1>`. Используйте слоты `#title` и `#lead`, чтобы рассказать о своей команде.

`<VPMembers>` работает так же, как и при использовании в doc-странице. Отобразится список участников.

### Добавление секций для разделения членов команды {#add-sections-to-divide-team-members}

Вы можете добавить «секции» на страницу команды. Например, у вас могут быть разные типы членов команды, такие как члены основной команды и партнёры сообщества. Вы можете разделить этих членов на секции, чтобы лучше объяснить роли каждой группы.

Для этого добавьте компонент `<VPTeamPageSection>` в файл `team.md`, который мы создали ранее.

```html
---
layout: page
---

<script setup>
  import {
    VPTeamPage,
    VPTeamPageTitle,
    VPTeamMembers,
    VPTeamPageSection
  } from 'vitepress/theme'

  const coreMembers = [...]
  const partners = [...]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>Наша команда</template>
    <template #lead>...</template>
  </VPTeamPageTitle>
  <VPTeamMembers size="medium" :members="coreMembers" />
  <VPTeamPageSection>
    <template #title>Партнёры</template>
    <template #lead>...</template>
    <template #members>
      <VPTeamMembers size="small" :members="partners" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>
```

Компонент `<VPTeamPageSection>` может иметь слоты `#title` и `#lead`, аналогичные компоненту `VPTeamPageTitle`, а также слот `#members` для отображения членов команды.

Не забудьте поместить компонент `<VPTeamMembers>` в слот `#members`.

## `<VPTeamMembers>` {#vpteammembers}

Компонент `<VPTeamMembers>` отображает заданный список членов команды.

```html
<VPTeamMembers
  size="medium"
  :members="[
    { avatar: '...', name: '...' },
    { avatar: '...', name: '...' },
    ...
  ]"
/>
```

```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>` {#vpteampage}

Корневой компонент при создании отдельной страницы команды. Принимает только один слот. Он будет стилизовать все передаваемые компоненты, связанные с командой.

## `<VPTeamPageTitle>` {#vpteampagetitle}

Добавляет блок «заголовка» страницы. Лучше всего использовать в самом начале внутри `<VPTeamPage>`. Принимает слоты `#title` и `#lead`.

```html
<VPTeamPage>
  <VPTeamPageTitle>
    <template #title> Наша команда </template>
    <template #lead>
      Разработкой VitePress руководит международная команда, некоторые члены
      которой представлены ниже.
    </template>
  </VPTeamPageTitle>
</VPTeamPage>
```

## `<VPTeamPageSection>` {#vpteampagesection}

Создает «секцию» на странице команды. Принимает слоты `#title`, `#lead` и `#members`. Внутри `<VPTeamPage>` вы можете добавить столько секций, сколько захотите.

```html
<VPTeamPage>
  ...
  <VPTeamPageSection>
    <template #title>Партнёры</template>
    <template #lead>Lorem ipsum...</template>
    <template #members>
      <VPTeamMembers :members="data" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>
```