【亲测免费】 Docsify侧边栏折叠插件使用指南

Docsify-Sidebar-Collapse是一款专为Docsify设计的插件，它实现了侧边栏目录的展开与折叠功能，增强用户体验。本文档旨在指导您顺利安装并有效使用该插件，让您能够充分利用其特性来优化您的知识库或文档网站。

安装指南

npm安装方式

如果您偏好使用npm进行包管理，可以通过以下命令将Docsify-Sidebar-Collapse添加到您的项目中：

npm install docsify-sidebar-collapse --save

之后，在您的项目HTML文件中通过脚本来引入它：

<script src="node_modules/docsify/lib/docsify.min.js"></script>
<script src="node_modules/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>

CDN方式

对于不想使用npm的用户，可以直接通过CDN链接添加到项目中：

<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>

项目的使用说明

在开始使用前，请确保您的Docsify配置已启用loadSidebar选项，并且根目录下有一个_sidebar.md文件来存放目录结构。

1. 配置Docsify 在文档页面的JavaScript配置块中，确保包含以下设置：

   window.$docsify = {
     loadSidebar: true,
     alias: { '/.*/_sidebar.md': '/_sidebar.md' }, // 可选，用于处理不同路径下访问时的侧边栏
     subMaxLevel: 3, // 根据需要设置子菜单的最大层级
     sidebarDisplayLevel: 1, // 设置默认展示的侧边栏层级
     ...
   }
   

2. 引入插件 直接在配置文档的同一HTML文件内，加入插件的引入代码：

   <!-- 插件引入 -->
   <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
   

3. _sidebar.md示例 您的_sidebar.md应按照Markdown格式组织，例如：

   - [数据结构与算法](/general/algorithm/README.md)
     - 数据结构
       - [栈](/general/algorithm/data-structures/stack/README.zh-CN.md)
       ...
   

项目API使用文档

Docsify-Sidebar-Collapse主要通过其自动集成的方式工作，无需额外的API调用。但是，您可以自定义样式来改变其显示效果，例如选择箭头风格或文件夹风格的展示样式：

• 箭头风格 引入对应CSS：

  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css">
  

• 文件夹风格 若想采用类似文件夹的展开收缩效果，引入这个CSS：

  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css">
  

至此，您已经成功地准备了环境，配置了插件，并理解了基本的使用方法和API风格调整。现在，您的Docsify文档站点便支持侧边栏目录的动态折叠与展开了，提高阅读体验和导航效率。