docsify的簡單應用



第一步:起鍋燒油
    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'
    }
 
        

  







免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM