入坑 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 的官網：
https://docsify.js.org/
點進去後你會感覺非常的賞心悅目，滿滿的小清新。不得不承認，我的眼睛被它深深地吸引了。
02、入坑 docsify
第一步，開啟命令列，執行以下命令安裝 docsify-cli，方便本地初始化和實時預覽。
npmidocsify-cli-g
如果這一步非常非常慢的話，可以強制退出，因為 npm 是從國外伺服器下載的，受網路影響較大。
淘寶團隊幫我們解決了這個煩惱，搞了一個 npm 的國內映象。可以通過執行下面的命令把 npm 替換成 cnpm。
npminstall-gcnpm--registry=https://
如果出現 Error: EACCES: permission denied, access '/usr/local/lib/node_modules' 錯誤的話，是因為執行命令時沒有獲得管理員許可權，解決方案就在 npm 前面加上 sudo：
sudonpminstall-gcnpm--registry=https://registry.npm.taobao.org
輸入密碼後就可以執行成功了。然後執行 cnpm i docsify-cli -g 命令進行安裝。如果還提示許可權錯誤（Error: EACCES: permission denied）的話，記得加上 sudo。
PS：sudo 是一個 linux 系統管理指令，允許系統管理員讓普通使用者執行一些 root 級別的命令。
安裝成功後，會提示以下資訊。
第二步，執行以下命令建立文件目錄並初始化。
docsifyinit./docs
進入 docs 目錄後，可以看到 README.md（做為主頁內容渲染）和 index.html（入口檔案）兩個檔案。
第三步，回到 docs 的上級目錄，執行以下命令啟動本地服務。
docsifyservedocs
第四步，在瀏覽器位址列輸入 http://localhost:3000 進行預覽。
03、自定義導航欄
開啟 index.html 檔案，在 body 標籤中新增 nav 標籤，如下所示：
<body>
<nav>
<ahref="www.itwanger.com">沉默王二個人部落格</a>
</nav>
<divid="app"></div>
</body>
儲存後，就可以在瀏覽器上檢視到效果。
04、定製化配置項
開啟 index.html 檔案，在 script 標籤中對 window.$docsify 進行配置，如下所示：
window.$docsify={
name:'教妹學Java',
repo:'https://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>
<scriptsrc="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
儲存後，就可以在瀏覽器上檢視到效果。
2）圖片縮放
在 index.html 檔案中引入 zoom-image.min.js 即可，如下所示：
<scriptsrc="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
儲存後，就可以在瀏覽器上檢視到效果，滑鼠放到一張圖片上時會出現縮小或者放大的圖示，點選後就可以改變圖片的形態。
3）複製到剪貼簿
在所有的程式碼塊上新增一個簡單的 Click to copy 按鈕來允許使用者從你的文件中輕易地複製程式碼。在 index.html 檔案中引入 docsify-copy-code 即可，如下所示：
<scriptsrc="//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>
<scriptsrc="//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 檔案中新增額外的語法檔案，如下所示：
<scriptsrc="https://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 分了，說實話，眼睛已經迷離了。