docsify-sidebar-collapse 项目使用教程

甄新纪

于 2024-08-16 09:31:26 发布

阅读量364

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00740/article/details/141248379

版权

docsify-sidebar-collapse 项目使用教程

docsify-sidebar-collapsea docsify plugin, support sidebar catalog expand and collapse项目地址:https://gitcode.com/gh_mirrors/do/docsify-sidebar-collapse

1. 项目的目录结构及介绍

docsify-sidebar-collapse/
├── dist/
│   ├── docsify-sidebar-collapse.min.js
│   └── sidebar-folder.min.css
├── src/
│   ├── index.js
│   └── sidebar-folder.css
├── package.json
├── README.md
└── index.html

dist/：包含编译后的文件，用于生产环境。
- docsify-sidebar-collapse.min.js：核心脚本文件，实现侧边栏折叠功能。
- sidebar-folder.min.css：样式文件，用于美化侧边栏。
src/：源代码目录。
- index.js：主逻辑文件。
- sidebar-folder.css：样式源文件。
package.json：项目依赖和配置文件。
README.md：项目说明文档。
index.html：项目启动文件。

2. 项目的启动文件介绍

index.html 是项目的启动文件，主要包含以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>docsify-sidebar-collapse</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css">
</head>
<body>
  <div id="app"></div>
  <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>
  <script>
    window.$docsify = {
      loadSidebar: true,
      sidebarDisplayLevel: 0,
    };
  </script>
</body>
</html>

引入了 docsify 和 docsify-sidebar-collapse 的核心脚本文件。
配置了 window.$docsify 对象，启用了侧边栏加载和折叠功能。

3. 项目的配置文件介绍

package.json 是项目的配置文件，包含项目的基本信息和依赖：

{
  "name": "docsify-sidebar-collapse",
  "version": "1.3.5",
  "description": "a docsify plugin support sidebar catalog expand and collapse",
  "main": "dist/docsify-sidebar-collapse.min.js",
  "scripts": {
    "build": "rollup -c"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iPeng6/docsify-sidebar-collapse.git"
  },
  "keywords": [
    "docsify",
    "sidebar",
    "collapse"
  ],
  "author": "iPeng6",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iPeng6/docsify-sidebar-collapse/issues"
  },
  "homepage": "https://github.com/iPeng6/docsify-sidebar-collapse#readme",
  "devDependencies": {
    "rollup": "^2.3.4",
    "rollup-plugin-terser": "^5.3.0"
  }
}