04、定制化配置項
打開 index.html 檔案,在 script 标簽中對 window.$docsify 進行配置,如下所示:
window.$docsify = {
name: '教妹學Java',
repo: 'https://github.com/itwanger/TechSisterLearnJava',
}
1)name:文檔标題,會顯示在側邊欄頂部。
2)repo:GitHub 上的倉庫位址,會在頁面右上角渲染一個 GitHub 角标。
儲存後,就可以在浏覽器上檢視到效果。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CNxMWOkFWYiRTZlNzNzYWOhhTY0UGZmlTOldTMlN2M38CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
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>