說明：本文只涉及操作，不講理論。
docsify的使用
安裝docsify-cli
執行命令列
npm i docsify-cli -g
複製程式碼初始化docsify
隨便選一個目錄，執行命令列
docsify init ./docs
複製程式碼此時，在該目錄下，會生成如圖檔案
index.html：首頁檔案，訪問入口README.md：會作為主頁內容渲染.nojekyll防止 GitHub Pages 忽略以下劃線開頭的檔案
啟動docsify
docsify serve docs
複製程式碼
本地訪問
新增封面和側邊欄
在docs目錄下，新建_coverpage.md檔案和_sidebar.md檔案
並且在index.html檔案中增加配置
新增搜尋功能
在index.html中引入js
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
複製程式碼並且增加docsify配置項
<script>
window.$docsify = {
name: 'Rameo', // 主頁名稱
repo: 'https://github.com/rameosu/rameo', // 你的github地址
auto2top: true,
coverpage: true, // 封面
loadSidebar: true, // 側邊欄
search: { // 搜尋
paths: 'auto',
placeholder: '? Type to search ',
noData: '? No Results! ',
depth: 6
},
plantuml: { // plantuml使用預設皮膚
skin: 'default',
},
}
</script>
複製程式碼支援流程圖
mermaid
<script src="//unpkg.com/mermaid/dist/mermaid.js"></script>
<script src="//unpkg.com/docsify-mermaid@latest/dist/docsify-mermaid.js"></script>
複製程式碼plantuml
<script src="//unpkg.com/docsify-plantuml/dist/docsify-plantuml.min.js"></script>
複製程式碼改造Github Pages
- 將你的docs目錄整體新增到你的github專案中
- 在GitHub Pages頁面，source選項下選擇
/docs目錄作為當前要構建的目錄
-
點選你的github pages 網址
- 首先可以看到封面
- 往下拉或者點選開始閱讀可以看到有搜尋框和側邊欄
- 在頁面右上角有一個貓咪的三角區域就是你配置的github地址
最後
如果想看效果可以訪問我的Github Pages
需要原始碼可以訪問我的Github