介紹 Hugo Front Matter ，包括模板、分類、標籤，與我目前的用法及設置參數說明。

Front Matter

Front Matter 指的是: 每篇文章檔案內容中，放在檔案內容最前面那塊以 --- 分隔的區塊內容。

當你每次在產生新文章 (create new post.md) 時，Hugo 會從 ./archetypes 找尋對應的文章模板，複製模板新建文章；被建置的每篇文章的 Front Matter 中的這些參數 {Params} 讓我們可以很方便去客製化每篇文章要長成什麼樣子，或是做其他運用，例如文章網址設置，SEO 關鍵字設置等。

我的 Front Matter

此篇文章我使用的 Hugo Front Matter 設置如下:

title: "貼身打造個人部落格 - 02. 文章 Front Matter"
description: "介紹 Hugo Front Matter，包括模板、分類、標籤，與我目前的用法及設置參數說明"
slug: "hugo-front-matter"
author: littlebookboy
type: post
date: 2020-09-02T20:28:23+08:00
draft: false
categories: ["Tutorials"]
tags: ["Hugo"]
keywords: ["tutorials", "hugo", "mac", "文章", "post", "front matter", "config setting"]
coverImage: https://raw.githubusercontent.com/littlebookboy/hugo-blog-images/master/pexels-pixabay-207662.jpg
metaAlignment: center
coverMeta: out
coverSize: partial

在開始說明每項參數前，以下若有提到關於 config setting 的部分一併列在此處 (為了排版)

[permalinks]
  post = "/:year/:month/:slug/"
  page = "/:slug/"

[params]
  # 請注意，時間格式日期的 {數字} 不可變更，不然生成文章時，當前時間會秀逗
  # 請參考 https://www.jianshu.com/p/c7f7fbb16932
  dateFormat = "2006-01-02 15:04:05 UTC+8"

  • title 文章標題

    • 在 config 中設置 permalinks :title 或是 :slug 時，會決定你的網址長什麼樣子，我設置 type: post 頁面網址為 /:year/:month/:title/。
    • confit 設置 post = "/:year..." 此處的 post 需對應文章 front matter 的 type: post
    • 若 front matter 中沒有設置 slug 而 permalinks 指定用 :slug 時，預設會去抓 title (官方預設機制，非佈景實作)
    • 我的習慣是用 slug 決定網址，格式為英文烤肉串 foo-bar-baz 表示，而文章的 filename 與 title 取一樣 (檔案好找)，這樣不會影響網址，且 Google 建立索引貌似比較快 (體感速度)。

  • description 文章概要

    • 標示文章的概要，這個會被抓去做 seo 塞在 HTML 的 header 中
    • 文章被轉貼時，會顯示在下面的那一小段文字
    • 通常我會把這段文字寫在「閱讀更多」之前，方便看看每篇文章內容是什麼，概念上是盡量用兩行講完整篇文章的重點或方向

  • slug 文章網址

    • 若 config 設置中 permalinks 指定 :slug 時，網址才會跟著轉換
    • 建議「建站之初」就要先定調，否則推上線又要改會有點小麻煩，主要是 sitemap 都提交後，若你有變更網址，要到 google search console 去重新提交索引，不然不知道要等多久以後才會在抓到你文章位址。

  • author 文章作者

    • 標示文章的作者，這個會被抓去做 seo 塞在 HTML 的 header 中

  • type 文章類別

    • 我目前有 post、page，以及 draft 三種類別

  • date 文章創建日期

    • 目前是寫在模板中設置變數 {{ .Date }}，於每次生成文章時，會自動帶入當前時間

  • draft 草稿狀態

    • 設為 true 時為草稿，發布或本地預覽時，需要添加 -D 參數才能看到這類文章
    • 設為 false 為正式文章，當 date 超過現在時間，發布或本地預覽就算不帶其他參數，都會看到這類文章
    • 請參考 Post Status 文章狀態

  • categories 文章分類

  • tags 文章標籤

  • keywords 關鍵字

    • 標示文章的關鍵字，這個會被抓去做 seo 塞在 HTML 的 header 中

  • 其他參數

    • coverImage 佈景設置文章 cover image 的地方
    • metaAlignment 佈景設置文章 title 的位置
    • coverMeta 佈景設置文章 title 要放在 cover image 中央，還是外面
    • coverSize 佈景設置文章 cover image 要大張還是小張
    • 請參考 Tranquilpeak - Front-matter settings

Post Archetypes 文章模板

