Front Matter ： Markdown 的細節設定

我平常在寫 Markdown 文件的時候，常常都是新增一個文件之後就開始進行寫作了，其實這樣在畫面的呈現上也沒有什麼問題，只不過如果是使用 .md 來作為網站內容的管理時，就會感覺似乎沒有辦法進行什麼針對文件的設定或調整。

其實這個問題只要透過設定 Front Matter 就可以解決囉。

Front Matter 是在 Markdown 文件的開頭的一個設定區塊，主要就是透過標籤變數的設定，讓 VuePress 在解析的時候，可以讀取個別文件的設定，Front Matter 主要是使用 YAML 語法來進行撰寫，Front Matter 的書寫區域會用兩個 --- 來包裹住，藉此與主要內容區域的 Markdown 進行區隔。

這邊用我其中一篇文章當作例子來給你看看：

---
date: '2020-09-15'
slug: jamstack
tags:
- 前端開發
- VuePress
- Vue
title: JAMstack 到底是什麼巫術？
description: 來聊聊什麼是 JAMstack
image: https://i.imgur.com/u7De015.png
featured: true
---

# JAMstack 到底是什麼巫術？
...
...

可以看出兩個 --- 中的內容並不是 Markdown 的語法格式對吧！

Front Matter 設定的效果

而這些設定又有什麼作用呢？其實 VuePress 在解析 .md 文件的時候，都會將每個 .md 文件的 Front Matter 都讀取記錄下來。

當設定了預設會讀取的變數時， VuePress 就會自動的依照該設定的類別產生效果，像是如果設定了 title: JAMstack 到底是什麼巫術？ 這個設定，因為 title 是預設會讀取的變數，而效果則是設定網頁的標題，所以設定了這個標籤的 .md 文件在編譯成網頁時，該網頁的標題就會是 JAMstack 到底是什麼巫術？ 囉！

下面我列出我覺得比較必要、常用到的預設變數吧。

預設會讀取的變數

siteConfig 為 config.js 匯出的設定物件

• title

  • 型別： string
  • 預設值： h1_title || siteConfig.title

  該頁面的網頁標題。

• description

  • 型別： string
  • 預設值： siteConfig.description

  關於該頁面的網站描述，這個設定的內容會以 <meta> 標籤的形式加入到首頁的 HTML 中，這個設定是 SEO 搜尋引擎優化的關鍵之一，當有人搜尋到你的網站時，在 Google 搜尋結果的頁面上看到的網站介紹就是這一段文字喔。

  這邊主要是設置個別頁面的網站描述，首頁與各非文件網頁的描述可以在 config.js 中撰寫。

• layout

  • 型別： string
  • 預設值： Layout

  如果你自行開發了主題，或是使用的主題有提供多種 Layout 版型的話，可以透過這個設定指定使用哪一個 Layout 版型，這個設定要取決於你所使用的主題，只有比較特殊的情況會用到。

• permalink

  • 型別： string
  • 預設值： siteConfig.permalink

  這個設定是在你想要為某一個特定的頁面設定連結時使用的，在 VuePress 的解析中，文件的網址會按照一套規則去設定，但如果你有個別文件希望改變一下規則的話怎麼辦呢？

  像是預設可能是 http://localhost:8080/2020/09/15/jamstack/ 的連結，如果這篇文章實在太精華了，想要讓連結短一些，就可以透過 permalink: /jam 來將該網頁的網址改變成 http://localhost:8080/jam/ 了唷。

自定義的變數

而除了預設會讀取的變數以外，還有所謂的「自定義變數」，這些變數的設定是否會產生效果，就要看專案中使用的套件、主題是否有應用到該變數囉，像：

tags:
- 前端開發
- VuePress
- Vue

這段設定， tags 其實不是內建的設定，而是我設定用來在 @vuepress/plugin-blog 這個官方的擴充套件中讀取使用的變數。

而不管是預設讀取的，或者是自定義的，其實都會注入在全域可讀取的屬性當中，可以在主題、擴充套件中透過 $site.pages.frontmatter 進行讀取使用，所以在開發屬於自己的主題或套件時，是可以多加利用這項功能的。