iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 7

VuePress最基礎的客製化:config.js

VuePress最基礎的客製化:config.js

這一篇不會把所有 config.js 的設定參數都完整列出,我只列出我覺得比較必要的設置,如果想看完整的設定參數可以參閱 官方文件 喔!

附上經典名言


config.js 的固定格式

因為 VuePress 是在 Node.js 的環境中來進行各項編譯與處理的,而在 Node.js 中使用的模組系統叫做 CommonJS,我這邊不會詳細的說明原理細節,你只要知道我們的 config.js 是模組的一部分,需要遵守 CommonJS 的規則來將設定輸出。

而這個規則其實也相當簡單,我們需要將我們的設定寫在一個物件 Object 裡面,只要在檔案中使用 module.exports = {...} 這樣的格式就可以把我們的設定輸出囉,而 JavaScript 的物件格式是 key: value 的形式來書寫的,每一組 key: value 之間需要用 , 隔開。

直接展現一個範例應該更容易理解,一個 VuePress 網站最基本、最簡單的配置大概就是下面這個範例了:

module.exports = {
  title: '網站標題打在這邊',
  description: '網站介紹打在這裡'
}

value 值常常都是字串的形式,要在前後加上引號 ' 來括起來喔(單引號或雙引號都可以,但一定要確定是半形的,不能打成中文的引號)


常見參數說明

  • base

    • 型別: string
    • 預設值: /

    這個大概會是最多新手發生錯誤的原因,主要是隨著這個系列的主題進展,我們會將網站部署到 GitHub Pages 上面,而 GitHub Pages 提供給你的網址路徑通常會長這樣的: https://foo.github.io/bar/foo 會是你的帳號, bar 是你設定的專案名稱。

    像上面的網址來說,那麼 base 的值就應該設定成 "/bar/",它的值應當總是以 / 開始,並以 / 結束,這個屬性如果設定錯誤,會導致頁面一片空白喔。

  • title

    • 型別: string
    • 預設值: undefined

    網站的標題,它將會被設定在所有頁面的標題前面,例如我設定了 Sid吸管 作為 title 的話,瀏覽器顯示的標題就會是像這樣的格式: VuePress 介紹 | Sid吸管

    而且如果使用預設主題的話,網站標題也會顯示在導覽列 Navbar 上面喔,使用其他主題的話就要看主題如何設計的囉。

  • description

    • 型別: string
    • 預設值: undefined

    關於網站的描述,這個設定的內容會以 <meta> 標籤的形式加入到首頁的 HTML 中,這個設定是 SEO 搜尋引擎優化的關鍵之一,當有人搜尋到你的網站時,在 Google 搜尋結果的頁面上看到的網站介紹就是這一段文字喔。

    這邊主要是設置首頁的網站描述,各個內頁的網站描述可以在 .md 中撰寫。

  • head

    • 型別: Array
    • 預設值: []

    需要額外被加入到網站 HTML <head> 中的標籤,每個標籤都可以以 [tagName, { attrName: attrValue }] 的格式來設定,舉個例子來說,如果想設定一個自定義的 favicon 的話:

    module.exports = {
      head: [
        ['link', { rel: 'icon', href: '/logo.png' }]
      ]
    }
    
  • locales

    • 型別: { [path: string]: Object }
    • 預設值: undefined

    預設是當你要設置多國語系網站時才需要進行設定,你是不是想說那這個設定好像不是必要的?

    母湯喔!因為 VuePress 網站其實預設的語言是 en 英文,如果沒有進行這個設置,中文使用者每次打開網站可是都會被 Chrome 問要不要翻譯的...這個設置很簡單,就加上去吧:

    module.exports = {
      locales: {
        '/': {
          lang: 'zh-TW',
        }
      },
    }
    

懶人包:我的設定直接給你抄

基本上呢,我上面列出來的都是很基本一定要進行的設定,但我想如果你之前沒有接觸過的話,可能還是會有點霧煞煞,所以我就直接弄一份設定來給你抄吧!

直接複製去改就可以囉:

module.exports = {
	**base: '/sid/',**
  title: "網站標題",
  description: "吸管就是拿來Sid",
  head: [
    ['meta', { name: "viewport", content: "width=device-width,user-scaleble=0,initial-scale=1.0,maximum-scale=1.0" }],
  ],
  locales: {
    '/': {
      lang: 'zh-TW',
    }
  },
};

下一篇,就來討論一下真正的客製化:「主題」吧。


上一篇
從了解 VuePress 的專案結構開始吧
下一篇
VuePress 客製化的核心:佈景主題
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言