docsify 侧边栏目录扩展
扩展 目录 侧边
2023-09-14 09:00:00 时间
使用docsify 生成文档
docsify init
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="Description"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"> </head> <body> <div id="app"></div> <script> window.$docsify = { name: '', repo: '', loadSidebar: true,// 加载侧边栏 subMaxLevel: 2, loadNavbar: true, // 加载导航栏 search: { noData: { '/': '没有结果!' }, paths: 'auto', placeholder: { '/': '搜索' } } } </script> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> </body> </html>
_sidebar.md
* SDK API
* [登录功能](user/)
* [获取用户信息](user/getuserinfo)
* 其他接口
文档左侧目录没有折叠
官方文档中也没介绍,但是找到一个开源的
git地址 https://github.com/iPeng6/docsify-sidebar-collapse
修改index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="Description"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"> <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" /> </head> <body> <div id="app"></div> <script> window.$docsify = { name: '', repo: '', loadSidebar: true,// 加载侧边栏 subMaxLevel: 2, loadNavbar: true, // 加载导航栏 search: { noData: { '/': '没有结果!' }, paths: 'auto', placeholder: { '/': '搜索' } } } </script> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script> </body> </html>
可以使用sidebarDisplayLevel设置默认折叠的层级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="Description"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"> <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" /> </head> <body> <div id="app"></div> <script> window.$docsify = { name: '', repo: '', loadSidebar: true,// 加载侧边栏 subMaxLevel: 2, loadNavbar: true, // 加载导航栏 sidebarDisplayLevel: 1, search: { noData: { '/': '没有结果!' }, paths: 'auto', placeholder: { '/': '搜索' } } } </script> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script> </body> </html>
相关文章
- PHP7.4 全新扩展方式 FFI 详解
- ArcGIS 服务对象扩展(SOE)新手自学笔记(3):REST SOE模板下
- thinkphp6: 在extend目录下开发扩展类(php 8.1.1 / thinkphp v6.0.10LTS )
- Linq之扩展方法
- thinkphp6: 在extend目录下开发扩展类(php 8.1.1 / thinkphp v6.0.10LTS )
- Spark polynomialExpansion 多项式扩展
- 如何在SAP Business by design的UI上扩展新的按钮
- Atitit import sql fun 重要的sql功能扩展 ext 目录 1.1. Insert merge1 1.2. Insert set1 1.2.1. 13.2.5. LOAD
- Atitit mybatis的扩展使用sql udf,js java等语言 目录 1.1. 默认,mybatis使用xml,sql等语言来书写业务流程1 2. 使用ognl调用java函数1 3
- Atitit.一个cms有多少少扩展点,多少api wordpress cms有多少api。。扩展点
- atitit.eclipse有多少api 扩展点,以及扩展点的设计
- Android ExpandableListView实现列表可扩展点击显示内容或隐藏内容
- 【第21篇】屏蔽自编码器是可扩展的视觉学习器
- 对扩展openflow协议的一点思考
- 19 06-读取DTC扩展数据记录
- leaflet 自定义L.control扩展,配置地图水印(114)
- 使用pybind11开发python扩展库(7)
- CentOS下安装PHP的AMQP扩展方法和步骤
- 【openvino】 ie.add_extension即CPU插件扩展不能用问题
- 大数据Hadoop之——Hadoop HDFS多目录磁盘扩展与数据平衡实战操作