Страница Команды

Если вы хотите представить свою команду, вы можете использовать компоненты команды для создания страницы команды. Существует два способа использования этих компонентов. Один из них - встроить их в страницу документации, а другой - создать полноценную страницу команды.

Показать членов команды на странице

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

<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> предлагается в 2 разных размерах, small и medium. Хотя это зависит от ваших предпочтений, обычно размер small лучше подходит для использования на странице документации. Также вы можете добавить дополнительные свойства к каждому члену, такие как добавление "описания" или кнопки "спонсор". Узнайте больше об этом в <VPTeamMembers>.

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

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

Создать полную страницу команды

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

Для создания страницы команды сначала создайте новый md-файл. Название файла не имеет значения, но давайте назовем его team.md. В этом файле установите опцию frontmatter layout: page, а затем вы можете составить структуру вашей страницы, используя компоненты TeamPage.

---
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> работает так же, как и при использовании на странице документации. Он отобразит список членов.

Добавление разделов для разделения членов команды

Вы можете добавить "разделы" на страницу команды. Например, у вас могут быть разные типы членов команды, такие как основные члены

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

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

---
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.