VuePress 的全域計算屬性

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

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

全站屬性的使用非常非常簡單直觀，就是在進行 Vue 組件的開發時，全域所有組件都可以在不用進行任何引入、設定的情況下，直接使用 this.$site 、 [this.$page](http://this.page) 、 this.$frontmatter 、 this.$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 暴露出來，好讓我們能在組件中直接使用相關的設定囉。