跳到正文

指南

这个主题让 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 里关掉。