docsify侧边栏⽬录扩展
使⽤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/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/npm/docsify@4"></script>
<script src="//cdn.jsdelivr/npm/docsify/lib/plugins/search.min.js"></script>
</body>
</html>
_sidebar.md
* SDK API
* [登录功能](user/)
* [获取⽤户信息](user/getuserinfo)
* 其他接⼝
⽂档左侧⽬录没有折叠
官⽅⽂档中也没介绍，但是到⼀个开源的
git地址
修改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/npm/docsify@4/lib/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr/npm/docsify-sidebar-collapse/dist/sidebar.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr/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/npm/docsify@4"></script>
<script src="//cdn.jsdelivr/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr/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/npm/docsify@4/lib/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr/npm/docsify-sidebar-collapse/dist/sidebar.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr/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/npm/docsify@4"></script>
<script src="//cdn.jsdelivr/npm/docsify/lib/plugins/search.min.js"></script>
js导航栏下拉菜单
<script src="//cdn.jsdelivr/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script> </body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。