司馬宏達 ll 旅嚼放題

上一篇：VuePress+GitHub架網站(二)-VuePress基本架構設定，提到基本的主要檔案與架構，這篇要來說說VuePress側欄的選單要如何建立。

目前VuePress專案資料夾架構

依照前兩篇的教學，目前專案資料夾的架構大致上是這樣

主要資料夾
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

如果沒有錯，就可以開始建立側欄選單囉！

VuePress側欄選單建立

VuePress的側欄選單，建立選單時需要同時建立以下三個內容：

1. 選單架構

2. 選單分頁資料夾

3. 選單連結頁面

內容都是連貫的，只要少一個部分，選單就會出錯！

VuePress側欄選單設定架構

VuePress選單架構需要輸入在 config.js  檔案裡面

加入以下內容

    // 選單架構內容
    themeConfig: {
        sidebarDepth: 0,
        sidebar: [
          ['/', '首頁'],
          {
            title: '第一層',
            collapsable: false,
            children: [
              '/demo/demo001',
              '/demo/demo002',
            ]
          },
        ],
     },

語法說明：sidebarDepth：側欄標題深度、title：父層標題、collapsable：是否可折疊、children：子層頁面路徑。

children中的 demo 就可以視為是「第一層」這個選單之下的分頁資料夾。

檔案內容就會變成這樣

module.exports = {
    title: '司馬宏達的 VuePress 教學示範',
    description: '這是一個如何建立VuePRess的示範網站',
    // 選單架構內容
    themeConfig: {
        sidebarDepth: 0,
        sidebar: [
          ['/', '首頁'],
          {
            title: '第一層',
            collapsable: false,
            children: [
              '/demo/demo001',
              '/demo/demo002',
            ]
          },
        ],
     },
  }

執行 yarn docs:dev 會發現，上一篇的 README.md 檔案，在側欄可以直接點選首頁連結。

而下方選單只有第一層的文字出現，沒有其他子層內容，這是因為我們還沒有設定「選單分頁資料夾、連結頁面」。

VuePress分頁資料夾

選單的分頁資料夾要放在 docs  資料夾下方

主要資料夾
├─ docs
│  ├─ 分頁資料夾
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

我剛剛在children中設定路徑為demo，所以就建立一個 demo  資料夾，架構就會長得像這樣

主要資料夾
├─ docs
│  ├─ demo
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

小提醒：要設定其他側欄選單時，資料夾也是同樣方式建立在 docs  資料夾下方。

VuePress分頁設定

設定好路徑資料夾後，就要設定在 demo 資料夾底下的其他分頁

一樣依照剛剛在children中設定的內容建立檔案，分別是：  demo001.md 、 demo002.md  

主要資料夾
├─ docs
│  ├─ demo
│     ├─ demo001.md
│     └─ demo002.md
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

分別在兩個檔案內輸入測試內容

demo001.md

# 第二層-1

demo002.md

# 第二層-2

執行

yarn docs:dev

就會發現，在側欄出現剛剛設定的兩個分頁的連結囉！

接下來寫點內容吧～ VuePress+GitHub架網站(四)-用Markdown語法來撰寫網站內容