iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

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

VuePress 的全域計算屬性

VuePress 的全域計算屬性

在開發主題的時候,關於 config.jstheme/index.js 以及 .md 當中的 Front Matter 都是非重要的資訊,又或者安裝了某些增加強組件功能的 plugins 時,又該如何在 Vue 組件當中使用呢?

這時候就要讓 VuePress 的全域計算屬性出場啦!

全站屬性的使用非常非常簡單直觀,就是在進行 Vue 組件的開發時,全域所有組件都可以在不用進行任何引入、設定的情況下,直接使用 this.$site[this.$page](http://this.page)this.$frontmatterthis.$themeConfig 等方式直接讀全域計算屬性。

全域計算屬性不只這四個,但這些是我認為使用率最高的。

<script> 中需要使用 this. 作為指標,但在 <template> 中需要省略 this.


$site 全站屬性

這是在 VuePress 中重要性非常高的一個屬性,提供了非常非常多的資訊在其中,可以抓到整體網站的標題、描述、語言設定等等資料,最關鍵的是 $site.pages 這個屬性了。

$site.pages 這個屬性用 Array 的格式提供了全站的所有頁面資料,不但可以得到所有頁面的路由、標題,連內文都完整包含,就連想自己處理網站內文的搜尋都可以做到。

何況內容中也包含了該頁面的 frontmatter 資料,這在處理部落格文章列表的部分,是非常重要的資訊。


$page 目前頁面屬性與 $frontmatter 目前頁面的 Front Matter

$site.pages 不一樣的地方是, $page 不會提供所有頁面,僅僅是提供目前頁面的相關資料,主要就是可以取得目前頁面的相關資料。

但其實這個屬性在使用上,使用率最高的場景就是要抓取 Front Matter 設定,因此 VuePress 直接就多抽了一個 $frontmatter 來方便開法者使用。


$themeConfig 主題設定參數

這個設定應該也不難理解,就是將專案設定檔 config.js 中設置的 themeConfig 暴露出來,好讓我們能在組件中直接使用相關的設定囉。


上一篇
VuePress : theme/enhanceApp.js 主題增強術
下一篇
來用 Vue 玩弄 Markdown 囉
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言