Skip to main content

自动生成侧边栏

在 Docusaurus 中，sidebar.ts 文件默认是手动定义的，但你可以通过使用 自动生成侧边栏 功能，让 Docusaurus 自动根据文件夹结构生成侧边栏内容。

以下是具体方法：

1. 使用自动生成的侧边栏

确保文档目录的结构清晰：

默认的文档目录是 docs/，你可以按主题或类别组织文件夹。

docs/
├── intro.md
├── tutorial-basics/
│   ├── create-a-document.md
│   ├── markdown-features.md
└── tutorial-extras/
    ├── manage-docs-versions.md
    ├── translate-your-site.md

修改 sidebar.ts 文件：

使用 autogenerated 功能。

示例配置：

import { SidebarsConfig } from '@docusaurus/plugin-content-docs';

const sidebars: SidebarsConfig = {
  // 自动生成所有文档的侧边栏
  tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
};

export default sidebars;

这里的 dirName: '.' 表示从 docs/ 根目录开始自动生成。

保存文件。

2. 自定义部分自动生成

如果你只想对某些部分使用自动生成，而其他部分仍手动指定，可以混合使用。例如：

const sidebars: SidebarsConfig = {
  tutorialSidebar: [
    {
      type: 'category',
      label: 'Basics',
      items: [{ type: 'autogenerated', dirName: 'tutorial-basics' }],
    },
    {
      type: 'category',
      label: 'Extras',
      items: [{ type: 'autogenerated', dirName: 'tutorial-extras' }],
    },
    // 手动指定单个文档
    'intro',
  ],
};

export default sidebars;

3. 自动生成的优点

动态更新：当你添加或删除文档时，侧边栏会自动更新，无需手动修改 sidebar.ts。
清晰结构：只需确保文件夹和文件的命名清晰，Docusaurus 会根据你的文件层级生成侧边栏。

4. 注意事项

文件夹层级：自动生成会严格按照文件夹层级生成分类。
文件元数据：如果需要自定义显示顺序，可以在文档的开头添加 sidebar_position 属性。例如：
```
---
sidebar_position: 1
---
```

1. 使用自动生成的侧边栏
2. 自定义部分自动生成
3. 自动生成的优点
4. 注意事项