天天看點

入坑 docsify,一款神奇的文檔生成利器!(2)

04、定制化配置項

打開 index.html 檔案,在 script 标簽中對 window.$docsify 進行配置,如下所示:

window.$docsify = {
        name: '教妹學Java',
        repo: 'https://github.com/itwanger/TechSisterLearnJava',
}      

1)name:文檔标題,會顯示在側邊欄頂部。

2)repo:GitHub 上的倉庫位址,會在頁面右上角渲染一個 GitHub 角标。

儲存後,就可以在浏覽器上檢視到效果。

入坑 docsify,一款神奇的文檔生成利器!(2)

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>      
入坑 docsify,一款神奇的文檔生成利器!(2)

2)圖檔縮放

在 index.html 檔案中引入 zoom-image.min.js 即可,如下所示:

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>

儲存後,就可以在浏覽器上檢視到效果,滑鼠放到一張圖檔上時會出現縮小或者放大的圖示,點選後就可以改變圖檔的形态。

入坑 docsify,一款神奇的文檔生成利器!(2)

3)複制到剪貼闆

在所有的代碼塊上添加一個簡單的 Click to copy 按鈕來允許使用者從你的文檔中輕易地複制代碼。在 index.html 檔案中引入 docsify-copy-code 即可,如下所示:

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

入坑 docsify,一款神奇的文檔生成利器!(2)

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>      
入坑 docsify,一款神奇的文檔生成利器!(2)

繼續閱讀