入坑 docsify，一款神奇的文檔生成利器！
layout: post
category: java
title: 入坑 docsify，一款神奇的文檔生成利器！
tagline: by 沉默王二
tags:
– java
Guide 哥是我認識的一個非常優秀的年輕人，胖嘟嘟的身軀里充斥著無窮無盡的才華，他的 JavaGuide 在 GitHub 上已經標星 91K+ 了，空閑的時候我都會上去瞅兩眼，畢竟學習使我快樂，嘿嘿。
有一天，我發現，他整的那個在線版看起來非常漂亮，我就問他用什麼做的，他就會回我說，「docsify，很方便。」剛好我最近在更新《教妹學 Java》專欄，就也想整個在線版的，方便讀者閱讀。
01、docsify 是什麼
一款神奇的文檔生成利器
自從有了 Markdown， 我就再沒用過富文本編輯器，因為 Markdown 的書寫有一種心流的感覺。很多部落格平台都支援 Markdown 了，即便是不支援，也沒關係，可以通過 mdnice 或者 Md2All 轉成富文本的格式。
docsify 可以自動地將 Markdown 中的標題生成目錄，並且可以配合碼雲（中國的訪問速度比 GitHub Pages 更快）快速搭建一個小型的文檔網站，整個頁面的配色和布局也十分舒適，讓閱讀體驗在不知不覺中提升了好幾個檔次。
和 Gitbook 不同，docsify 不會生成靜態的 HTML 文件，它會智慧地載入和解析 Markdown 文件，這就避免了 HTML 文件對整個文檔庫的「污染」。
貼一下 docsify 的官網：
//docsify.js.org/
點進去後你會感覺非常的賞心悅目，滿滿的小清新。不得不承認，我的眼睛被它深深地吸引了。
02、入坑 docsify
第一步，打開命令行，執行以下命令安裝 docsify-cli，方便本地初始化和實時預覽。
npm i docsify-cli -g
如果這一步非常非常慢的話，可以強制退出，因為 npm 是從國外伺服器下載的，受網路影響較大。
淘寶團隊幫我們解決了這個煩惱，搞了一個 npm 的中國鏡像。可以通過執行下面的命令把 npm 替換成 cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果出現 Error: EACCES: permission denied, access '/usr/local/lib/node_modules' 錯誤的話，是因為執行命令時沒有獲得管理員許可權，解決方案就在 npm 前面加上 sudo：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
輸入密碼後就可以執行成功了。然後執行 cnpm i docsify-cli -g 命令進行安裝。如果還提示許可權錯誤（Error: EACCES: permission denied）的話，記得加上 sudo。
PS：sudo 是一個 linux 系統管理指令，允許系統管理員讓普通用戶執行一些 root 級別的命令。
安裝成功後，會提示以下資訊。
第二步，執行以下命令創建文檔目錄並初始化。
docsify init ./docs
進入 docs 目錄後，可以看到 README.md（做為主頁內容渲染）和 index.html（入口文件）兩個文件。
第三步，回到 docs 的上級目錄，執行以下命令啟動本地服務。
docsify serve docs
第四步，在瀏覽器地址欄輸入 //localhost:3000 進行預覽。
03、自定義導航欄
打開 index.html 文件，在 body 標籤中添加 nav 標籤，如下所示：
<body>
<nav>
<a href="www.itwanger.com">沉默王二個人部落格</a>
</nav>
<div id="app"></div>
</body>
保存後，就可以在瀏覽器上查看到效果。
04、訂製化配置項
打開 index.html 文件，在 script 標籤中對 window.$docsify 進行配置，如下所示：
window.$docsify = {
name: '教妹學Java',
repo: '//github.com/itwanger/TechSisterLearnJava',
}
1）name：文檔標題，會顯示在側邊欄頂部。
2）repo：GitHub 上的倉庫地址，會在頁面右上角渲染一個 GitHub 角標。
保存後，就可以在瀏覽器上查看到效果。
05、安裝插件
1）全文搜索
全文搜索插件會根據當前頁面上的超鏈接獲取文檔內容，在 localStorage 內建立文檔索引。默認過期時間為一天，也可以指定需要快取的文件列表或者過期時間。
打開 index.html 文件，添加全文搜索配置項，並引入 search.min.js，如下所示：
<body>
<script>
window.$docsify = {
search: {
paths: 'auto',
placeholder: '搜索',
noData: '找不到結果',
depth: 3,
},
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
保存後，就可以在瀏覽器上查看到效果。
2）圖片縮放
在 index.html 文件中引入 zoom-image.min.js 即可，如下所示：
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
保存後，就可以在瀏覽器上查看到效果，滑鼠放到一張圖片上時會出現縮小或者放大的圖標，點擊後就可以改變圖片的形態。
3）複製到剪貼板
在所有的程式碼塊上添加一個簡單的 Click to copy 按鈕來允許用戶從你的文檔中輕易地複製程式碼。在 index.html 文件中引入 docsify-copy-code 即可，如下所示：
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
保存後，就可以在瀏覽器上查看到效果。
4）字數統計
提供了統計中文漢字和英文單詞的功能，並且排除了一些 markdown 語法的特殊字元例如 *、- 等。
打開 index.html 文件，添加 count 配置項，並引入 countable.js，如下所示：
<body>
<script>
window.$docsify = {
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}
</script>
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>
保存後，就可以在瀏覽器上查看到效果。
06、程式碼高亮
docsify 內置的程式碼高亮工具是 Prism。Prism 默認支援的語言如下：
- Markup –
markup,html,xml,svg,mathml,ssml,atom,rss - CSS –
css - C-like –
clike - JavaScript –
javascript,js
Java 需要在 index.html 文件中添加額外的語法文件，如下所示：
<script src="//cdn.jsdelivr.net/npm/[email protected]/components/prism-java.min.js"></script>
保存後，就可以在瀏覽器上查看到效果。
07、部署到碼雲
我們可以把文檔網站部署到 GitHub Pages 上，但對於中國用戶來說，碼雲的訪問速度顯然會更快一些。
如果你是第一次使用 GitHub 的話，我這裡已經為你準備好了教程：
在 GitHub 上新建一個倉庫，把你的文檔全部放到 docs 目錄下，我的已經創建好了，就叫 TechSisterLearnJava。
接下來，登錄碼雲，選擇從 GitHub 導入倉庫。
選擇對應倉庫後點擊導入。
導入成功後，點擊「查看倉庫」，就可以看到從 GitHub 導入到碼雲的倉庫。點擊「服務」，選擇「Gitee Pages」。
勾選強制啟用 HTTPS，然後點擊「啟動」按鈕。不一會兒，碼雲 Pages 服務就開啟了。
點擊網站地址：
就可以看到 docsify 已經成功部署到碼雲上了。
08、最後
強烈推薦一下《教妹學 Java》專欄，目前已更新 15 節內容（近 5 萬字），後面每周至少會更新 2 節，預計更新 130 節，從 Java 的基礎知識到對象和類，再到集合框架、網路編程、並發編程和 Java 虛擬機，基本上全方位覆蓋。
專欄中涉及到的圖片都花了我很多精力和心思，力爭給你一種耳目一新的感覺，隨便截幾張圖給你看看。
這麼好的專欄上哪去找呢？免費給你（反正我也不知道自己是怎麼想的）！
GitHub 閱讀地址（star 它）：
碼雲閱讀地址（star 它）：
docsify 在線閱讀地址：
我知道，我知道，不用你開口，離線版的 PDF 我也準備好了，看這暗黑風格的 PDF，閱讀起來絕壁賞心悅目啊。
百度網盤下載（暗黑和亮白，兩種）地址：
PS：整完這個 docsify 後，我累壞了，一瞅時間，凌晨 1 點 32 分了，說實話，眼睛已經迷離了。
