Vuepress Plugin Beautiful Bar

Currently testing passed in node version 10.15.1

Documentations Here

github

gitee

Usage

Suppose our file structure is as follows

tree docs

docs
├── demo.md
├── nodejs
│   ├── README.md
│   └── vue
│       ├── README.md
│       └── vuepress
│           └── README.md
└── README.md

All you need to do is to config themeConfig.nav at .vuepress/config.js, and add beautiful-bar into plugins

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'demo', link: '/demo'},
      {
        text: 'contact',
        items: [
          { text: 'Github', link: 'https://github.com/xiaminghu/vuepress-plugin-beautiful-bar' }
          { text: 'Gitee', link: 'https://gitee.com/xiaminghu/vuepress-plugin-beautiful-bar' }
          { text: 'Npm', link: 'https://www.npmjs.com/package/vuepress-plugin-beautiful-bar' }
        ]
      }
      {
        text: 'NodeJS',
        items: [
          { text: 'vue', link: '/platform/vue/' },
        ]
      }
    ]
  },
  plugins: [
    'beautiful-bar'
  ]
}

and beautifulBar will generate corresponding sidebar for you automatically

{
  "/nodejs/": [
    "",
    {
      "title": "vue",
      "collapsable": true,
      "sidebarDepth": 2,
      "children": [
        "vue/",
        {
          "title": "vuepress",
          "collapsable": true,
          "sidebarDepth": 2,
          "children": ["vue/vuepress/"]
        }
      ]
    }
  ]
}

Options

in most cases you don't need to edit those configs in config.js, but if there's some bug with these functions and I'm not able to update the package timely, it would be a good choice to modify those functions.

Github and Gitee has some error parsing the following table when I use a symbol | in this way: /img|image|src/g, while npm and vuepress have no such problem. In order to display it correctly in Github and Gitee, I need to escape the | with \, which may look strange in Npm and Vuepress. If so, please just ignore it.

| key | default | description | | :------------: | :------------------: | :-----------------------------------------: | | exclude | /img\|image\|src/g | RegExp of excluded directories | | readmeFirst | true | place README.md at the top of sidebar | | saveSidebar | false | whether to save generated sidebar data | | sidebarRelPath | sidebar.json | the default path where sidebar is generated |

Sorting

you could add a beautiful-bar config file to enable sorting function, the config file should be a js file currently, approximately looks like this:

module.exports = {
  sort: {
    recursive: false,
    sortBy: 'customOrder',
    order: ['nodejs.md', 'python.md', 'cpp.md'],
    customMethod: (arry) => {},
  },
}

sortBy option could be Name, customOrder, customMethod currently, and you'd find it's examples in my repository, github and gitee. here i handles process the value you input (inputValue.replace(/[^\w]/g, '').lower()),
in concern of different coding style, you could input custom_order, CustomOrder, custom order, and even c%U\/s#T$o-mO r*d^e~r is ok, though i guess you won't do that.

when you sortBy Name, it just sort according to its filename

when you sortBy customOrder, it only take effect in current directory, the option recursive won't take effect, and you can control the order of this directory directly using option order. Besides, please input the fullname of the file or directory, though it could be judged by fs module, it would take redundant consumption.

when you sortBy customMethod, you could use your own sorting method, and don't worry if your code raise an error, cause beautiful bar will catch it and tell you some infomation to help you handle with it.

the option recursive is used for applying your sorting method recursively, there would be two kind of situations:

• using parent config:
  • if parent config has recursive: true and current config fail to load
• using current config:
  • if parent config is unable to applied recursively such as customOrder
  • if you have a .beautiful-bar.js config file in your current directory