用 VuePress 製作說明文件頁面 — 4：佈景主題、外掛
前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.
本篇大綱
本篇要解決的問題
在上一篇〈用 VuePress 製作說明文件頁面 — 3：導覽列〉我們設定好了頂部導覽列、側邊導覽列，進行到第三篇，用 VuePress 架的說明文件頁面已經很完整，可以把連結丟給同事們接受他們崇拜的眼光了。
但，Augustus 當初就是製作了二篇說明頁後，傳給同事看，同事竟然回了一句：「點開後 認真覺得眼熟 原來跟vue官方 的模組一模一樣ＸＤ」……總之，如果要跟官方的看起來不太一樣，就必需要自行安裝好其它佈景主題，不然一眼看過去就會是 Vue 的說明文件複製貼上改個字，想嚇人就只能嚇些沒看過 Vue 文件的人。
安裝佈景主題
官方文件中有提供可安裝的主題列表：Awesome VuePress Themes。
這邊 Augustus 選擇一套深色主題：vuepress-theme-default-prefers-color-scheme 來安裝。
各個主題的頁面都有說明怎麼安裝，怎麼使用。
比方這套深色佈景，用終端機進到資料夾後，輸入：
yarn add -D vuepress-theme-default-prefers-color-scheme
然後在 config.js 這個配置檔中加入以下：
theme: 'vuepress-theme-default-prefers-color-scheme'
「vuepress-theme-」這個可以省略不寫，所以也可以寫成以下：
theme: 'default-prefers-color-scheme'
這樣就套好佈景主題了，是不是很簡單？
主題的說明文件裡也會有一些對 Options 的說明，也有一些佈景主題是需要改寫 config.js 裡面其他配置的，這部份就請看各自的主題說明文件。
安裝外掛（插件）
Plugins 在簡中的文字是翻作「插件」，但因為 WordPress 用習慣了，這邊寫作「外掛」會比較好理解。
VuePress 有不少外掛可用，文件上也有提供可安裝外掛清單：Awesome VuePress Plugins。
這邊來安裝頁面必備的 Google Analytics。
跟佈景主題一樣，外掛的說明文件上通常會寫怎麼安裝，google-analytics 這個外掛就有寫使用說明。
用終端機進到資料夾後，輸入：
yarn add -D @vuepress/plugin-google-analytics
然後一樣打開 config.js，加入以下：
plugins: [
[
'@vuepress/google-analytics',
{ 'ga': '這邊填 GA 追縱碼 ID，如 UA-00000000-0' }
]
]
也跟佈景主題的「vuepress-theme-」可以省略不寫一樣，外掛的「plugin-」也可以省略不寫。
這樣，就安裝完成了。
如果想再加別的外掛，像是我們再來安裝 back-to-top 這套，用終端機進到資料夾後，輸入：
yarn add -D @vuepress/plugin-back-to-top
config.js 的 plugins 再加一行 '@vuepress/back-to-top'，最後會像這樣：
plugins: [
[
'@vuepress/google-analytics',
{ 'ga': '這邊填 GA 追縱碼 ID，如 UA-00000000-0' }
],
'@vuepress/back-to-top'
]
這樣就安裝完成，頁面如果可以捲動，往下捲時就會看到右下角出現一個三角圖示，點擊了就會滑到頁面最頂部。
當然，這二個都是比較簡單的外掛，也有不少外掛是需要額外加工，像 pwa。
不用擔心，因為外掛的說明文件上大部份都會寫上加工方式。
原始碼、Demo
本篇開始，原始碼跟 Demo 都會放在 GitHub 上，歡迎取用。
Demo 會隨著系列文更新，所以看到的程式碼會逐漸豐富。
取用之前可以先對本篇拍個手或分享~
原始碼：https://github.com/letswritetw/letswrite-vuepress-document
Demo：https://letswritetw.github.io/letswrite-vuepress-document/
