非原创,我只是善于发现的搬运工,原创作者:https://github.com/Wsine/blog

一直觉得docsify唯一美中不足的就是侧栏不能收起来,于是我在茫茫网页中搜索解决办法,发现官方也没有做出回应,在不断的检索中,偶然发现作者写的一篇文章,提了一下目录折叠,但是没有详细步骤,作为一个网页开发工作者,我看了一下 index.html , 第一感觉还是蒙圈,仔细分析了一下,伪代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
这部分没啥特殊的
</head>
<body>
<script>
window.$docsify{
这部分是主题的配置文件,
markdown:{
`markdown渲染部分`
},
plugins:[
`折叠代码`
]
}
</script>
</body>
</html>

还有下面引入的 js ,我看了看都是我需要的,我就原封不动的把 index 文件复制下来了

加入了 标题站标搜索 ,还需要重点说明的是 _sidebar.md 文件书写格式:

1
2
3
4
* 复制index页
- [test1](pack/test1.md)
* sidebar书写格式
- [test2](pack/test2.md)
  • 上下内容不允许有空行
  • 显示的目录要 * 开头,文章页是 -

index.html 代码,多数地方我已经标记了含义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!-- index.html -->
<!-- 折叠目录插件作者: https://github.com/Wsine/blog -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<title>标题</title>
<!-- 站标 -->
<link rel="shortcut icon" href="" type="image/x-icon">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
</head>
<body>

<div id="app"></div>
<script>
const sleep = ms => new Promise(r => setTimeout(r, ms));
window.$docsify = {
name: '模板',
repo: '#',
loadSidebar: true,
subMaxLevel: 2,
auto2top: true,
search: 'auto', // 默认值
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
},
search: {
placeholder: '请输入搜索关键词...'},
// markdown渲染
markdown: {
renderer: {
code: function(code, lang) {
if (lang === "flow") {
(async () => {
await sleep(500);
var diagram = flowchart.parse(code);
diagram.drawSVG('flow');
})();
return '<div id="flow"></div>';
} else if (lang === "sequence") {
(async () => {
await sleep(500);
var diagram = Diagram.parse(code);
diagram.drawSVG('sequence', {theme: 'simple'});
})();
return '<div id="sequence"></div>';
} else if (lang === "mermaid") {
return (
'<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
);
} else if (lang === "c++") {
lang = "cpp";
}
return this.origin.code.apply(this, arguments);
}
}
},
// 折叠目录
plugins: [
function(hook, vm) {
hook.doneEach(function() {
document.querySelectorAll(".sidebar-nav > ul > li").forEach(
function(node, index, nodelist) {
var span = document.createElement("span");
span.innerHTML = node.firstChild.data;
span.style.cursor = "pointer";
span.onclick = function(event) {
var ul = event.target.nextElementSibling;
if (ul.style.display === "none") {
ul.style.display = "block";
} else {
ul.style.display = "none";
}
};
node.firstChild.replaceWith(span);
node.lastChild.style.display = "none";
});
var active = document.querySelector(".sidebar-nav li.active");
if (active) {
active.parentElement.style.display = "block";
}
});
}
]
}
</script>
<!-- docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!-- 语言高亮 -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-cmake.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
<!-- 流程图 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flowchart/1.12.0/flowchart.min.js"></script>
<!-- 时序图 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
<!-- 阿甘图 -->
<script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script type="text/javascript">mermaid.initialize({ startOnLoad: false });</script>
</body>
</html>