代码配方
这里收集了 VitePress 开发中常见需求的快速解决方案，每个配方都包含完整的代码和说明。
配方分类
| 分类 | 配方数量 | 适用场景 |
|---|---|---|
| 布局配方 | 4 个 | 页面布局定制 |
| 功能配方 | 4 个 | 功能增强 |
| 内容配方 | 4 个 | 内容管理 |
| 集成配方 | 4 个 | 第三方集成 |
热门配方
布局配方
| 配方 | 难度 | 说明 |
|---|---|---|
| 自定义 404 页面 | 入门 | 设计独特的 404 页面，提升用户体验 |
| 添加回到顶部按钮 | 入门 | 实现平滑滚动回到顶部 |
| 自定义导航栏样式 | 进阶 | 定制导航栏外观和功能 |
| 页脚定制 | 入门 | 添加备案信息、版权声明 |
功能配方
| 配方 | 难度 | 说明 |
|---|---|---|
| 添加评论系统 | 进阶 | 集成 Giscus/Waline 等评论系统 |
| 添加全站搜索 | 入门 | 本地搜索与 Algolia 配置 |
| 添加阅读时间 | 入门 | 自动计算文章阅读时间 |
| 文章字数统计 | 入门 | 统计文章字数 |
内容配方
| 配方 | 难度 | 说明 |
|---|---|---|
| 自动生成侧边栏 | 进阶 | 根据目录自动生成侧边栏 |
| 文章标签系统 | 进阶 | 实现文章标签分类 |
| 文章归档页面 | 进阶 | 按时间归档文章 |
| 相关文章推荐 | 进阶 | 基于标签推荐相关文章 |
集成配方
| 配方 | 难度 | 说明 |
|---|---|---|
| Google Analytics | 入门 | 集成 GA4 统计分析 |
| RSS 订阅 | 入门 | 生成 RSS 订阅源 |
| PWA 支持 | 进阶 | 添加离线访问能力 |
| Sitemap 生成 | 入门 | 自动生成站点地图 |
使用方式
每个配方都包含：
- 问题描述 - 解决什么问题
- 完整代码 - 可直接复制使用
- 使用说明 - 如何集成到项目中
- 注意事项 - 常见问题和限制
快速选择指南
按需求选择
| 需求 | 推荐配方 |
|---|---|
| 想要评论功能 | 添加评论系统 |
| 想要搜索功能 | 添加全站搜索 |
| 想要统计功能 | Google Analytics |
| 想要博客功能 | 文章标签系统 + 文章归档 |
| 想要离线访问 | PWA 支持 |
| 想要 SEO 优化 | Sitemap 生成 + RSS 订阅 |
按难度选择
mermaid
graph LR
A[入门配方] --> B[进阶配方]
A --> A1[404 页面]
A --> A2[回到顶部]
A --> A3[搜索功能]
A --> A4[GA 统计]
B --> B1[评论系统]
B --> B2[标签系统]
B --> B3[PWA 支持]配方使用技巧
复制即用
所有配方代码都经过测试，可以直接复制到项目中使用。
注意依赖
部分配方需要安装额外的依赖包，请仔细阅读「使用说明」部分。
配方组合
多个配方可以组合使用，如同时添加评论、搜索和统计功能。
贡献配方
分享你的配方
有好的配方想要分享？欢迎提交 PR！
配方贡献规范
- 提供完整的代码示例
- 说明使用场景和前置条件
- 添加必要的注释说明
- 列出需要安装的依赖