指南
这个主题让 VuePress 站点读起来像一个 GitHub 仓库:头部、左侧文件树、中间的 Readme、 右侧页内目录。
包含什么
| 能力 | 说明 |
|---|---|
| 文档站 | 多级侧边栏、页内目录、上一页/下一页、本地搜索 |
| 博客 | 文章列表、标签页、归档、分页 |
| 首页 | frontmatter 驱动的 Hero、actions 与特性网格 |
| 组件库 | WCard、WSteps、Badge、FriendLinks、WNote、WRepoCard |
| 阅读体验 | 顶部阅读进度条、带编号的页内目录、代码块语言标签与复制、阅读时间与字数 |
| 多语言 | 每个 locale 独立的头部/侧边栏、独立的博客路由与翻译文案 |
章节
- 快速开始 —— 安装并接上主题
- 使用文档 —— 从第一页到成品站点的完整走查
- 配置参考 —— 主题理解的每一个选项
- 博客 —— 文章如何变成列表、标签与归档
- 搜索 —— 本地搜索索引与其选项
- 阅读体验 —— 进度条、页内目录、代码块、阅读时间与字数
- 多语言 —— 多语言站点与翻译文案
- 部署 —— 静态托管与常见失败
- 开发文档 —— 主题内部是怎么搭起来的
- 测试 —— 四层测试与 fixture 站点
- 发版 —— 版本增量规则与发布前验证
架构
主题完全独立:不继承任何其它主题,也不依赖某个设计系统包 —— 布局、组件与样式都在这 个仓库里。
src/
├── node/ 主题入口、博客页面生成、插件装配
└── client/
├── layouts/ Layout、NotFound
├── components/ navbar、sidebar、toc、blog、home、内容组件
├── composables/ 主题数据、侧边栏、博客数据、深色模式
├── utils/ 链接解析、侧边栏解析、编辑链接
└── styles/ Primer token 与各区块 SCSS 运行时只有三个依赖
vuepress、@vuepress/bundler-vite 与 sass。其余都是可选的行为插件,可以在 themePlugins 里关掉。