如何用docsify改造你的Github Pages

說明：本文只涉及操作，不講理論。

docsify的使用

安裝docsify-cli

執行命令列

npm i docsify-cli -g
複製程式碼

初始化docsify

隨便選一個目錄，執行命令列

docsify init ./docs
複製程式碼

此時，在該目錄下，會生成如圖檔案

• index.html ：首頁檔案，訪問入口
• README.md ：會作為主頁內容渲染
• .nojekyll 防止 GitHub Pages 忽略以下劃線開頭的檔案

啟動docsify

docsify serve docs
複製程式碼

本地訪問

瀏覽器開啟http://localhost:3000

新增封面和側邊欄

在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

1. 將你的docs目錄整體新增到你的github專案中

2. 在GitHub Pages頁面，source選項下選擇/docs目錄作為當前要構建的目錄

3. 點選你的github pages 網址

   • 首先可以看到封面
   • 往下拉或者點選開始閱讀可以看到有搜尋框和側邊欄
   • 在頁面右上角有一個貓咪的三角區域就是你配置的github地址

最後

如果想看效果可以訪問我的Github Pages

需要原始碼可以訪問我的Github