侧边栏
此处记录在docusaurus
中编写sidebars.js
的注意事项
编写标准
基于 category
类型写的编写标准
方便自己复制粘贴
{
type: 'category',
label: '',
link: {
type: 'generated-index',
},
items: [
'',
'',
'',
],
},
类型
doc
type: 'doc',
id: 'string', //文档id
label: 'string', //侧边栏标题
className?: 'string', //侧边栏标签类名
customProps?: 'Record<string, unknown>', //自定义属性
link
type: 'link',
label: 'Facebook', //链接标题
href: 'https://facebook.com', //外部 URL
href: '/', // 内部路径
category
这是最常用的标签类型
上面的编写标准也是基于此写的
type: 'category',
label: 'Guides',
collapsible: true,
collapsed: false,
items: [
'creating-pages',
{
type: 'category',
label: 'Docs',
items: [
'introduction',
'sidebar',
'markdown-features',
'versioning',
],
},
],
提示
会根据 items
的顺序自动生成一个索引页,显示此类别的所有直接子项。
slug
允许你自定义生成页面的路径,默认为 /category/[类别名]
。
链接文档
module.exports = {
docs: [
{
type: 'category',
label: '教程',
link: {
type: 'doc',
id: 'introduction', //应为具体路径
},
items: ['pages', 'docs', 'blog', 'search'],
},
],
};
文档中嵌入索引
在 Markdown
文档中,可以直接添加下方代码块来显示对应分类中的其他文档
```mdx-code-block
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
<DocCardList items={useCurrentSidebarCategory().items}/>
```
因为代码块的问题,⬆️上面缺少一个 `
以此做到页面中索引的功能
此功能实例
autogenerated
tutorialSidebar: [
{
type: 'autogenerated',
dirName: '.' //当前路径 '.'即当前的文档文件夹
}
],
html
type: 'html',
value: '<img src="sponsor.png" alt="Sponsor" />', //要渲染的 HTML
defaultStyle: true, //使用默认的菜单项目样式
*ref
ref
类型与 doc
类型 几乎一模一样,唯一的区别就是它不参与生成导航元数据。
它只会注册一个链接。
在生成分页和显示侧边栏时,ref
项目会被完全忽略。
当你想要从若干个侧边栏链接到同一篇文档时,ref
会很有用。 文档只会属于一个侧边栏(那个它以 type: 'doc'
形式出现的侧边栏,或者包含在自动生成目录里),但它的链接会出现在所有包含了它的侧边栏里。
举个🌰
sidebars.js
module.exports = {
tutorialSidebar: {
'Category A': [
'doc1',
'doc2',
{type: 'ref', id: 'commonDoc'},
'doc5',
],
},
apiSidebar: ['doc3', 'doc4', 'commonDoc'],
};
你可以把 ref
类型看做是同时做了下面两件事:
- 为
commonDoc
设置了displayed_sidebar: tutorialSidebar
(ref
会在侧边栏绑定时被忽略) - 为
doc2
设置了pagination_next: doc5
,同时为doc5
设置了pagination_prev: doc2
(ref
会在生成分页导航时被忽略)