先來看一下我在碼雲上創建的demo:
http://lin1270.gitee.io/nicedoc/#/
GIT自己clone一下:
https://gitee.com/lin1270/nicedoc.git
PRE.------------------------------------
1.如果沒有安裝NODEJS,先安裝一下NODEJS。
2.安裝docsify: ---> 方便本地跑起來看效果,不然直接懟GIT上,可能格式不正確的啦。
npm i docsify-cli
3.創建git。 ----> 方便版本管理。有些文檔,有版本管理,更容易應對扯皮。
4.將GIT拉下來,如果你想用我一樣的結構,就複製一下我的文件夾唄。
5.本地預覽:
docsify serve
當然,也可以創建nodejs項目,在 package.json 中加入腳本: "dev": "docsify serve",
這樣就可以愉快地執行:npm run dev啦。
6.一切就緒就可以傳到GIT了。
7.那麼如何愉快地遠程查看呢?
這就需要配置GIT了。
那麼請參照官方文檔:
https://docsify.js.org/#/deploy?id=github-pages
(我使用碼雲,碼雲自動部署貌似要付費才得,所以我是需要手動更新,才生效的)
(所以建議使用github,github只要PUSH成功,再CTRL+R刷新即可看到更新後的效果了)
文檔結構主要分爲幾部分:
1. 搜尋框。
2.左側菜單。side.md
3.右上角的導航欄。nav.md
4.內容區。
入口:
index.html
看一下配置就知道文檔的組織結構了,不必贅述。
下面帖一下錦榮大佬幫寫的菜單點擊折疊展開的牛B插件代碼:
plugins: [ function(hook, vm) { hook.doneEach(function() { var sidebarLiEls = document.querySelectorAll('.sidebar-nav li') sidebarLiEls.forEach(function(el) { el.style.cursor = 'pointer' el.addEventListener('click', function(e) { e.stopPropagation() clearActiveClass() el.classList.add('active') var targetEl = e.target.children[0] || e.target.nextElementSibling if (!targetEl) return if (targetEl.nodeName.toLowerCase() !== 'ul') return if (targetEl.style.display === 'none') { targetEl.style.display = 'block' } else { targetEl.style.display = 'none' } }, false) }) function clearActiveClass() { sidebarLiEls.forEach(function(el) { if (el.classList.contains('active')) { el.classList.remove('active') } }) } }) } ]
所有评论(0)