Astro 博客从零开始教学路线
📅发布日期：7/13/2025
Astro 博客从零开始教学路线
欢迎来到 Astro 博客的系统教学课程！本教程将一步步带你从项目初始化，到定制成一个支持中英切换、夜间模式、封面摘要卡片、多级目录和离线搜索的 Notion 风格博客。
📚 教学总路线图
| 序号 | 主题 | 功能示例 | 你将学到的知识 |
|---|---|---|---|
| ✅ 第 1 课 | 项目初始化 | npm create astro | Astro 项目结构、运行机制 |
| ✅ 第 2 课 | 写博客文章 | content collections | 动态路由、内容渲染、Zod 验证 |
| ✅ 第 3 课 | Notion 风格 | Callout、全局样式 | Markdown 美化、组件语法 |
| ✅ 第 4 课 | 夜间模式 | 切换亮/暗色主题 | CSS 变量机制、localStorage、JS DOM 操作 |
| 🔜 第 5 课 | 中英切换 | /zh /en | Astro 国际化原理、i18n 路由 |
| 🔜 第 6 课 | 博客封面摘要 | 图文卡片式布局 | Astro 模板语法、图片布局技巧 |
| 🔜 第 7 课 | 多级导航 | /blog/astro/2025/07/11 | 捕获路由机制、分类目录映射 |
| 🔜 第 8 课 | 离线搜索 | 文章全文搜索 | 构建 JSON 索引、前端搜索库 |