使用vuepress寫項目幫助文檔

時間 2019-11-17

標籤使用 vuepress 項目幫助文檔简体版

原文原文鏈接

vuepress 官網

vuepress 是使用vue驅動的靜態網站生成器，與Docsify 不同的是編譯它後是靜態網頁能夠直接拷貝到其它項目中使用。vue

目錄結構

docs：用於存儲markdown文件
docs.vuepress：用於存儲vuepress配置文件，樣式，以及公共文件
docs\demo：非固定名稱，存儲markdown的二級目錄，能夠有多個
docs\images：非固定名稱，存儲markdown中使用的圖片，不能放到二級目錄中不然編譯中會被忽略
docs[README.md](http://README.md) : 文檔首頁，加入部分特殊語法的markdown README特殊部分以下，其它的隨意。 **actionLink:**點擊按鈕後進入的頁面。

---
home: true
heroImage: 
actionText: 快速開始 →
actionLink: /demo/test1/
features:
- title:title1
  details: details1
- title: title2
  details: details2
- title: title3
  details: details3
footer: MIT Licensed | Copyright © 2019-d
---

配置說明

重要配置說明： *. dest ：輸出的目錄地址能夠使用相對路徑 *. base：部署站點的基礎路徑，若是你想讓你的網站部署到一個子路徑下，你將須要設置它。如 GitHub pages，若是你想將你的網站部署到 https://foo.github.io/bar/，那麼 base 應該被設置成 "/bar/"，它的值應當老是以斜槓開始，並以斜槓結束。 *. plugins：使用的插件，須要先安裝 *. themeConfig-sidebar：側邊欄目錄，使用/結束時默認找此目錄下的README.md 文件，不然使用名稱+.md爲結尾，編譯後會使用文件中一級目錄做爲側邊欄目錄名稱git

module.exports = {
 title: 'test title',
 description: 'test description',
 head: [
  ['link', { rel: 'icon', href: '/favicon.ico' }]
 ],
 dest: '../static/helpDoc', // 設置輸出目錄
 // 注入到當前頁面的 HTML <head> 中的標籤
 base: '/Demo/helpDoc/',
 markdown: {
  lineNumbers: true // 代碼塊顯示行號
 },
 plugins: [
    'flowchart'
 ],
 themeConfig: {
  lastUpdated: 'Last Updated', // 文檔更新時間
  // 側邊欄配置
  sidebar: [{
    "children": [
     "/demo/test1",
     "/demo/test2"
    ],
    "collapsable": true,
    "title": "demo"
   }
  ]
 }
}