iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 9

VuePress 1.x 版的架構核心:擴充套件

VuePress 1.x 版的架構核心:擴充套件

VuePress 目前的大版本號是 1.x ,而與 0.x 版相比,最重大的改變就是架構上使用 Pluggable ,採用以擴充套件為根基的設計。

其實 VuePress 本身也有許多的功能也都是包裝成擴充套件來完成的,其實就連前面提到過的專案設定檔 .vuepress/config.js 和主題本身也都被視為擴充套件的喔!


預設載入的擴充套件

就像前面說的,VuePress 本身有許多的功能也都是使用套件來完成的,這邊就列出我們在使用 VuePress 預設主題的時候,預設會載入的套件吧。

VuePress 內建的套件

  • @vuepress/plugin-last-updated
  • @vuepress/plugin-register-components

預設主題內建的套件

  • @vuepress/plugin-active-header-links
  • @vuepress/plugin-nprogress
  • @vuepress/plugin-search
  • vuepress-plugin-container
  • vuepress-plugin-smooth-scroll

這邊沒有要你去查每個一個套件的功能,只是想幫助你理解,擴充套件的使用是 VuePress 1.x 版的核心概念,不只是在最核心的架構本身使用套件,甚至官方的預設主題中也使用了非官方的套件: vuepress-plugin-container 以及 vuepress-plugin-smooth-scroll 唷!


使用擴充套件

那麼如果我們想在專案中實作某項功能,其實就可以先找看看該功能是否已經有套件可以使用了,畢竟在大多數的情況下,實在沒有必要自己造輪子。

這時候除了官方提供的套件以外,其實也可以到 Awesome VuePress 這邊來看看,而且在這邊不只有列出許多非官方的套件可以提供參考,也可以看到很多其他的資源喔。

而套件的安裝其實也跟主題很像,先找到你想要安裝的套件之後,透過 yarn add vuepress-plugin-xx 就可以安裝進專案中了,只是也別忘了跟主題一樣要到 .vuepress/config.js 進行相關設置喔!


套件的設定

// .vuepress/config.js
module.exports = {
  plugins: [ 'vuepress-plugin-xx', 'vuepress-plugin-xxx' ]
}

發現了嗎?就是這麼簡單,只要在設定檔中加入 plugins 的設置,透過陣列來填入你需要的套件名稱就可以將套件啟用了。

但如果你所使用的某些套件,需要進行額外的客製化設定,該怎麼處理呢?

其實只要把「陣列 Array」改寫成「物件 Object」的形式就可以囉:

module.exports = {
  plugins: {
    'vuepress-plugin-xx': false, // 禁用該套件
		'vuepress-plugin-xxx': {...}, // 套件的設定檔寫在物件中,內容請參考套件文件
		'vuepress-plugin-xxxxx': true, // 啟動該套件
  }
}

上一篇
VuePress 客製化的核心:佈景主題
下一篇
Front Matter : Markdown 的細節設定
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言