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

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

Отображение членов команды на странице

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

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

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

Создание отдельной страницы команды

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

Чтобы создать страницу команды, сначала создайте новый md-файл. Имя файла не имеет значения, но здесь мы назовем его team.md. В этом файле установите в блоке метаданных параметр 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> работает так же, как и при использовании в doc-странице. Отобразится список участников.

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

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

Для этого добавьте компонент <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.

<VPTeamMembers>

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

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

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>

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

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

<VPTeamPageSection>

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

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