如何在个人Docusaurus网站中添加左侧目录侧边栏折叠按钮

适用版本说明 #

Docusaurus 2.4及以上版本、3.x版本均支持原生配置实现该功能，无需额外修改代码。

操作步骤 #

1. 打开项目根目录下的docusaurus.config.js配置文件
2. 找到themeConfig下的docs配置段，添加sidebar.hideable参数并设置为true，参考配置如下：

export default {
  // 其余原有配置保持不变
  themeConfig: {
    docs: {
      sidebar: {
        // 开启侧边栏可折叠功能，自动在侧边栏顶部添加折叠按钮
        hideable: true,
        // 可选配置：开启侧边栏分类自动折叠，展开新分类时自动收起旧分类
        autoCollapseCategories: true,
      },
    },
    // 其余原有themeConfig配置保持不变
  },
}

3. 保存配置文件后，执行npm run start重启本地开发服务，即可在左侧侧边栏顶部看到折叠按钮。

注意：上述配置仅对官方默认的@docusaurus/theme-classic主题生效，如果你使用了第三方自定义主题，需要对应调整主题组件配置。

旧版本适配方案（Docusaurus < 2.4） #

如果你使用的是2.4版本之前的旧版Docusaurus，需要通过Swizzle修改主题组件实现：

• 执行命令弹出侧边栏组件：npm run swizzle @docusaurus/theme-classic DocSidebar -- --eject
• 在弹出的src/theme/DocSidebar/index.js文件中添加折叠状态控制逻辑和按钮UI，通过自定义类名控制侧边栏的显示/隐藏即可。

内容的提问来源于stack exchange，提问作者EStark