Guide 哥是我認(rèn)識(shí)的一個(gè)非常優(yōu)秀的年輕人，胖嘟嘟的身軀里充斥著無窮無盡的才華箫踩，他的 JavaGuide 在 GitHub 上已經(jīng)標(biāo)星 91K+ 了爱态，空閑的時(shí)候我都會(huì)上去瞅兩眼，畢竟學(xué)習(xí)使我快樂境钟，嘿嘿锦担。
有一天，我發(fā)現(xiàn)慨削，他整的那個(gè)在線版看起來非常漂亮洞渔，我就問他用什么做的，他就會(huì)回我說缚态，“docsify磁椒，很方便∶德”剛好我最近在更新《教妹學(xué) Java》專欄浆熔，就也想整個(gè)在線版的，方便讀者閱讀桥帆。
01医增、docsify 是什么
一款神奇的文檔生成利器
自從有了 Markdown， 我就再?zèng)]用過富文本編輯器环葵，因?yàn)?Markdown 的書寫有一種心流的感覺调窍。很多博客平臺(tái)都支持 Markdown 了，即便是不支持张遭，也沒關(guān)系，可以通過 mdnice 或者 Md2All 轉(zhuǎn)成富文本的格式地梨。
docsify 可以自動(dòng)地將 Markdown 中的標(biāo)題生成目錄菊卷，并且可以配合碼云（國內(nèi)的訪問速度比 GitHub Pages 更快）快速搭建一個(gè)小型的文檔網(wǎng)站，整個(gè)頁面的配色和布局也十分舒適宝剖，讓閱讀體驗(yàn)在不知不覺中提升了好幾個(gè)檔次洁闰。
和 Gitbook 不同，docsify 不會(huì)生成靜態(tài)的 HTML 文件万细，它會(huì)智能地加載和解析 Markdown 文件扑眉，這就避免了 HTML 文件對(duì)整個(gè)文檔庫的“污染”。
貼一下 docsify 的官網(wǎng)：
點(diǎn)進(jìn)去后你會(huì)感覺非常的賞心悅目，滿滿的小清新腰素。不得不承認(rèn)聘裁，我的眼睛被它深深地吸引了。
02弓千、入坑 docsify
第一步衡便，打開命令行，執(zhí)行以下命令安裝 docsify-cli洋访，方便本地初始化和實(shí)時(shí)預(yù)覽镣陕。
npm i docsify-cli -g
如果這一步非常非常慢的話，可以強(qiáng)制退出姻政，因?yàn)?npm 是從國外服務(wù)器下載的呆抑，受網(wǎng)絡(luò)影響較大。
淘寶團(tuán)隊(duì)幫我們解決了這個(gè)煩惱汁展，搞了一個(gè) npm 的國內(nèi)鏡像鹊碍。可以通過執(zhí)行下面的命令把 npm 替換成 cnpm善镰。
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果出現(xiàn) Error: EACCES: permission denied, access '/usr/local/lib/node_modules' 錯(cuò)誤的話妹萨，是因?yàn)閳?zhí)行命令時(shí)沒有獲得管理員權(quán)限，解決方案就在 npm 前面加上 sudo：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
輸入密碼后就可以執(zhí)行成功了炫欺。然后執(zhí)行 cnpm i docsify-cli -g 命令進(jìn)行安裝乎完。如果還提示權(quán)限錯(cuò)誤（Error: EACCES: permission denied）的話，記得加上 sudo品洛。
PS：sudo 是一個(gè) linux 系統(tǒng)管理指令树姨，允許系統(tǒng)管理員讓普通用戶執(zhí)行一些 root 級(jí)別的命令。
安裝成功后桥状，會(huì)提示以下信息帽揪。
第二步，執(zhí)行以下命令創(chuàng)建文檔目錄并初始化辅斟。
docsify init ./docs
進(jìn)入 docs 目錄后转晰，可以看到 README.md（做為主頁內(nèi)容渲染）和 index.html（入口文件）兩個(gè)文件。
第三步士飒，回到 docs 的上級(jí)目錄查邢，執(zhí)行以下命令啟動(dòng)本地服務(wù)。
docsify serve docs
第四步酵幕，在瀏覽器地址欄輸入 http://localhost:3000 進(jìn)行預(yù)覽扰藕。
03、自定義導(dǎo)航欄
打開 index.html 文件芳撒，在 body 標(biāo)簽中添加 nav 標(biāo)簽邓深，如下所示：
<body>
<nav>
<a href="www.itwanger.com">沉默王二個(gè)人博客</a>
</nav>
<div id="app"></div>
</body>
保存后未桥，就可以在瀏覽器上查看到效果。
04芥备、定制化配置項(xiàng)
打開 index.html 文件冬耿，在 script 標(biāo)簽中對(duì) window.$docsify 進(jìn)行配置，如下所示：
window.$docsify = {
name: '教妹學(xué)Java',
repo: 'https://github.com/itwanger/TechSisterLearnJava',
}
1）name：文檔標(biāo)題门躯，會(huì)顯示在側(cè)邊欄頂部淆党。
2）repo：GitHub 上的倉庫地址，會(huì)在頁面右上角渲染一個(gè) GitHub 角標(biāo)讶凉。
保存后染乌，就可以在瀏覽器上查看到效果。
05懂讯、安裝插件
1）全文搜索
全文搜索插件會(huì)根據(jù)當(dāng)前頁面上的超鏈接獲取文檔內(nèi)容荷憋，在 localStorage 內(nèi)建立文檔索引。默認(rèn)過期時(shí)間為一天褐望，也可以指定需要緩存的文件列表或者過期時(shí)間勒庄。
打開 index.html 文件，添加全文搜索配置項(xiàng)瘫里，并引入 search.min.js实蔽，如下所示：
<body>
<script>
window.$docsify = {
search: {
paths: 'auto',
placeholder: '搜索',
noData: '找不到結(jié)果',
depth: 3,
},
}
</script>
<script src="http://cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
保存后，就可以在瀏覽器上查看到效果谨读。
2）圖片縮放
在 index.html 文件中引入 zoom-image.min.js 即可局装，如下所示：
<script src="http://cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
保存后，就可以在瀏覽器上查看到效果劳殖，鼠標(biāo)放到一張圖片上時(shí)會(huì)出現(xiàn)縮小或者放大的圖標(biāo)铐尚，點(diǎn)擊后就可以改變圖片的形態(tài)。
3）復(fù)制到剪貼板
在所有的代碼塊上添加一個(gè)簡單的 Click to copy 按鈕來允許用戶從你的文檔中輕易地復(fù)制代碼哆姻。在 index.html 文件中引入 docsify-copy-code 即可宣增，如下所示：
<script src="http://cdn.jsdelivr.net/npm/docsify-copy-code"></script>
保存后，就可以在瀏覽器上查看到效果矛缨。
4）字?jǐn)?shù)統(tǒng)計(jì)
提供了統(tǒng)計(jì)中文漢字和英文單詞的功能爹脾，并且排除了一些 markdown 語法的特殊字符例如 *、- 等箕昭。
打開 index.html 文件誉简，添加 count 配置項(xiàng)，并引入 countable.js盟广，如下所示：
<body>
<script>
window.$docsify = {
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}
</script>
<script src="http://unpkg.com/docsify-count/dist/countable.js"></script>
</body>
保存后，就可以在瀏覽器上查看到效果瓮钥。
06筋量、代碼高亮
docsify 內(nèi)置的代碼高亮工具是 Prism烹吵。Prism 默認(rèn)支持的語言如下：
- Markup -
markup,html,xml,svg,mathml,ssml,atom,rss - CSS -
css - C-like -
clike - JavaScript -
javascript,js
Java 需要在 index.html 文件中添加額外的語法文件，如下所示：
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-java.min.js"></script>
保存后桨武，就可以在瀏覽器上查看到效果肋拔。
07、部署到碼云
我們可以把文檔網(wǎng)站部署到 GitHub Pages 上呀酸，但對(duì)于國內(nèi)用戶來說凉蜂，碼云的訪問速度顯然會(huì)更快一些。
如果你是第一次使用 GitHub 的話性誉，我這里已經(jīng)為你準(zhǔn)備好了教程：
在 GitHub 上新建一個(gè)倉庫，把你的文檔全部放到 docs 目錄下错览，我的已經(jīng)創(chuàng)建好了纫雁，就叫 TechSisterLearnJava。
接下來倾哺，登錄碼云轧邪，選擇從 GitHub 導(dǎo)入倉庫。
選擇對(duì)應(yīng)倉庫后點(diǎn)擊導(dǎo)入羞海。
導(dǎo)入成功后忌愚，點(diǎn)擊「查看倉庫」，就可以看到從 GitHub 導(dǎo)入到碼云的倉庫却邓。點(diǎn)擊「服務(wù)」硕糊，選擇「Gitee Pages」。
勾選強(qiáng)制啟用 HTTPS申尤，然后點(diǎn)擊「啟動(dòng)」按鈕癌幕。不一會(huì)兒，碼云 Pages 服務(wù)就開啟了昧穿。
點(diǎn)擊網(wǎng)站地址：
就可以看到 docsify 已經(jīng)成功部署到碼云上了勺远。
08、最后
強(qiáng)烈推薦一下《教妹學(xué) Java》專欄时鸵，目前已更新 15 節(jié)內(nèi)容（近 5 萬字）胶逢，后面每周至少會(huì)更新 2 節(jié)，預(yù)計(jì)更新 130 節(jié)饰潜，從 Java 的基礎(chǔ)知識(shí)到對(duì)象和類初坠，再到集合框架、網(wǎng)絡(luò)編程彭雾、并發(fā)編程和 Java 虛擬機(jī)碟刺，基本上全方位覆蓋。
專欄中涉及到的圖片都花了我很多精力和心思薯酝，力爭給你一種耳目一新的感覺半沽，隨便截幾張圖給你看看爽柒。
這么好的專欄上哪去找呢？免費(fèi)給你（反正我也不知道自己是怎么想的）者填！
GitHub 閱讀地址（star 它）：
碼云閱讀地址（star 它）：
docsify 在線閱讀地址：
我知道浩村，我知道，不用你開口占哟，離線版的 PDF 我也準(zhǔn)備好了心墅，看這暗黑風(fēng)格的 PDF，閱讀起來絕壁賞心悅目啊榨乎。
百度網(wǎng)盤下載（暗黑和亮白怎燥，兩種）地址：
PS：整完這個(gè) docsify 后，我累壞了谬哀，一瞅時(shí)間刺覆，凌晨 1 點(diǎn) 32 分了，說實(shí)話史煎，眼睛已經(jīng)迷離了谦屑。
