#

团队页面

By DoubleSpirit121 1 Views 9 MIN READ 0 Comments
在文档页面中展示团队成员信息,包括头像、昵称、社交链接等。通过在 Markdown 中使用团队成员数据,可以在 About 页面或其他位置展示项目贡献者信息,增强项目的可信度和社区感。

在页面(文档)中显示团队成员

如果想在某个文档页面里展示团队成员,比如在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" />

创建一个完整的团队页面

第一步:新建一个 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' }
    ]
  }
}

本文由 DoubleSpirit121 原创

采用 CC BY-NC-SA 4.0 协议进行许可

转载请注明出处:https://blog.mcoo.top/index.php/archives/17/

加入 Mcoo

0 评论

发表评论