官方文檔
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.html
、README.md
、.nojekyll
)
預覽網站,訪問3000
端口:
docsify serve docs
也可以手動預覽網站(學滲透測試的同學可能對這一手很熟悉):
cd docs && python -m SimpleHTTPServer 3000
cd docs && python -m http.server 3000
效果如下:
進階使用
添加側邊欄
新建_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>
效果如下:
Pagination
文章底部展示上一篇和下一篇文章的鏈接,直接使用js即可,如果想自定義可以參考官網的配置方法
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
我這里偷懶了,直接引用的js,效果如下:
配合typora使用
寫md時肯定會遇到圖片文件放哪的問題,以下給出一種方案:
typora設置如下:
在md文件中寫好后,將整個images目錄和md文件放到docs
目錄。