網頁

2020/7/8

VuePress 配置文件 config.js

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


沒有留言:

張貼留言