VuePress的配置文件放在.vuepress
目錄,名稱為config.js
。
在配置文件中可以設定如導覽列(NavBar),側邊欄(SideBar),主題(Theme)配置等。
延續前一篇「建立 VuePress 網站」,下面示範如合在VuePress網站增加預設主題的導覽列。
在/docs
目錄下新增/.vuepress
目錄,並在/.vuepress
目錄新增config.js
,所以就是/docs/.vuepress/config.js
。
在config.js
設定導覽列的配置themeConfig.nav
如下。
Config.js
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' }, // 到README.md
{ text: 'Guide', link: '/guide/' }, // 到/docs/guide.md
{ text: 'VuePress', link: 'https://vuepress.vuejs.org/' } // 外部連結
]
}
}
在/docs
目錄guide.md
內容如下,此即為導覽列[Guide]所指向的位置。
# Guide
設定完後即可在頁面右上方看到導覽列標籤,點選標籤文字可導向link
指向的資源位置。
目錄結構如下。
demo
├─ docs
│ ├─ .vuepress
│ │ └─ config.js
│ ├─ guide.md
│ └─ README.md
├─ node_modules
├─ package.json
└─ yarn.lock
詳細參考github。
沒有留言:
張貼留言