团队介绍

感谢所有为本项目做出贡献的成员。本教程站致力于为中文开发者提供高质量、系统化的 VitePress 学习资源。

核心团队

项目定位

本项目是一个面向中文开发者的 VitePress 学习教程站，旨在帮助更多人快速上手 VitePress，构建高质量的文档站点。

项目维护者

VitePress 学习指南

项目发起 & 主要维护者

致力于提供高质量的 VitePress 中文教程，帮助开发者快速掌握静态站点生成技术。

Team Page 配置

VitePress 支持创建专业的团队页面，使用官方 Team Components 展示团队成员。

安装 Team Components

npm add -D @vitepress/theme

创建团队成员数据

创建 docs/.vitepress/data/team.ts：

export interface TeamMember {
  avatar: string
  name: string
  title?: string
  org?: string
  orgLink?: string
  desc?: string
  links?: { icon: string; link: string }[]
  sponsor?: string
}

export const teamMembers: TeamMember[] = [
  {
    avatar: 'https://github.com/yyx990803.png',
    name: 'Evan You',
    title: 'Creator',
    org: 'Vue.js',
    orgLink: 'https://vuejs.org',
    desc: 'Founder of Vue.js and Vite',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ],
    sponsor: 'https://github.com/sponsors/yyx990803'
  },
  {
    avatar: 'https://github.com/kiaking.png',
    name: 'Kia King Ishii',
    title: 'Core Team Member',
    org: 'Vue.js',
    orgLink: 'https://vuejs.org',
    links: [
      { icon: 'github', link: 'https://github.com/kiaking' }
    ]
  }
]

使用 Team 组件

创建 docs/team.md：

---
layout: page
---

<script setup>
import { VPTeamMembers } from 'vitepress/theme'
import { teamMembers } from '.vitepress/data/team'
</script>

# 团队成员

<VPTeamMembers size="medium" :members="teamMembers" />

Team 组件选项

VPTeamMembers

<VPTeamMembers
  size="small | medium"  <!-- 尺寸 -->
  :members="teamMembers" <!-- 成员数据 -->
/>

VPTeamPage

用于创建完整的团队页面布局：

<script setup>
import { VPTeamPage, VPTeamPageTitle, VPTeamMembers } from 'vitepress/theme'
import { coreTeam, emeritiTeam } from './data/team'
</script>

<template>
  <VPTeamPage>
    <VPTeamPageTitle>
      <template #title>团队成员</template>
      <template #lead>
        VitePress 的发展离不开这些贡献者的努力。
      </template>
    </VPTeamPageTitle>
    
    <VPTeamMembers title="核心团队" :members="coreTeam" />
    <VPTeamMembers title="荣誉成员" :members="emeritiTeam" />
  </VPTeamPage>
</template>

VPTeamPageSection

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>团队</template>
  </VPTeamPageTitle>
  
  <VPTeamPageSection>
    <template #title>核心贡献者</template>
    <template #desc>主要维护项目方向的成员</template>
    <template #members>
      <VPTeamMembers :members="coreTeam" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>

自定义样式

/* docs/.vitepress/theme/custom.css */

/* 团队成员卡片 */
.VPTeamMembersItem {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.VPTeamMembersItem:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* 头像样式 */
.VPTeamMembersItem .avatar {
  border-radius: 50%;
  border: 3px solid var(--vp-c-brand-1);
}

/* 深色模式 */
html.dark .VPTeamMembersItem:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

贡献指南

我们欢迎所有形式的贡献，包括但不限于：

贡献类型	说明
📝 内容贡献	撰写新教程、完善现有内容、修正错误
🐛 问题反馈	报告文档错误或提出改进建议
💡 功能建议	提出新功能或优化建议
🌍 翻译贡献	帮助翻译文档、优化翻译质量
🎨 设计贡献	优化网站视觉设计、制作素材

如何参与贡献

1. Fork 项目仓库

点击项目右上角的 Fork 按钮，将项目 Fork 到你的账户下。

2. 克隆并创建分支

# 克隆你 Fork 的仓库
git clone https://github.com/你的用户名/vitepress-learning-guide.git

# 进入项目目录
cd vitepress-learning-guide

# 创建功能分支
git checkout -b feature/AmazingFeature

3. 进行修改

• 新增教程：在 docs/ 目录下创建新的 .md 文件
• 修改内容：直接编辑对应的 .md 文件
• 添加代码示例：使用代码块并标注语言

4. 提交并推送

# 添加修改的文件
git add .

# 提交修改（请使用清晰的提交信息）
git commit -m "docs: 添加 xxx 教程"

# 推送到远程仓库
git push origin feature/AmazingFeature

5. 提交 Pull Request

1. 前往你 Fork 的仓库页面
2. 点击 "New Pull Request"
3. 填写 PR 描述，说明修改内容
4. 等待审核和合并

内容规范

文档结构规范

---
title: 页面标题
description: 页面描述（用于 SEO）
---

# 页面标题

简要介绍...

## 二级标题

内容...

### 三级标题

内容...

代码示例规范

• 使用语法高亮：```语言名
• 添加必要的注释
• 保持代码简洁易懂

图片规范

• 使用相对路径或 /public/ 目录
• 图片尺寸适中，避免过大
• 添加 alt 属性描述

社区资源

官方渠道

渠道	链接
VitePress 官方文档	vitepress.dev
VitePress GitHub	vuejs/vitepress
Vue.js 官方论坛	forum.vuejs.org

问题反馈

遇到问题可以通过以下方式反馈：

1. 提交 Issue - 在本项目的 GitHub 仓库提交问题
2. 参与讨论 - 在 GitHub Discussions 中交流
3. 官方社区 - VitePress Discord 社区

致谢

感谢以下项目和社区的支持：

• Vue.js - 渐进式 JavaScript 框架
• Vite - 下一代前端构建工具
• VitePress - Vue 驱动的静态站点生成器
• 所有为本项目贡献过代码、提出过建议的开发者

---

加入我们

如果你对 VitePress 感兴趣，欢迎参与项目贡献！每一个 PR 都会让这个教程变得更好。