之前就一直想搭建自己的要給類似部落格的網站，雖對開發難度對我來說沒啥問題，但是樣式這塊每次寫篇文章還的設計一番，那太浪費時間了，就想找可以快速生成的架構，其實我的需求比較簡單，樣式整潔，有檔案清單，可以查詢就可以了。
最終确定了基于當下vue和react兩個最火熱的架構，一個是VuePress，一個是dumi。
先介紹下這個兩個架構的特點。
- 使用markdown文法寫文章，快速生成靜态網頁
- 每篇文章在網頁左側羅列，可以快速定位
- 可以根據關鍵字查詢，然後快速定位
- 生成的靜态資源可以直接部署成網站
- 插件豐富
- 可以自定義，擴充性強
先看下例子：
上面是VuePress和dumi的官方文檔截圖，從效果來看大差不差。
VuePress快速配置
剛開始本着vue封裝比較全面，是以先看的這個架構，結果發現這個架構沒有腳手架，這就無語了，每個配置都的一個一個自己去配。
初始化
初始化比較簡單，就不多說，可以根據官網的步驟操作即可。
- 建立目錄
- 初始化 yarn init
- 将 VuePress 安裝為本地依賴
- 根目錄建立doc檔案夾
- 在 package.json 中添加一些 scripts
mkdir vuepress-starter && cd vuepress-starter
yarn init
yarn add -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md {
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
} yarn docs:dev 這就能跑起來了，但是功能比較簡單，想要複雜的功能，就的自己寫配置檔案
配置檔案
在docs檔案夾下建立.vuepress檔案夾，添加配置檔案config.js
顯示側邊欄
側邊欄是在主題配置中設定，可以針對每篇文章單獨設定，但是我是設定的預設自動生成。
themeConfig: {
sidebar: "auto",
}, 首頁不顯示側邊欄
預設docs檔案夾下的README.md檔案就是首頁。上面設定了側邊欄自動生成，首頁也會生成側邊欄，如果想讓首頁像官網一樣不顯示側邊欄，則可以在首頁檔案頭部增加如下标記
---
sidebar: false
--- 自定義導航欄
這個也是在主題中配置
themeConfig: {
sidebar: "auto",
nav: [
{ text: "Home", link: "/" },
{ text: "Guide", link: "/guide/" },
{ text: "Gitee", link: "https://google.com" },
],
}, 目錄下檔案自動生成清單
這大概都滿足我的要求了，剩下的就是讓某個目錄下檔案自動生成側邊欄的清單，就像官網每個導航進去的效果。
結果我在guide下面增加檔案，卻不顯示，隻顯示README.md，找了半天也沒解決。是以就放棄了，改投dumi了。
dumi配置簡單
dumi也是類似的架構，不過是基于react的，之前寫的部落格就是基于這個的，現在把快速使用流程分享下。
腳手架快速建立
$ mkdir myapp && cd myapp
# 通過官方工具建立項目，選擇你需要的模闆
$ npx create-dumi
# 選擇一個模闆
$ ? Pick template type › - Use arrow-keys. Return to submit.
$ ❯ Static Site # 用于建構網站 這樣網站就能跑起來了。
添加文章
生成的網站自帶的有docs檔案夾，項目結構不用再做過多修改，除非定制化比較高。
在docs檔案夾下可以建立檔案夾，也可以建立md檔案。從上圖可以看出，docs下有個自帶了一個index.md和guide.md，還有我自己建立的一個List檔案夾，這些檔案都會自動添加在導航中。
點選圖示就跳轉到首頁，Guide和aaa都自動添加到導航了。并且點選aaa，可以看到，檔案bbb也被列舉出來了。
修改檔案夾顯示名稱
從上圖可以看出，List檔案夾的導航名稱不是List，而是第一篇文章的标題，dumi的機制就是這樣：導航的名稱預設為該導航類目下第一篇文檔的分組标題或文檔标題。
可以通過在目錄任一檔案頭部指定導航名稱即可。
不用非的在第一個檔案中指定，任意一個檔案指定都行，不過還是推薦在第一個中。上面我就是在第二個檔案中指定，從效果看是生效的。
腳手架自帶根據關鍵字搜尋和換膚等實用功能，幾乎隻需修改下檔案夾名在導航中的顯示即可，非常nice。