vuepress-----4、侧边栏

本文主要是介绍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'}}
}

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

# 侧边栏分组

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

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

# 数组形式：分组侧边栏

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

# 对象形式：

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

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

作者博客 (opens new window)

这篇关于vuepress-----4、侧边栏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---