VitePress 中文网团队页面
如果您想介绍您的团队，您可以使用团队组件来构建团队页面。 有两种使用这些组件的方法。 一种是将其嵌入到文档页面中，另一种是创建完整的团队页面。
在页面中显示团队成员
您可以使用从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" />上面将在卡片查看元素中显示团队成员。 它应该显示类似于下面的内容。
<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: '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 {
// Size of each members. Defaults to `medium`.
size?: 'small' | 'medium'
// List of members to display.
members: TeamMember[]
}
interface TeamMember {
// Avatar image for the member.
avatar: string
// Name of the member.
name: string
// Title to be shown below member's name.
// e.g. Developer, Software Engineer, etc.
title?: string
// Organization that the member belongs.
org?: string
// URL for the organization.
orgLink?: string
// Description for the member.
desc?: string
// Social links. e.g. GitHub, Twitter, etc. You may pass in
// the Social Links object here.
// See: https://vitepress.dev/reference/default-theme-config.html#sociallinks
links?: SocialLink[]
// URL for the sponsor page for the member.
sponsor?: 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, some of whom have chosen to be featured below.
</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>