用 VuePress 製作說明文件頁面 — 5：改樣式、加元件

本篇大綱

本篇要解決的問題

在上一篇〈用 VuePress 製作說明文件頁面 — 4：佈景主題、外掛〉我們改變了整個 VuePress 的佈景主題，也加了一些外掛，可以丟給同事看說「這我 10 分鐘內做出來的」嚇嚇他們。

不過，雖然背景主題好用，但有時我們不想要改整個主題，只是想要修一些頁面上的樣式，比方改個文字的顏色、加個按鈕……什麼的。

如果是加按鈕，那可以包成一個元件（Component），這樣當未來按鈕想要修改時，只需要改 Component 的檔案就可以統一改好整個站的按鈕，而不用一頁一頁打開的去改。

本篇主要會示範怎麼樣修改 VuePress 的 CSS，以及怎麼樣加上 components。

修改樣式 Styling

修改樣式的說明文件：英文 | 簡中。

VuePress 用的是 Stylus，雖然 Augustus 也沒用過，但似乎跟 Sass 沒差很多，因此用起來還算順手。

文件上說明，樣式的檔案 VuePress 會自動抓 2 個，分別是管理變數的 palette.styl，跟寫自訂樣式的 index.styl。

在 .vuepress 的資料夾底下先新增一個名為「styles」的資料夾，接著在 styles 裡面建 2 個檔案：palette.styl、index.styl。

palette.styl

.vuepress/styles/palette.styl 這個檔案主要是拿來修改變數的，預設可以改的變數有以下：

// colors  
$accentColor = #3eaf7c  
$textColor = #2c3e50  
$borderColor = #eaecef  
$codeBgColor = #282c34  
$arrowBgColor = #ccc  
$badgeTipColor = #42b983  
$badgeWarningColor = darken(#ffe564, 35%)  
$badgeErrorColor = #DA5961  

// layout  
$navbarHeight = 3.6rem  
$sidebarWidth = 20rem  
$contentWidth = 740px  
$homePageWidth = 960px  

// responsive breakpoints  
$MQNarrow = 959px  
$MQMobile = 719px  
$MQMobileNarrow = 419px

比如我們想要改變所有連結的顏色，預設是 $accentColor = #3eaf7c 這個，是 Vue 的綠色，我們想改成藍色的話就在 palette.styl 上寫：

$accentColor = #42A6F7

鏘鏘~我們的超連結顏色就換成藍色啦：

連結顏色改為藍色

在改變數這邊要注意一個點，就是如果我們有額外安裝佈景主題的話，注意看文件上有沒有設定其他變數？

比如我們前一篇安裝的深色佈景，裡面就寫說改變顏色的變數是 $accentDarkColor，如果只改了 $accentColor 會發現頁面沒反應。

index.styl

除了設定變數以外，想加其它的 CSS 就寫在 index.styl 裡。

比方我們想要設定 .btn 這個 class，那就在 .vuepress/styles/index.styl 這個檔案中加上：

.btn  
  display inline-block  
  padding: .5rem 1rem  
  line-height 1.5  
  background-color: $accentColor  
  border-radius: .25rem  
  color: #FFF  
  &:hover  
    background-color: #167FFF  
    text-decoration: none !important

之後就可以在各個頁面使用囉。

Markdown 的檔案可以寫 HTML，我們寫上：

<a class="btn" href="https://www.letswrite.tw/">Let's Write 官網</a>

開啟頁面後就看得到按鈕啦：

加入客製樣式的按鈕

使用元件 Using Components

在 VuePress 上 Component 的檔案內容跟我們在 Vue CLI 上很像，不一樣的是當我們建好一個 *.vue 的檔案後，不必另外寫 import 就可以在所有頁面上使用。

所有 components 的檔案被規定要放在 .vuepress/components/ 的資料夾中，以下就來建立一個按鈕的 component。

安裝預處理器

在開始寫 component 之前，因為 Augustus 習慣寫 Pug，因此要先來安裝讓 VuePress 可以讀取 Pug 的 loader。

文件：英文 | 簡中。

文件上有說明，VuePress 已經對 sass、scss、less、stylus、pug，這幾個寫好了在 webpack 上的配置，因此我們只需要安裝好就行。

stylus 不必安裝什麼就可以直接使用，下面的 component 上會直接用 stylus。

要能使用 Pug 的話，打開終端機進到資料夾後，輸入：

yarn add -D pug pug-plain-loader

安裝完畢就可以直接使用了。

建立按鈕元件

.vuepress 中新增名為「components」的資料夾，接著新增一個檔案，取名為「Btn.vue」。

檔名很重要，當我們取為 Btn 時，之後在各頁面要使用這個 component 就是寫：

<Btn/>

就會引用好這個 component。

我們在 Btn.vue 的檔案中寫入以下：

lang="pug" 是指 template 是用 pug 來寫，如果沒有事先安裝好上面那段的預處理器就會報錯，要使用 Pug 的話記得先安裝。

因為每個按鈕的文字、連結有所不同，因此用了 2 個 props：title、uri。

lang="stylus" 是指 style 會用 stylus 來寫，我們這邊就簡單寫個樣式上去。

要使用這個按鈕的 component，就在要放按鈕的 *.md 檔上寫像這樣：

<Btn uri="https://t.me/letswritetw" title="加入 Telegram" />

就會成功看到按鈕出現囉~

加入按鈕 component

像這樣把按鈕用成 component 的好處是，假如有一天我們要改按鈕，比方要把 target="_blank" 給刪掉，那我們只需要修改 .vuepress/components/Btn.vue 裡的程式碼就好，所有引用到按鈕的頁面就會同步一起更新，省去了我們一頁一頁打開頁面去檢查的時間。