vuepress 配置主题 vdoing

本文介绍如何为 vuepress 网站配置 vdoing 主题。vdoing 主题真得很棒，最大的特色是支持目录页, 目前在其它主题中还没有发现该功能，这个功能太实用了，可以清晰地显示章节结构或知识结构。

vuepress-theme-vdoing 主题的官方文档 (opens new window)

安装依赖

yarn add -D vuepress-theme-vdoing

修改配置

配置主题为 vdoing

vi ./config.js

  module.exports = {
    theme: 'vdoing'
  }

自动生成结构化侧边栏

vi ./config.js

module.exports = {
  themeConfig: {
      // 自动生成结构化侧边栏, 注意最多支持4级目录,切文件名前需要指定序号
     sidebar: 'structuring' //  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义
  }
}

按该主题的规范命名目录和文件

以"数字."开头

提示

开始定义的时候,数字不要连续挨着,为以后从 2 个文件中间插入文档留足空间

启动

执行 yarn docs:dev
访问http://localhost:8080

目录页配置

提示

1. 有了目录页, 就可以对博客站点的目录结构有个整体的认识
2. 我们并不希望目录页文件被放到侧边栏, 解决方法:不对目录页文件加序号,因为这样的命名不符合该主题的规范,所以不会收录到侧边栏中
3. 只能对 docs 下的直接子目录生成目录页 并不是所有的目录都可以生成目录页。

配置方法见官方文档 (opens new window)