用 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

IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動

Firebase Google

Firebase Dynamic Links API 做一個自己的縮網址生成器

Vue

Vue.js 3 Composition API 基本學習筆記-2:fetch data、export / import

WordPress

Ubuntu 安裝 WordPress – 1:VirtualBox、Ubuntu 20.04

Vue

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

Analytics Google

Google Analytics 事件追蹤設定

Front-End

OSM + Leaflet 學習筆記1:建地圖、marker、事件、換圖層

Bot LINE

LIFF v2 基本使用筆記及範例

Analytics Google

GA 報表:電子商務 內部宣傳 報表

Bot Telegram

Telegram Bot 學習筆記 – 4:命令列 commands

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

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

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

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

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

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

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

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

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

Let's Write

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