- Objective:
- Breadcrumb:
# 概念阐释
通过[[Docusaurus 插件]]设置边栏的样式与内容。
- [[Docusaurus 侧边栏项目]]：`sidebars.js`文件中的不同类型对象与它们的API
- 自动生成侧边栏
- 使用多个侧边栏
# 实例
#### [导航栏链接到侧边栏](https://docusaurus.io/zh-CN/docs/api/themes/configuration#navbar-doc-sidebar-docsPluginId)
^91c7db
```config.js
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'docSidebar',// 项目类型设置为侧边栏链接,不要改
position: 'left',// 导航栏的哪一侧
sidebarId: 'api', //sidebar.js中的对象ID,一个ID对应一个导航栏下的所有文件夹
label: 'API',//项目显示在浏览器上对名称
},
],
},
},
};
```
```sidebar.js
tutorialSidebar: [//对象ID，对应导航栏的一个栏目
'intro',
'hello',
{
type: 'category',//文件夹1
label: 'Tutorial Basics',
},
{
type: 'category',//文件夹2
label: 'Tutorial Extra',
},
],
```
#### 手动创建文件夹+自动生成内部文件侧边栏
```js
module.exports = {
tutorialSidebar: [
'intro',//md文件
'hello',//md文件
{
type: 'category',//类型：文件夹
label: 'Tutorial Basics',//文件夹显示在页面上的名字
//items里的内容是次文件夹下的md文件生成后将自动展示在侧边栏
items:[{
type: 'autogenerated',
dirName: 'tutorial-basics',//导航栏为tutorial内的子文件夹名称
}]
},
// items: ['tutorial-basics/create-a-document'],如果这样写是手动写法，只会显示一个文件
{
type: 'category',
label: 'Tutorial Extra',//文件夹2显示在页面上的名字
items:[{
type: 'autogenerated',
dirName: 'tutorial-extras',//导航栏为tutorial内的子文件夹1名称
}]
//items: ['tutorial-extras/translate-your-site'],如果这样写是手动写法，只会显示一个文件
},
],
```
# 相关内容
## 使用边栏
将sidebar.js中的代码任务传递给config.js中的doc文件夹下。
```config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),//这一行
},
},
],
],
};
```
```sidebar.js
@type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
};
```
## 边栏的层级结构
这是一个侧边栏文件，导出一个侧边栏，名为`tutorialSidebar`. 它有三个顶级项目：两个**md文件**，两个**类别**和一个**外部链接**。在每个类别中，都有一些文档链接。
```sidebar.js
module.exports = {
tutorialSidebar: [
'intro',//md文件
'hello',//md文件
{
type: 'category',//类型：文件夹
label: 'Tutorial Basics',//文件夹显示在页面上的名字
//items里的内容是次文件夹下的md文件生成后将自动展示在侧边栏
items:[{
type: 'autogenerated',//自动生成
dirName: 'tutorial-basics',//文件夹路径名
}]
},
// items: ['tutorial-basics/create-a-document'],如果这样写是手动写法，只会显示一个文件
{
type: 'category',
label: 'Tutorial Extra',//文件夹2显示在页面上的名字
items:[{
type: 'autogenerated',
dirName: 'tutorial-extras',
}]
//items: ['tutorial-extras/translate-your-site'],如果这样写是手动写法，只会显示一个文件
},
{
type: 'link',
label: 'Learn more',
href: 'https://example.com',
},
],
};
```
## 主题
在config.js的[[Configuration - themeConfig 主题]]中启用`themeConfig.docs.sidebar.hideable`选项，可隐藏侧边栏，在中型屏幕上阅读有更好的专注力。`themeConfig.docs.sidebar.autoCollapseCategories`选项会在展开一个类别时折叠所有同级类别。
## 默认侧边栏 Default sidebar
如果未指定sidebarPath，Docusaurus将自动为您生成一个侧边栏，使用docs文件夹的文件系统结构：在`sidebars.js`文件中
```sidebar.js
module.exports = {
mySidebar: [//对应config.js中的sidebarId属性
{
type: 'autogenerated',
dirName: '.', //'.' 表示将自动生成当前文件夹中的 Markdown 文件。
},
],
};
```
## JSON文件
在各自的文件夹中添加一个`_category_.json`或`_category_.yml`文件。您可以指定任何类别元数据以及`position`元数据。`label`、`className`、`position`和`customProps`将默认为类别链接文档的相应值（如果有）。
# 参考资料
[边栏](https://docusaurus.io/docs/sidebar)