leetcode-notebook 的題解越來越多，原先選擇 Gitbook 構建解題本的弊端逐漸顯現出來，每次補充一道題解重新 build 項目時居然要花上 30 秒左右……
由於無法忍受 gitbook build 的速度和大量垃圾靜態文件，我打算重新構建項目，因此有了與 docsify 的邂逅。
docsify 是什么？
官方的介紹是：
A magical documentation site generator.
與 Gitbook 和 VuePress 相同，docsify 是一個文檔站點生成器。至於它究竟 magic 在何處，我將在后面說到。
快速開始
安裝
首先全局安裝 docsify-cli：
npm i docsify-cli -g
初始化
假設我們要在 ./docs 子目錄中編寫文檔，將該目錄初始化：
docsify init ./docs
初始化后系統幫我們生成了一個 ./docs 目錄，目錄中包含以下文件：
index.html：入口文件README.md：將作為主頁渲染.nojekyll：阻止 Github Pages 忽略以下划線開頭的文件
預覽
使用以下命令啟動本地服務器：
docsify serve docs
路由說明
頁面路由和文件夾的對應關系如下：
docs/README.md => http://domain.com
docs/guide.md => http://domain.com/guide
docs/zh-cn/README.md => http://domain.com/zh-cn/
docs/zh-cn/guide.md => http://domain.com/zh-cn/guide
導航與側邊欄配置
導航欄
簡單導航欄
簡單的導航欄可以在 index.html 文件中直接定義：
<body>
<nav>
<a href="#/">LeetCode 題解</a>
<a href="http://jalan.space" target="_blank">我的博客</a>
</nav>
<div id="app"></div>
</body>
復雜導航
復雜導航可以通過 Markdown 文件配置。
首先配置 loadNavbar 為 true：
<script>
window.$docsify = {
loadNavbar: true
}
</script>
<script src="//unpkg.com/docsify"></script>
在 ./docs 下創建一個 _navbar.md 文件，在該文件中使用 Markdown 格式書寫導航：
- 導航 1
- [子導航](nav1/child/ "子導航")
- [導航 2](nav2/ "導航2")
側邊欄
默認情況下，側邊欄會根據當前文章的標題生成目錄。但也可以通過 Markdown 文檔生成。
首先配置 loadSidebar 選項為 true：
<script>
window.$docsify = {
loadSidebar: true
}
</script>
<script src="//unpkg.com/docsify"></script>
然后在 ./docs 下創建 _sidebar.md 文件：
- [簡介](/ "簡介")
- 數據結構
- [數組](data-structure/array/ "數組")
- [字符串](data-structure/string/ "字符串")
- [鏈表](data-structure/linked_list/ "鏈表")
- 樹
- [遞歸](data-structure/tree/recursion/ "遞歸")
- [層次遍歷（BFS）](data-structure/tree/bfs/ "層次遍歷（BFS）")
- [前中后序遍歷（DFS）](data-structure/tree/dfs/ "前中后序遍歷（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/ "第 121 場周賽")
- [第 122 場周賽](weekly/122/ "第 122 場周賽")
插件
代碼高亮
使用 Prism 作為代碼高亮插件，可以在 index.html 中這樣配置：
<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 代碼，那么就要引入：
<script src="//unpkg.com/prismjs/components/prism-python.js"></script>
對不同語言的高亮支持可見 Prism 倉庫。
更多插件見 插件列表。
部署到 Github Pages
我的 Github Pages 讀取的是 gh-pages 分支下的代碼，因此我要把 ./docs 下的文件上傳到 gh-pages 分支上，完整的代碼則上傳的到 master 分支。
為了方便更新，我在項目根目錄下放置了一個用於推送代碼的腳本 push.sh：
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
與 Gitbook 體驗對比
初次搭建這一類文檔站點使用的是 Gitbook， 之前寫過一篇 搭建 GitBook 並托管到 git pages，目前我倉庫里可見的文檔站點幾乎都是 Gitbook 搭建的。然而很早開始 Gitbook 團隊就專注於 Gitbook 的商業化項目，命令行工具已經被拋棄了……
| 對比項 | docsify | Gitbook |
|---|---|---|
| 是否需要編譯 | 否 | 是 |
| 插件 | 較少 | 多 |
| 閱讀體驗 | 好 | 極好 |
| 靈活性 | 較好 | 較差 |
其中最大的不同點還是 docsify 是輕量級、無需編譯的，而 Gitbook 每次 build 都需要生成一堆 HTML 靜態文件，不僅 build 時間長，還污染了我的提交記錄……🤦♂️
而在插件方面，雖然 docsify 插件不如 Gitbook 的豐富，但麻雀雖小五臟俱全，該有的基本也都有，足夠使用。
如果再建文檔站點，我估計再也不會回去使用 Gitbook 了。
如果你覺得文章寫得不錯，請幫我兩個小忙：
- 點贊並關注我，讓這篇文章被更多人看到
- 關注公眾號「編程拯救世界」，公眾號專注於編程基礎與服務端研發，你將第一時間獲得新文章的推送~
原創不易，多多支持~謝謝大家！
