Appearance
VitePress 课程
这是一个完整的 VitePress 教学课程，包含从零开始构建静态站点生成器的所有材料。
课程概述
本课程将带你从零开始构建一个完整的静态站点生成器，学习 VitePress 的核心原理和实现细节。课程分为 8 节课，每节课 20-40 分钟，总时长约 45-60 分钟。
课程文件导航
理论部分
| 文件 | 描述 | 类型 |
|---|---|---|
| 01-intro.md | 背景研究，包括项目概述、历史背景、技术栈 | 📚 理论 |
| 02-arch.md | 架构分析，包括高层架构、核心模块、数据流 | 📚 理论 |
| 03-code-walkthrough.md | 源代码导览，包括项目结构、核心文件详解 | 📚 理论 |
实践部分
| 文件 | 描述 | 类型 |
|---|---|---|
| 04-core-feature/ | 手写核心功能实现，包含完整源码和测试 | 💻 实践 |
| 05-lesson-plan.md | 分步课程计划，8 节课的详细内容 | 📖 教程 |
索引文件
| 文件 | 描述 | 类型 |
|---|---|---|
| index.json | JSON 格式的文件清单 | 📋 索引 |
| index.md | Markdown 格式的课程主页（本文件） | 📋 索引 |
目录结构
vitepress-course/
├── 01-intro.md # 背景研究
├── 02-arch.md # 架构分析
├── 03-code-walkthrough.md # 源代码导览
├── 04-core-feature/ # 手写核心功能实现
│ ├── src/ # 源代码
│ ├── test/ # 测试文件
│ ├── content/ # Markdown 内容
│ └── README.md # 项目文档
├── 05-lesson-plan.md # 分步课程计划
├── 06-slides.html # 配套幻灯片
├── index.json # JSON 索引
└── index.md # Markdown 索引（本文件）快速开始
1. 阅读背景研究
从 01-intro.md 开始，了解 VitePress 的背景和历史。
2. 学习架构
阅读 02-arch.md，理解 VitePress 的架构设计。
3. 源代码导览
通过 03-code-walkthrough.md 了解源代码结构。
4. 实践核心功能
进入 04-core-feature/README.md 目录，运行测试和构建：
bash
cd 04-core-feature
npm install
npm test
npm run build5. 学习课程
按照 05-lesson-plan.md 的步骤学习。
课程大纲
第 1 课：课程介绍与环境准备（5 分钟）
- 了解课程内容和目标
- 搭建开发环境
- 项目初始化
- 运行第一个测试
第 2 课：Markdown 解析基础（10 分钟）
- Markdown 语法简介
- 标题解析算法
- 正则表达式应用
- 单元测试编写
第 3 课：代码块和列表解析（10 分钟）
- 代码块语法
- 列表语法
- 状态机设计
- 多行内容处理
第 4 课：HTML 渲染（10 分钟）
- 将 tokens 转换为 HTML
- 实现 HTML 转义
- 生成语义化 HTML
第 5 课：Frontmatter 解析（10 分钟）
- Frontmatter 语法
- YAML 格式
- 正则表达式匹配
- 元数据提取
第 6 课：文件系统操作（10 分钟）
- Node.js 文件系统 API
- 递归算法
- 路径处理
- 异步操作
第 7 课：构建流程（10 分钟）
- 构建流程设计
- HTML 模板生成
- 并行处理
- 性能优化
第 8 课：完整构建与部署（10 分钟）
- 完整构建流程
- 静态站点部署
- 性能优化技巧
- 扩展功能建议
学习成果
完成本课程后，你将能够：
- ✅ 理解静态站点生成器的工作原理
- ✅ 掌握 Markdown 解析和 HTML 渲染
- ✅ 熟练使用 Node.js 文件系统 API
- ✅ 编写高质量的单元测试
- ✅ 构建自己的文档站点
参考资源
许可证
MIT License
联系方式
架构师AI杜
所有教学材料已保存。准备录制。
扫描二维码关注"架构师AI杜"公众号，获取更多技术内容和最新动态