【亲测免费】【文档速成插件实战】docsify-sidebar-collapse安装与配置完全攻略

#【文档速成插件实战】docsify-sidebar-collapse安装与配置完全攻略

一、项目基础介绍及编程语言

docsify-sidebar-collapse 是一个专为 Docsify 设计的插件，它赋予侧边栏目录展开与折叠的功能，让用户能够更加灵活地浏览文档结构。Docsify 是一个轻量级的、基于Markdown的静态站点生成器，特别适合快速搭建个人博客、项目文档等。此插件采用的主要编程语言是 JavaScript，并且通过CSS来实现样式控制。

二、关键技术与框架

关键技术：

• Docsify: 静态站点生成的前端库，无需服务器渲染，专注于Markdown到HTML的实时转换。
• Vanilla JS: 项目基于原生JavaScript编写，不依赖于大型前端框架，保证了轻量级与灵活性。
• GitHub Pages 或 CDN 服务: 推荐用于部署文档，简化资源配置和分发。

框架与依赖：

• Docsify: 必须的文档引擎。
• docsify-sidebar-collapse: 本项目的核心插件，提供侧边栏目录的折叠功能。

三、安装与配置步骤

准备工作

1. 安装Docsify: 确保您的项目已经集成了Docsify。如果您还没有设置，可以访问Docsify官方指南进行初始化。

2. 了解Markdown: 文档通常以Markdown格式编写，确保您熟悉其基本语法。

安装步骤

第一步：获取docsify-sidebar-collapse插件

• 不需直接下载代码仓库，通过CDN引入是最便捷的方式。在您的HTML文件头部加入以下链接：

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

• 紧接着，引入docsify-sidebar-collapse插件：

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

第二步：配置Docsify

在引入上述脚本之前，设置window.$docsify对象来启用并配置插件：

<script>
window.$docsify = {
  loadSidebar: true,         // 确保开启侧边栏加载
  subMaxLevel: 3,             // 设置子目录的最大显示级别（可选）
  sidebarDisplayLevel: 1,    // 控制初始时展示的目录层级（本插件特定配置）
  
  // 如果有其他自定义配置，一并放置于此
};
</script>

第三步：创建或更新侧边栏Markdown文件

• 在项目根目录下创建或修改_sidebar.md文件，编写您的目录结构。例如：

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

第四步：应用样式（可选）

选择你喜欢的风格，通过CDN添加样式链接。例如，箭头样式的应用：

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

或者，如果你更喜欢文件夹图标：

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

最终检查与运行

• 确保所有脚本和链接都正确无误地放置在HTML文件中。
• 测试你的文档网站，查看侧边栏是否具有预期的折叠和展开效果。

至此，您已成功地将docsify-sidebar-collapse集成到Docsify项目中，提升了用户体验，使得文档导航更加高效直观。享受文档编辑和分享的乐趣吧！