vuepress-----4、侧边栏

# 4、侧边栏

# 自动生成侧栏

如果你希望自动生成一个仅仅包含了当前页面标题(headers)链接的侧边栏,你可以通过 YAML front matter 来实现:

---
sidebar: auto
---

你也可以通过配置来在所有页面中启用它:

// .vuepress/config.js
module.exports = {themeConfig: {sidebar: 'auto'}
}

在 多语言 (opens new window) 模式下, 你也可以将其应用到某一特定的语言下:

// .vuepress/config.js
module.exports = {themeConfig: {'/zh/': {sidebar: 'auto'}}
}

image-20231123103856123

home页面中的home: true会抑制侧边栏的生成

# 侧边栏分组

记得关闭自动生成侧边栏的功能

sidebar: ['/',['/about/','关于我'],['/about.html', '关于我的HTML'],['/about/','关于我'],
]

image-20231123105634447

# 数组形式:分组侧边栏

sidebar: ['/','/about/',{title: '美丽的 CSS',path: '/css/',collapsable: false, // 可选的, 默认值是 true,sidebarDepth: 1,    // 可选的, 默认值是 1children: ['/css/c-aaa','/css/c-bbb','/css/c-ccc',]}
]

image-20231123111738875

# 对象形式:

sidebar: {"/css/": ['c-aaa','c-bbb','c-ccc',],"/javascript/": ['j-aaa','j-bbb','j-ccc',]
}

image-20231123112649836

视频作者开发插件 (opens new window)

作者博客 (opens new window)