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

12th鐵人賽

Sid 吸管

團隊對不起，你是個好人，但我們只是網友

2020-09-20 01:12:28

2730 瀏覽

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',
    }
  },
};

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