自动生成侧边栏
Docusaurus can create a sidebar automatically from your filesystem structure: each folder creates a sidebar category, and each file creates a doc link.
type SidebarItemAutogenerated = {
type: 'autogenerated';
dirName: string; // 生成侧边栏切片的源文件夹(相对文档目录)
};
Docusaurus 可以从你的 docs 文件夹中自动生成整个侧边栏:
sidebars.js
module.exports = {
myAutogeneratedSidebar: [
{
type: 'autogenerated',
dirName: '.', // '.' 即当前的文档文件夹
},
],
};
An autogenerated
item is converted by Docusaurus to a sidebar slice (also discussed in category shorthands): a list of items of type doc
or category
, so you can splice multiple autogenerated
items from multiple directories, interleaving them with regular sidebar items, in one sidebar level.
A real-world example
Consider this file structure:
docs
├── api
│ ├── product1-api
│ │ └── api.md
│ └── product2-api
│ ├── basic-api.md
│ └── pro-api.md
├── intro.md
└── tutorials
├── advanced
│ ├── advanced1.md
│ ├── advanced2.md
│ └── read-more
│ ├── resource1.md
│ └── resource2.md
├── easy
│ ├── easy1.md
│ └── easy2.md
├── tutorial-end.md
├── tutorial-intro.md
└── tutorial-medium.md
假设每个文档的 ID 都只是它的文件名。 如果你像这么声明了自动生成侧边栏:
sidebars.js
module.exports = {
mySidebar: [
'intro',
{
type: 'category',
label: 'Tutorials',
items: [
'tutorial-intro',
{
type: 'autogenerated',
dirName: 'tutorials/easy', // 从 docs/tutorials/easy 生成侧边栏切片
},
'tutorial-medium',
{
type: 'autogenerated',
dirName: 'tutorials/advanced', // 从 docs/tutorials/hard 生成侧边栏切片
},
'tutorial-end',
],
},
{
type: 'autogenerated',
dirName: 'api', // 从 docs/api 生成侧边栏切片
},
{
type: 'category',
label: 'Community',
items: ['team', 'chat'],
},
],
};
It would be resolved as:
sidebars.js
module.exports = {
mySidebar: [
'intro',
{
type: 'category',
label: 'Tutorials',
items: [
'tutorial-intro',
// Two files in docs/tutorials/easy
'easy1',
'easy2',
'tutorial-medium',
// Two files and a folder in docs/tutorials/hard
'advanced1',
'advanced2',
{
type: 'category',
label: 'read-more',
items: ['resource1', 'resource2'],
},
'tutorial-end',
],
},
// Two folders in docs/api
{
type: 'category',
label: 'product1-api',
items: ['api'],
},
{
type: 'category',
label: 'product2-api',
items: ['basic-api', 'pro-api'],
},
{
type: 'category',
label: 'Community',
items: ['team', 'chat'],
},
],
};