团队页面

如果你想介绍你的团队，你可以使用团队组件来构建团队页面。使用这些组件有两种方法。一种是将其嵌入到文档页面中，另一种是创建一个完整的团队页面。

在页面中显示团队成员

你可以使用从 vitepress/theme 导出的 <VPTeamMembers> 组件在任何页面上显示团队成员列表。

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

const members = [
  {
    avatar: 'https://www.github.com/yyx990803.png',
    name: 'Evan You',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
  ...
]
</script>

# Our Team

Say hello to our awesome team.

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

上面将显示卡片样式的团队成员。它应该显示类似于以下内容：

Evan You

Creator

Kia King Ishii

Developer

创建完整的团队页面

你可以创建一个完整的团队页面，而不是将团队成员添加到文档页面，类似于如何创建自定义主页。

要创建团队页面，首先，创建一个新的 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: 'Evan You',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
  ...
]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>
      Our Team
    </template>
    <template #lead>
      The development of VitePress is guided by an international
      team, some of whom have chosen to be featured below.
    </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>Our Team</template>
    <template #lead>...</template>
  </VPTeamPageTitle>
  <VPTeamMembers size="medium" :members="coreMembers" />
  <VPTeamPageSection>
    <template #title>Partners</template>
    <template #lead>...</template>
    <template #members>
      <VPTeamMembers size="small" :members="partners" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>

<VPTeamPageSection> 组件可以具有与 VPTeamPageTitle 组件类似的 #title 和 #lead 插槽，以及用于显示团队成员的 #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 等。你可以在此处传递社交链接对象。
  // 请参阅 "社交链接" 部分了解详细信息。
  links?: SocialLink[]

  // 成员的赞助商 URL。
  sponsor?: string

  // 赞助商链接的文本。默认为 'Sponsor'。
  actionText?: string
}

<VPTeamPage>

创建完整团队页面时的根组件。它只接受单个插槽。它将为所有传递的团队相关组件设置样式。

<VPTeamPageTitle>

添加页面的"标题"部分。最好在 <VPTeamPage> 下使用。它接受 #title 和 #lead 插槽。

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>Our Team</template>
    <template #lead>The development of VitePress is guided by an international team.</template>
  </VPTeamPageTitle>
  ...
</VPTeamPage>

<VPTeamPageSection>

在团队页面内创建一个"部分"。它接受 #title、#lead 和 #members 插槽。你可以在 <VPTeamPage> 内添加任意数量的部分。

<VPTeamPage>
  ...
  <VPTeamPageSection>
    <template #title>Partners</template>
    <template #lead>Lorem ipsum...</template>
    <template #members>
      <VPTeamMembers :members="data" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>