VuePress 侧边栏与导航栏生成利器：vuepress-plugin-autobar

作为 VuePress 的忠实用户，你是否也曾为侧边栏和导航栏的生成而烦恼？如果手动配置，不仅繁琐，而且容易出错。而 vuepress-plugin-autobar 的出现，可以让你轻松摆脱这些烦恼，自动生成美观实用的侧边栏和导航栏。

一、安装

npm install -D vuepress-plugin-autobar

二、配置

在 VuePress 的配置文件 .vuepress/config.js 中，添加如下配置：

module.exports = {
  plugins: [
    ['autobar']
  ]
}

三、使用

vuepress-plugin-autobar 会将 SourceDir (通常是 ./docs) 中所有文档按约定生成导航栏和侧边栏。

• nav 开头的文件夹将会成为导航栏。
• 如果手动配置了 themeConfig.nav，将会自动合并。
• nav.10.文件名, 10.文档标题 将会成为导航栏的链接。
• 文件名将会成为侧边栏的链接。

四、示例

以下是 vuepress-plugin-autobar 的一个示例：

docs/
  ├── nav/
  │   ├── 10.Home.md
  │   ├── 20.About.md
  │   └── 30.Contact.md
  ├── index.md
  ├── guide/
  │   ├── 10.GettingStarted.md
  │   ├── 20.Intermediate.md
  │   └── 30.Advanced.md
  └── api/
      ├── 10.Introduction.md
      ├── 20.Usage.md
      └── 30.Reference.md

此示例中，nav 文件夹下的文档将生成导航栏，guide 和 api 文件夹下的文档将生成侧边栏。

五、优点

• 自动生成侧边栏和导航栏，无需手动配置。
• 支持嵌套文件夹，方便组织文档。
• 支持多种主题，兼容性好。
• 开源免费，使用方便。

六、总结

vuepress-plugin-autobar 是一个非常好用的 VuePress 插件，可以自动生成美观实用的侧边栏和导航栏。它使用简单，兼容性好，是一款值得推荐的插件。