第一步：起鍋燒油

    npm i docsify-cli -g

　　

　第二步：初始化

    docsify init ./docs

　　這一步我在vscode上死活成功不了，然后看了下網上說的，的在git那個窗口寫 ；然后，就可以運行一下看看效果了 ；

    docsify serve --port 4000 //指定端口
    docsify serve //默認3000端口

　　當然了 在vscode中還是不行 ，不知道哪里出問題了，但總不能每次啟動文檔都打開文件目錄用git的藍窗口吧，

　　還好找到方法了 ：在package.json中 scripts下加上啟動口令：

 ... 
 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "docs": "docsify serve docs"
  },
...

　　

現在就可以為所欲為了

第三步：側邊欄
創建_sidebar.md文件，在index.html中配置：

<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>

　　然后又可以為所欲為了，在_sidebar.md文件中寫文檔地址指向各個文檔，新建一個文件夾，寫各種文檔

//在_sidebar.md中

* [首頁](doc/home)
* [個人中心](doc/center)

//在home.md中

# home

## 第一步
第一步第一步
## 第二步
第二步第二步第二步
### 后續
發快遞公司發的是

//在center.md中
# center

## 第一步
第一步第一步
## 第二步
第二步第二步第二步
### 后續
發快遞公司發的是

　　

很簡潔美觀 還可以進行其它的配置和樣式修改
其它的配置粘在下邊：

    window.$docsify = {
      auto2top: true, //當路線改變時，滾動到屏幕的頂部。
      coverpage: false, //激活封面功能。如果為true，則會從中加載_coverpage.md。
      executeScript: true, //執行頁面上的腳本。只解析第一個腳本標記（演示）。如果存在Vue，則默認開啟。
      loadSidebar: true, //_sidebar.md如果為真，則從_sidebar.md文件加載邊欄，否則從指定的路徑加載。
      loadNavbar: true,//_navbar.md如果為真，則從_navbar.md文件加載navbar ，否則從指定的路徑加載。
      mergeNavbar: true,//Navbar將在小屏幕上與側邊欄合并。
      maxLevel: 3,//最大的內容表級別。
      subMaxLevel: 2,//在自定義邊欄中添加目錄（TOC）。
      name: 'docsify'
    }

　　

總結

以上是生活随笔為你收集整理的docsify的简单应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。