用 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:titleuri

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

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

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

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

加入按鈕 component
加入按鈕 component

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


原始碼、Demo

本篇開始,原始碼跟 Demo 都會放在 GitHub 上,歡迎取用。

Demo 會隨著系列文更新,所以看到的程式碼會逐漸豐富。

取用之前可以先對本篇點個讚或分享~

原始碼:https://github.com/letswritetw/letswrite-vuepress-document

Demo:https://letswritetw.github.io/letswrite-vuepress-document/


用 VuePress 製作說明文件頁面系列

  1. 安裝
  2. config.js 基本設定
  3. 導覽列
  4. 佈景主題、外掛
  5. 改樣式、加元件
  6. 部署
Summary
用 VuePress 製作說明文件頁面 – 5:改樣式、加元件
Article Name
用 VuePress 製作說明文件頁面 – 5:改樣式、加元件
Description
本篇大綱:本篇要解決的問題。修改樣式 Styling、palette.styl、index.styl。使用元件 Using Components、安裝預處理器、建立按鈕元件。原始碼、Demo。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

API

接氣象局 API、跨網域 AJAX 資料

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Front-End

SpeechSynthesisUtterance 讓瀏覽器說話

Front-End Vue

用 Vue.js 製作圖片版 EDM 生成器

Vue

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

Google Sheets

如何用 Google Sheets / Excel 當作資料庫

WordPress

WordPress:Site Kit by Google 介紹及使用

Firebase Google

Firebase Authentication 第三方登入 – GitHub

Front-End

用純 CSS 寫的網頁預覽效果

Analytics Google

GA:User-ID 功能 設定及報表檢視

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言