前言

在架設部落格時，想要趕快搞定網站基礎設施與寫文環境，那你就必須先配置好你的 config、文章模板 archetypes，以及規劃模板中的 Front Matter 了。

只要依據個人需求把 Front Matter 設置好，就能在每次 new post 翻印出新的文章檔案時，改一改幾個特定參數，就能開始動手寫，縮短「建立新檔 -> 寫文章」這段時間，今天就帶大家認識一下什麼是 Hugo Front Matter。

Front Matter

在每個文章檔案.md 中，放在內容最前面那塊以 - - - 分隔的區塊內容，就是 Front Matter (- - - 只是其中一種格式)；Hugo 支援四種 Front Matter 格式：

• TOML

+++
categories = ["Hugo", "Test"]
date = "2020-09-25"
description = "spf13-vim is a cross platform distribution of vim plugins and resources for Vim."
slug = "test"
tags = [".vimrc", "plugins", "spf13-vim", "vim"]
title = "我是 toml 格式的 Front Matter"
+++

Boom!!

• YAML

---
categories:
- Hugo
- Test
date: "2020-09-25"
slug: "test"
title: "我是 yaml 格式的 Front Matter"
---

Boom!!

• JSON

{
   "categories": [
      "Hugo",
      "Test"
   ],
   "date": "2020-09-25",
   "slug": "test",
   "title": "我是 json 格式的 Front Matter"
}

Boom!!

• ORG

#+categories[]: Hugo Test
#+date: 2020-09-25
#+slug: test
#+title: 我是 ORG 格式的 Front Matter

Boom!!

四種格式輸出的文章「都一樣」，就看你比較習慣用哪種格式設置參數：

Front Matter Variables

在 Front Matter 中有許多可設置變數，以下介紹幾個筆者常用的參數：

定義文章標題、描述、作者

• title 文章標題
• description 文章概要
• author 文章作者

定義文章分類、標籤、關鍵字

• categories 文章分類
• tags 文章標籤
• keywords 關鍵字

定義文章類型、日期、狀態

• type 文章類型，通常為 top level 資料夾名稱
• date 文章創建日期，若未設置 publishDate 的情況下，文章會依此作為發布日期時間
• draft 草稿狀態
• publishDate 預定發布日期，若是未來時間，須下 hugo server -F 才看得到文章

Front Matter 自定義參數

我們使用佈景之所以可以透過 Front Matter 微調一些文章佈局設定，就是新增了各種「自訂參數」，讓 hugo 語法可以從你設置的參數去套用 layout 的變化，舉例來說 (以下為佈景提供的設置)：

• metaAlignment 設置文章 title 的對齊位置
• coverImage 設置文章 cover image 的地方
• coverMeta 設置文章 title 要放在 cover image 中央，還是外面
• coverSize 設置文章 cover image 要大張還是小張

筆者稍微追了一下佈景的原始碼，可以看到它背後是這樣取用參數，其中的 . 就是你設置的 value 參數值：

{{ with .Params.coverImage }}
  <meta property="og:image" content="{{ . | absURL }}">
  <meta property="twitter:image" content="{{ . | absURL }}">
{{ end }}

小結

今天主要先讓大家簡單認識一下 Front Matter，好好規劃模板內容，可以讓我們提高個人的作業效率，運用 Front Matter 的便利性，甚至可仿效佈景的做法，延伸出高客製化的各種 layout。

參考連結

• Hugo Front Matter
• hugo-tranquilpeak-theme front-matter-settings