我根據 post status 準備了各自的模板，模板文件會放在 /archetypes 中，以下是草稿模板範例:

---
title: "{{ replace .Name "-" " " | title }}"
author: littlebookboy
type: post
date: {{ .Date }}
draft: true
categories: ["dev"]
tags: ["general"]
keywords: ["post"]
---

<!--more-->

當你新增文章 hugo new draft/my-first-post.md 後，可透過 hugo server -D，查看首頁:

首頁 首頁

這是點了繼續閱讀 (More) 查看內文的樣子:

內文 內文

Post Status 文章狀態

以下列出 官方定義 文章的幾種滿足條件後可能的狀態，我目前只有用到 草稿 的部分:

  • 發布或未發布: Content with a future publishdate value
  • 草稿或已完成: Content with draft: true or false status
  • 有效或已過期: Content with a past expirydate value

而我自己在寫文時，我把文章區分為 page、post，以及 draft:

  • draft 草稿文章 - 尚未完成的文章，本地編譯時需帶參數 -D 才可以看到此類型文章
  • post 已完成文章 - 將草稿改為已完成 (設置 Front Matter draft 狀態 true -> false)
  • page 單頁面 - 例如關於我 (about-me)，履歷 (CV)，登陸頁 (Landing Page) 等等，這類頁面通常不掛分類 (category) 與標籤 (tag)

Post Categories and Tags 文章分類與標籤

在 Front Matter 區域中，有文章分類與文章標籤可設置，例如:

categories: ["Tech", "Daily"]
tags: ["Hugo", "GitHub"]

或是

categories: 
  - Tech
  - Daily 
tags: 
  - Hugo
  - GitHub

透過設置分類與標籤，在查找某篇文章時，除了透過名稱之外，還可以用較為模糊的方式查找文章。那這些分類、標籤，甚至系列該如何運用呢？舉個例子:

  • category: 最模糊、抽象的大方向，例如生活、工作、心得、迷因、行銷、技術、遊戲、開箱
  • tags: 具體名詞(你最常用的檢索字)，例如 3C、課後心得、台北景點{專有名稱}、西斯
  • series: 可被歸類成一個系列的文章，例如「美食分享」、「攝影技巧」、「運動健身」

在我看到官網「舉例」可以把 categories 移除時，我的看法是因為這東西「與 tags 太像」，但要怎麼分類使用，要以你的習慣為主，我的習慣是:

  • category:
    • Talking - 聊天，記錄比較偏「個人」的東西，例如成長、生活變化、紀錄雜事等
    • Tech - 科技、技術，也是聊天，但內容都是技術的東西，有時會把求解過程歸為此類
    • Experience - 此分類我偏向為「讀書」心得
    • Tutorials - 教學，把我會的東西整理成 step by step 的文章，若偏 Tech 技術相關，就看內容比例去定義用哪一個，如果分類不出來，可能要思考拆文，或改成加上標籤，我只有 tags 會一文多標。
  • tags:
    • Hugo
    • Laravel
    • MySQL
    • PHP
    • LineBot
  • series:
    • 貼身打造個人部落格
    • Laravel 源碼追追追(之類的)

在

<a href="https://gohugo.io/content-management/taxonomies/#default-taxonomies" target="_blank">Hugo Taxonomy</a>

有提到，你不需要額外設定你的 config，在 Hugo 目前版本中，已經預設替你啟用了 category 與 tags (不然其實是要自己啟用的)，你也可以透過 disableKinds 來停用 Taxonomy，或是透過

<a href="https://gohugo.io/content-management/taxonomies/#example-removing-default-taxonomies" target="_blank">覆蓋設定</a>

的方式來自訂分類，或是

<a href="https://gohugo.io/content-management/taxonomies/#example-adding-a-custom-taxonomy-named-series" target="_blank">新建</a>

一個你想要的分類。

最後，如果你需要再更近一步分出:「category 類別 > sub-category 子類別」，你可以透過設置 hierarchicalCategories 為 true (佈景提供)，佈景會自動幫你分出子類別。

References 參考連結

我盡量把我準備過程中，造訪過的連結都放在這，建議若你現在不需要，不一定要全都看懂才開始。

Modification 修訂內容

Series 系列文章


文章作者: littlebookboy
永久鏈結: https://blog.genesu.me/2020/09/hugo-front-matter/
許可協議: 署名-非商業性使用-相同方式共享 4.0 國際(CC BY-NC-SA 4.0)