Preface: If you want to publish your notes and documents on the Internet, the best way may be GitBook. Because GitBook has been upgraded 2.0, it is no longer a free lunch. Then, I found VuePress with a fresh interface, suitable for notes, documents and so on.

During the process, I found that I needed to manually set the sidebar and navigation bar, and it was time-consuming to import a lot of notes. Get ready to write a plugin to automatically generate the sidebar. At this time, I found a Turkish guy’s work of Vuepress-bar, which perfectly realized the automatic generation of catalogue and navigation bar, and was surprisingly consistent with my design ideas. I was delighted.

However, this plugin is not written in the same way as vuepress-plugin, so some configuration is needed to introduce it, and it does not use the VUepress API interface. After a lot of changes. Finally, the requirements are perfectly fulfilled.

The target

Installing the vuepress-plugin-autobar plugin will generate the navigation bar and sidebar by convention for all documents in the SourceDir (usually./docs).

convention

  1. navThe starting folder will become the navigation bar if manually configuredthemeConfig.navWill automatically merge.
  2. Nav. 10. The file name.10. The file name… It automatically removes prefixes and sorts numbers.
  3. nonnavThe opening folder will be Group.
  4. folder01.guide--nc 以 --ncThe end means to set the Group to default expansion.
  5. folder01.guide--d2 以 - d digitalEnd, to set the directory depth.

The installation

npm install -D boboidream/vuepress-bar
Copy the code
// Add a plug-in to the configuration
// .vuepress/config.js
// or
// .vuepress/theme/index.js

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

The effect

  • Local folder
  • Automatic directory generation

Online experience: note.wenboz.com/js/

Tips

  1. To use the vuepress-plugin-Permalink-Pinyin plugin, set pinyinNav: true in the Autobar plugin configuration to automatically complete the pinyin address compatibility.

    // Add parameters to the configuration
// .vuepress/config.js
// or
// .vuepress/theme/index.js
module.exports = {
  plugins: ['permalink-pinyin'['autobar', {'pinyinNav': true}}]],Copy the code

  2. If you think generating links is too ugly, you can use the vuepress-plugin-rpurl plugin, which will optimize autobar generating links by default:

    • 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. For more advanced configurations: github.com/boboidream/…