用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

/

本篇要解決的問題

在上一篇〈用 VuePress 製作說明文件頁面 – 3:導覽列〉我們設定好了頂部導覽列、側邊導覽列,進行到第三篇,用 VuePress 架的說明文件頁面已經很完整,可以把連結丟給同事們接受他們崇拜的眼光了。

但,Augustus 當初就是製作了二篇說明頁後,傳給同事看,同事竟然回了一句:「點開後 認真覺得眼熟 原來跟vue官方 的模組一模一樣XD」……總之,如果要跟官方的看起來不太一樣,就必需要自行安裝好其它佈景主題,不然一眼看過去就會是 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/


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

  1. 安裝
  2. config.js 基本設定
  3. 導覽列
  4. 佈景主題、外掛
  5. 改樣式、加元件
  6. 部署
Summary
用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛
Article Name
用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛
Description
本篇大綱:本篇要解決的問題。安裝佈景主題。安裝外掛(插件)。原始碼、Demo。如果要跟官方的看起來不太一樣,就必需要自行安裝好其它佈景主題,不然一眼看過去就會是 Vue 的說明文件複製貼上改個字,想嚇人就只能嚇些沒看過 Vue 文件的。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

File API 客製上傳檔案按鈕 / input file

Front-End

用 CSS :target 製作頁籤、手風琴功能

Front-End

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

Analytics Google

用 GA Spreadsheet Add-on 製作網站訪客人數功能

WordPress

用 Auth0 在 WordPress 上做會員註冊、登入功能

Front-End

mailto: 點擊連結 開啟寄送 email

Google Others

用 Google Cloud Platform / GCP 建 Node.js 網站

Front-End Vue

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

WordPress

WordPress 基本介紹

API

GitHub API:建立 Issue、Comment – API、Personal access tokens

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

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.