vuepress-plugin-auto-sidebar-navbar

介绍（Introduction）

这是为 vuepress v2 自动生成侧边栏和导航栏的插件。 插件支持功能如下：

1. 自动生成sidebar和navbar。
2. 根据文件内容自动排序。
3. 支持自定义排序方法。

安装（Install）

## vuepress v2
npm i vuepress-plugin-auto-sidebar-navbar -D

快速使用（Usage）

VuePress v2 不再支持插件修改 sidebar，所以你需要在.vuepress/config.js自行引入生成的 sidebar.js 和navbar.js文件。

const { defaultTheme } = require('@vuepress/theme-default')
const navbar = require('./navbar.js')
const sidebar = require('./sidebar.js')
module.exports = {
  plugins: [
    ...,
    require('vuepress-plugin-auto-sidebar-navbar')({})
  ],
  theme: defaultTheme({
    ...,
    navbar, 
    sidebar, 
  })
}

插件默认参数

传参方式为：require('vuepress-plugin-auto-sidebar-navbar')(options)，其中options默认为以下参数：

options = {
    skipSidebar: false, // 默认生成sidebar
    skipNavbar: false, // 默认生成navbar
    sidebarUrl: '.vuepress/sidebar.js', // sidebar路径
    navbarUrl: '.vuepress/navbar.js', // navbar路径
}

自动排序

1. sidebar（侧边栏）根据md文件内容排序，排序规则为：autoSort: {number}中的number从小到大排序，其中number默认为 0。
2. navbar（导航栏）根据目录中的README.md文件内容排序，排序规则为：autoNavSort: {number}中的number从小到大排序，其中number默认为 0。

以sidebar为例，a.md内容如下：

---
autoSort: -1
---
# 文件a

b.md内容如下：

# 文件b

则sidebar显示内容：

文件a
文件b

自定义规则排序

在.vuepress/config.js中传入参数sortFn：

module.exports = {
  ...,
  plugins: [
    ...,
  	require('vuepress-plugin-auto-sidebar-navbar')({
  	sortFn: (a, b) => {
  		if (a.sort !== b.sort) return a.sort < b.sort ? -1 : 1
        	if (a.name !== b.name) return a.name < b.name ? -1 : 1
        	else if (a.createTime !== b.createTime) return a.createTime < b.createTime ? -1 : 1
        	else if (a.updateTime !== b.updateTime) return a.updateTime < b.updateTime ? -1 : 1
		},
	})
  ],
}