docsify是什么？看官网怎么说：
A magical documentation site generator.
一个神奇的文档站点生成器。
docsify官网
安装
npm全局安装
Mac使用npm安装docsify的时候遇到了错误：
1
| gyp: No Xcode or CLT version detected!
|
解决办法：
1
2
| sudo rm -rf $(xcode-select -print-path)
xcode-select --install
|
初始化
创建目录并初始化：
1
| docsify init docsify_folder
|
在已有的目录中初始化：
index.html：入口文件
README.md：主页内容
.nojekyll：用于阻止 GitHub Pages忽略掉下划线开头的文件
预览
1
| docsify serve docsify_folder
|
路由
页面路由和文件夹的对应关系如下：
1
2
3
4
| docsify_folder/README.md => http://domain.com
docsify_folder/guide.md => http://domain.com/guide
docsify_folder/zh-cn/README.md => http://domain.com/zh-cn/
docsify_folder/zh-cn/guide.md => http://domain.com/zh-cn/guide
|
导航栏与侧边栏
导航栏
简单导航条
在index.html中：
1
2
3
4
5
6
7
| <body>
<nav>
<a href="#/">LeetCode题解</a>
<a href="https://herotiga.github.io" target="_blank">我的博客</a>
</nav>
<div id="app"></div>
</body>
|
复杂导航条
通过md文件配置
- 配置
loadNavbar 为 true：
1
2
3
4
5
6
| <script>
window.$docsify = {
loadNavbar: true
}
</script>
<script src="//unpkg.com/docsify"></script>
|
在 ./docs 下创建一个 _navbar.md 文件，在该文件中使用 Markdown 格式书写导航：
1
2
3
| * 导航1
* [子导航](nav1/child/)
* [导航2](nav2/)
|
侧边栏
默认情况下，侧边栏会根据当前文章的标题生成目录。但也可以通过 Markdown 文档生成。
首先配置 loadSidebar 选项为 true：
1
2
3
4
5
6
| <script>
window.$docsify = {
loadSidebar: true
}
</script>
<script src="//unpkg.com/docsify"></script>
|
然后在 ./docs 下创建 _sidebar.md 文件：
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
| * [简介](/)
* 数据结构
* [数组](data-structure/array/)
* [字符串](data-structure/string/)
* [链表](data-structure/linked_list/)
* 树
* [递归](data-structure/tree/recursion/)
* [层次遍历（BFS）](data-structure/tree/bfs/)
* [前中后序遍历（DFS）](data-structure/tree/dfs/)
* [其他](data-structure/tree/other/)
* [堆](data-structure/heap/)
* [栈](data-structure/stack/)
* [哈希表](data-structure/hash/)
* 算法思想
* 排序
* [堆排序](algorithm/sort/heap/)
* [快速排序](algorithm/sort/quick/)
* [冒泡排序](algorithm/sort/bubble/)
* [其他](algorithm/sort/other/)
* 搜索
* [深度优先](algorithm/research/dfs/)
* [广度优先](algorithm/research/bfs/)
* [二分查找](algorithm/research/binary-search/)
* [动态规划](algorithm/dynamic/)
* [贪心](algorithm/greedy/)
* [位运算](algorithm/bit/)
* [数学题](algorithm/math/)
* [其他](algorithm/other/)
* 周赛
* [第 121 场周赛](weekly/121/)
* [第 122 场周赛](weekly/122/)
* [第 124 场周赛](weekly/124/)
* [第 129 场周赛](weekly/129/)
* [第 130 场周赛](weekly/130/)
* [第 131 场周赛](weekly/131/)
* [第 133 场周赛](weekly/133/)
* [第 134 场周赛](weekly/134/)
* [第 136 场周赛](weekly/136/)
* [第 137 场周赛](weekly/137/)
* [第 138 场周赛](weekly/138/)
|
插件
代码高亮
使用 Prism 作为代码高亮插件，可以在 index.html 中这样配置：
1
2
3
| <script src="//unpkg.com/docsify"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
|
注意这里引入的文件，如果你要高亮 Python 代码，那么就要引入：
1
| <script src="//unpkg.com/prismjs/components/prism-python.js"></script>
|
对不同语言的高亮支持可见 Prism 仓库。
部署
我的 Github Pages 读取的是 gh-pages 分支下的代码，因此我要把 ./docs 下的文件上传到 gh-pages 分支上，完整的代码则上传的到 master 分支。
为了方便更新，我在项目根目录下放置了一个用于推送代码的脚本 push.sh：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| message=$1
# 复制 README.md
cp README.md docs/README.md
# 更新 master
git add .
git commit -m "$message"
git push -f git@github.com:JalanJiang/leetcode-notebook.git master
# 更新 gh-pages
cd docs/
git init
git add -A
git commit -m "$message"
git push -f git@github.com:JalanJiang/leetcode-notebook.git master:gh-pages
|
