代码示例仓库
本页面提供所有实战案例的完整代码示例，方便你快速开始学习。
🚀 快速开始
克隆仓库
bash
# 克隆示例代码仓库（本教程源码）
git clone https://cnb.cool/ZhangWeilong/VitePress.git
# 进入项目目录
cd VitePress
# 安装依赖
npm install目录结构
vitepress-examples/
├── examples/
│ ├── 01-blog/ # 博客搭建示例
│ ├── 02-component-docs/ # 组件库文档示例
│ ├── 03-api-docs/ # API 文档站示例
│ ├── 04-resume/ # 个人简历站示例
│ ├── 05-knowledge-base/ # 知识库站点示例
│ └── 06-corporate-site/ # 企业官网示例
├── shared/ # 共享组件和样式
└── README.md📂 示例列表
1. 博客搭建
bash
cd examples/01-blog
npm run dev包含功能：
- 文章列表与标签筛选
- 文章数据加载器
- Giscus 评论集成
- RSS 订阅
- 深色模式
学习要点：
- 数据加载 (
createContentLoader) - 动态侧边栏生成
- 自定义组件开发
2. 组件库文档
bash
cd examples/02-component-docs
npm run dev包含功能：
- 组件演示容器
- API 表格组件
- 主题定制器
- 代码复制功能
学习要点：
- 组件文档结构
- API 文档自动生成
- 主题 CSS 变量
3. API 文档站
bash
cd examples/03-api-docs
npm run dev包含功能：
- API 端点文档模板
- 多语言代码示例
- 错误码文档
- SDK 集成示例
学习要点：
- API 文档结构设计
- 代码示例组件
- 搜索优化
4. 个人简历站
bash
cd examples/04-resume
npm run dev包含功能：
- 响应式简历布局
- 技能进度条
- 打印优化样式
- PDF 导出
学习要点：
- 自定义页面布局
- 打印媒体查询
- 响应式设计
5. 知识库站点
bash
cd examples/05-knowledge-base
npm run dev包含功能：
- 标签云导航
- 全文搜索
- 最近更新
- 双向链接
学习要点：
- 内容组织策略
- 搜索功能配置
- 数据聚合展示
6. 企业官网
bash
cd examples/06-corporate-site
npm run dev包含功能：
- 专业首页 Hero 区域
- 产品/服务展示
- 联系表单组件
- 公司数据统计
- SEO 结构化数据
学习要点：
- 非文档场景应用
- 自定义业务组件
- SEO 和结构化数据
🛠 进阶示例
PWA 支持
查看 PWA 配置 了解如何为站点添加离线访问能力。
多语言站点
查看 多语言支持 了解如何搭建多语言站点。
自动化部署
每个示例都包含 GitHub Actions 配置文件：
yaml
# .github/workflows/deploy.yml
name: Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/.vitepress/dist📦 独立示例下载
如果你只想下载单个示例，可以使用以下命令：
bash
# 使用 degit 下载单个示例（基于本教程源码）
npx degit ZhangWeilong/VitePress/docs/examples/01-blog my-blog
cd my-blog
npm install
npm run dev🤝 贡献示例
欢迎贡献你的示例代码！
- Fork 仓库
- 创建新分支：
git checkout -b feature/new-example - 在
examples/目录下添加新示例 - 提交更改：
git commit -m 'Add new example' - 推送分支：
git push origin feature/new-example - 创建 Pull Request
📝 示例规范
每个示例应包含：
| 文件 | 说明 |
|---|---|
README.md | 示例说明和运行指南 |
docs/ | VitePress 文档目录 |
package.json | 依赖和脚本配置 |
.github/workflows/ | 自动化部署配置 |
🔗 相关资源
📊 企业级案例研究
查看 企业级案例研究 了解大型企业如何使用 VitePress：
- Vue.js 官方文档案例分析
- Element Plus 组件库文档架构
- 企业内部知识库私有化部署
- 开源项目文档站最佳实践
提示
如果你在学习过程中遇到问题，欢迎在 CNB Issues 提问。