docsify搭建與使用


官方文檔

https://docsify.js.org/#/quickstart

快速開始

首先需要安裝nodejs環境,可參考:https://www.cnblogs.com/sillage/p/14628671.html
全局安裝:

npm i docsify-cli -g

(注:如果提示找不到docsify命令,在nodejs的bin目錄找到docsify,將之變為全局命令,我的運行一下ln -s /root/node-v14.16.1-linux-x64/bin/docsify /usr/local/bin就好了)
初始化:

docsify init ./docs

(注:也可直接運行docsify init docs,會在當前目錄自動創建docs目錄並初始化,docs中會生成兩個文件index.htmlREADME.md.nojekyll
預覽網站,訪問3000端口:

docsify serve docs

也可以手動預覽網站(學滲透測試的同學可能對這一手很熟悉):

cd docs && python -m SimpleHTTPServer 3000
cd docs && python -m http.server 3000

效果如下:
image

進階使用

添加側邊欄

新建_sidebar文件,里面添加:

- [CentOS](centos.md)
- [Docker](docker.md)
- [Mac](mac.md)
- [NPM](npm.md)
- [推薦](recommend.md)

index.html添加:

<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

側邊欄二級目錄

index.html中添加:

<script>
  window.$docsify = {
    loadSidebar: true,
    subMaxLevel: 2
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

側邊欄會根據md文件中的標題自動生成二級目錄,如果需要展示3級或者4級目錄,修改subMaxLevel: 2中的數字到對應級別即可。

主題風格

官方提供了四款:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css" />

(注:個人覺得dark.css還不錯)
更多自定義請參考官網。

全局搜索

直接添加js,更多自定義請查看官方文檔,直接添加js是屬於開袋即食的做法:

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

Copy to Clipboard

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

效果如下:
image

Pagination

文章底部展示上一篇和下一篇文章的鏈接,直接使用js即可,如果想自定義可以參考官網的配置方法

<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>

我這里偷懶了,直接引用的js,效果如下:
image

配合typora使用

寫md時肯定會遇到圖片文件放哪的問題,以下給出一種方案:
typora設置如下:
image
在md文件中寫好后,將整個images目錄和md文件放到docs目錄。

參考&&致謝

部分參考:https://www.cnblogs.com/juemuren4449/p/12904699.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM