先來看一下我在碼雲上創建的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')
                        }
                    })
                }
            })
        }
      ]

 

转载于:https://www.cnblogs.com/lin277541/p/10872199.html

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