VuePress 自動生成側邊欄和導航欄，完美替代 GitBook

前言：
但願將筆記、文檔發佈到網絡上，之前最好的方式多是 GitBook，因爲 GitBook 已升級 2.0，再也不是免費的午飯。而後，找到了 VuePress 界面清新，很適合筆記、文檔等。

使用過程當中發現須要手動設置側邊欄、導航欄，導入大量筆記就很費時了。準備動手寫個插件來自動生成側邊欄。此時，發現了 vuepress-bar 一個土耳其小夥的做品，比較完美實現了自動生成目錄和導航欄，並且與個人設計思路驚人的一致，欣喜。

可是，這個插件並未按照 vuepress-plugin 的方式編寫，因此引入仍是須要一些配置，也沒有使用 vuepress 的 API 接口，通過一頓魔改後。終於完美實現了需求。

---

目標

安裝插件 vuepress-plugin-autobar，會將 SourceDir (一般是 ./docs) 中全部文檔按約定生成導航欄和側邊欄。

約定

1. nav 開頭的文件夾將會成爲導航欄，若是手動配置了 themeConfig.nav 將自動合併。
2. nav.10.文件名, 10.文件名……會自動去掉前綴、排序數字。
3. 非 nav 開頭文件夾會成爲 Group。
4. 文件夾 01.guide--nc 以 --nc 結尾意爲設置 Group 默認展開。
5. 文件夾 01.guide--d2 以 --d數字 結尾，爲設置目錄深度。

安裝

npm install -D boboidream/vuepress-bar
複製代碼

// 配置中添加插件
// .vuepress/config.js
// or
// .vuepress/theme/index.js

module.exports = {
  plugins: ['autobar']
}
複製代碼

效果

• 本地文件夾

  

• 自動生成目錄

線上體驗：note.wenboz.com/js/

Tips

1. 如使用 vuepress-plugin-permalink-pinyin 此插件，請在autobar插件配置中設置 pinyinNav: true ，將自動完成拼音地址兼容。

   // 配置中添加參數
   // .vuepress/config.js
   // or
   // .vuepress/theme/index.js
   module.exports = {
     plugins: ['permalink-pinyin', ['autobar', {'pinyinNav': true}]],
   }
   複製代碼

2. 若是以爲生成連接太醜，可使用 vuepress-plugin-rpurl 插件，此插件會默認將 autobar 生成連接優化：

   • before use:
     /nav.10.js/10-core/mian-xiang-dui-xiang/mian-xiang-dui-xiang.html

   • after use:
     /js/core/mian-xiang-dui-xiang/mian-xiang-dui-xiang.html

3. 更多高級配置：github.com/boboidream/…