团队页面

在页面（文档）中显示团队成员

如果想在某个文档页面里展示团队成员，比如在about.md里加一段即可：

# 关于我们

## 核心团队

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

const members = [
  {
    avatar: 'https://www.github.com/你的GitHub用户名.png',
    //这里是获取头像
    name: '张三',
    title: '前端工程师',
    links: [
      { icon: 'github', link: 'https://github.com/你的GitHub用户名' },
      { icon: 'twitter', link: 'https://twitter.com/你的Twitter用户名' }
      //这里是获取下面的小图标，国内网站图标需要用SVG自定义
    ]
  },
  {
    avatar: 'https://www.github.com/另一个成员.png',
    name: '李四',
    title: '产品经理'
  }
]
</script>

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

效果如下（由于link是不正确的，所以加载不出来头像）：

---

关于我们

核心团队

张三

前端工程师

李四

产品经理

---

可以看到李四下面没写icon，所以没有友情链接。

创建一个完整的团队页面

第一步：新建一个 Markdown 文件

在你的 VitePress 项目中，新建一个文件：/team.md

第二步：写入以下内容：

---
layout: page
---

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

const coreMembers = [
  {
    avatar: 'https://www.github.com/张三.png',
    name: '张三',
    title: '前端工程师',
    links: [
      { icon: 'github', link: 'https://github.com/张三' }
    ]
  },
  {
    avatar: 'https://www.github.com/李四.png',
    name: '李四',
    title: '产品经理'
  }
]

const partners = [
  {
    avatar: 'https://www.github.com/合作者.png',
    name: '王五',
    title: '社区贡献者'
  }
]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>我们的团队</template>
    <template #lead>
      我们是一个热爱开源、充满激情的团队，致力于构建优秀的产品。
    </template>
  </VPTeamPageTitle>

  <VPTeamPageSection>
    <template #title>核心成员</template>
    <template #lead>项目的主要维护者和开发者。</template>
    <template #members>
      <VPTeamMembers size="medium" :members="coreMembers" />
    </template>
  </VPTeamPageSection>

  <VPTeamPageSection>
    <template #title>社区伙伴</template>
    <template #lead>感谢以下社区成员的贡献。</template>
    <template #members>
      <VPTeamMembers size="small" :members="partners" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>

第三步：添加导航链接

在config.mjs里，添加导航链接：

export default {
  themeConfig: {
    nav: [
      { text: '团队', link: '/team' }
    ]
  }
}