簡介
在日常開發中 前後端對接時 經常要寫很多文件Api。docsify就是一個強大的文件生成工具 介面清新好 支援語法高亮和Markdown 語法,並且docsify 擴充套件了一些 Markdown 語法可以讓文件更易讀。像vue.js官網(cn.vuejs.org/)就是docsify 其中的一種注意 並且是目前用的的最多的主題
效果圖如下
預覽連結:a870439570.github.io/interview-d…
![在這裡插入圖片描述](https://i.iter01.com/images/5d2c7ce3d80f56a4b717a14a4c9af17899056a302247c4cfc48ddd71b9efe4a7.png)
![在這裡插入圖片描述](https://i.iter01.com/images/f12748b7ae2d0be9cf3a38abfd4fce5cb371d174f542e42e8b16be3270fe0258.png)
快速開始
首先先安裝好npm和nodejs,這裡就不做過多介紹了 自信安裝即可 (blog.csdn.net/zimushuang/…
安裝docsify 推薦安裝 docsify-cli 工具,可以方便建立及本地預覽文件網站。
npm i docsify-cli -g
複製程式碼
初始化專案
# 進入指定檔案目錄 如下:F:\ideWork\githubWork\test_docs
執行 docsify init ./docs
複製程式碼
![在這裡插入圖片描述](https://i.iter01.com/images/6a18af547083748443a25396a3731a58ef92ca17f6fefdcecf1aacf06d4969d2.png)
index.html 入口檔案
README.md 會做為主頁內容渲染
.nojekyll 用於阻止 GitHub Pages 會忽略掉下劃線開頭的檔案
複製程式碼
![在這裡插入圖片描述](https://i.iter01.com/images/ecc32d897274a7015fde4980ca57e8023fb932494b5797b738575eb8f69368db.png)
本地預覽網站
執行一個本地伺服器通過 docsify serve 可以方便的預覽效果,而且提供 LiveReload 功能,可以讓實時的預覽。預設訪問http://localhost:3000/#/。
docsify serve docs
複製程式碼
一個基本的文件網站就搭建好了,docsify還可以自定義導航欄,自定義側邊欄以及背景圖和一些開發外掛等等 更多配置請參考官方文件 docsify.js.org/#/zh-cn/qui…
下面介紹docsify如何部署到Github 使用免費的站點
和 GitBook 生成的文件一樣,我們可以直接把文件網站部署到 GitHub Pages 或者 VPS 上
GitHub Pages
GitHub Pages 支援從三個地方讀取檔案
- docs/ 目錄
- master 分支
- gh-pages 分支
上傳檔案至Github倉庫 官方推薦直接將文件放在 docs/ 目錄下,在設定頁面開啟 GitHub Pages 功能並選擇 master branch /docs folder 選項。
![在這裡插入圖片描述](https://i.iter01.com/images/ba66214497d9c4de9283b19c8b94a3fed98f4bb1121e923aea06f9d57c5f79af.png)
此時等待幾秒鐘 就可以訪問了 我這裡使用了自定義域名
Github如何配置自定義域名
在根目錄下建立CNAME檔案 並配置你的阿里雲或其它網站購買的域名
![在這裡插入圖片描述](https://i.iter01.com/images/0e8f3a0d4d51d1b7f20861de0bfab1d62b53ed85ebcc95df0bb7abba58018de5.png)
設定頁面 Custom domain 更改域名
![在這裡插入圖片描述](https://i.iter01.com/images/89ed27d0cbc817ca6997ee7f6ae22e62741543cf47b76d0fc2e55c4ae29871d3.png)
進入域名平臺 進行解析 新增繼續記錄 ;型別為CNAME
![在這裡插入圖片描述](https://i.iter01.com/images/373f075c787f9af815c8e361b6da8880394f83dc69bf31a43ca8dcff20735fba.png)
解析後 等待十分鐘既可開啟了