交互式教程

通过动手实践学习 VitePress！每个教程都包含详细的步骤、可运行的代码示例和配套练习，帮助你从零构建完整的 VitePress 站点。

学习路径概览

graph LR
    A[入门系列] --> B[样式定制]
    B --> C[功能扩展]
    C --> D[高级实战]

教程路线

🚀 入门系列

适合零基础用户，从创建项目到部署上线，快速掌握 VitePress 核心用法。

教程	时长	难度	你将学到
创建你的第一个站点	15分钟	入门	项目初始化、首页配置、开发服务器
添加导航和侧边栏	10分钟	入门	导航栏、侧边栏、多级菜单
部署到线上	10分钟	入门	GitHub Pages、Vercel、Netlify 部署

完成入门系列后，你将能够：独立创建并部署一个基本的 VitePress 文档站。

🎨 样式定制

学习如何美化站点外观，打造个性化视觉风格。

教程	时长	难度	你将学到
自定义主题颜色	10分钟	入门	CSS 变量覆盖、品牌色定制
创建自定义布局	20分钟	进阶	布局插槽、组件组合、页面模板
开发自定义主题	30分钟	进阶	主题架构、全局组件、样式系统

完成样式定制后，你将能够：将默认主题定制为符合品牌风格的独特站点。

⚡ 功能扩展

为站点添加交互功能和第三方集成。

教程	时长	难度	你将学到
添加博客功能	25分钟	进阶	文章列表、分页、标签、归档
集成评论系统	15分钟	进阶	Giscus、Waline 等评论方案
实现多语言	20分钟	进阶	多语言路由、翻译管理、语言切换

完成功能扩展后，你将能够：将文档站扩展为功能完备的内容平台。

🔧 高级实战

挑战高级主题，成为 VitePress 进阶开发者。

教程	时长	难度	你将学到
开发 VitePress 插件	40分钟	高级	插件架构、Markdown-it 扩展、构建钩子
构建组件文档站	45分钟	高级	组件示例、Props 文档、交互式演示

完成高级实战后，你将能够：开发插件和构建专业级组件文档站。

学习方式

三步学习法

1. 阅读教程 — 理解概念和原理，了解每一步的目的
2. 动手实践 — 跟随步骤操作，在本地项目中实现
3. 完成挑战 — 每个教程末尾的挑战任务，巩固所学知识

推荐学习顺序

入门系列（按顺序） → 样式定制（按顺序） → 功能扩展（按需选择） → 高级实战（按需选择）

学习建议

• 建议按照教程顺序学习，每个教程都基于前一个教程的知识
• 每完成一个教程，尝试修改代码参数观察变化
• 遇到问题时先查看教程中的「常见问题」章节
• 完成所有入门系列后，可以跳到感兴趣的进阶教程

环境准备

开始教程前，请确保：

条件	要求	检查方式
Node.js	18+	node -v
包管理器	npm / pnpm / yarn	npm -v
代码编辑器	VS Code（推荐）	—
基础知识	Markdown 语法	—
可选	Vue 基础、TypeScript 基础	—

npm

node -v && npm -v

pnpm

node -v && pnpm -v

yarn

node -v && yarn -v

常见问题

我应该从哪个教程开始？

如果你是完全的新手，建议从 创建第一个站点 开始。如果你已有 VitePress 基础，可以根据上方教程路线跳到感兴趣的章节。

教程中的代码可以在哪里运行？

所有教程代码都可以在本地项目中运行。你也可以使用 在线演练场 快速体验。

教程和指南文档有什么区别？

• 指南文档（如 入门指南）侧重于概念理解和知识讲解
• 交互式教程侧重于动手实践，每一步都有明确的操作指令和预期结果

学完所有教程后如何继续深入学习？

完成所有教程后，可以：

• 阅读 高级功能 深入理解 VitePress 机制
• 查看 最佳实践 优化站点质量
• 浏览 代码配方 获取常用功能实现
• 参与 社区贡献 与他人交流