侧边栏

此处记录在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 会在生成分页导航时被忽略)