【vuepress】vuepress (十七)自动生成文件列表侧边栏

这恐怕是最重要的插件了。 vuepress原本不支持自动生成侧边栏,文件名导航。 自动生成的都是文件内容里标题的侧边栏导航。

https://shanyuhai123.github.io/vuepress-plugin-auto-sidebar/features/plugin-options.html#title%EF%BC%88%E6%A0%87%E9%A2%98%EF%BC%89

安装(Installation) npm i vuepress-plugin-auto-sidebar -D #使用(Usage) 最简单的使用,无需配置 themeConfig:

// **/.vuepress/config.js module.exports = { plugins: { “vuepress-plugin-auto-sidebar”: {} } }

说明 在设计时,希望能够更专心于写好你的博客或笔记,无论之后增删改文件都不再需要关心插件的配置问题,所以将一些配置置于文件内。

进一步了解 Front Matter。

#精准排序 更精准的排序需要在文件中添加 autoPrev 或 autoNext 并指定同目录下的文件名,需要注意的是,错误的文件名会导致侧边栏不显示该文件。

如将当前页面排序到 插件的可选项 后面:


autoPrev: plugin-options — 除了精准排序,还有内置的排序规则。

#多个分组 希望像 vuepress 官网那样支持多个分组,需要在文件内添加分组标识 autoGroup:


autoGroup-1: 分组名称

autoGroup+10: 分组名称


其中 autoGroup 为固定格式,不可更改。- 和 + 二者选其一,- 代表在默认分组的下方,数字越大越往下;+ 代表在默认分组的上方,数字越大越往上。

配置示例:

配置1 配置2 效果展示:

分组效果

Written on July 22, 2020