iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Modern Web

Hugo 貼身打造個人部落格系列 第 11

Day 11. Hugo Content - Archetypes

  • 分享至 

  • xImage
  •  

前言

Hugo 提供了 Archetypes 作為內容模板,在新增 Content Page 時,根據 Content Type 翻印對應模板,新生成的檔案就有模板的 Front Matter 預先配置、文章基本段落等等,在由寫作者調整部分參數,快速進入寫作的環節。

Archetypes 最開始的預設檔案

在你初始化專案後,你會看到專案資料結構中有個資料夾名為 archetypes,此處是用來放置各種 Content Page 模板的,一開始只會有 default.md,其他的模板看個人需求自行添加。

Archetypes 套用順序

下指令 hugo new posts/my-first-post.md 新增一份 Content Page 之後,翻印來源會依據指令、下列順序,找出有無符合模板,有的話則翻印一份產生新的文章:

  • archetypes/posts.md
  • archetypes/default.md
  • themes/my-theme/archetypes/posts.md
  • themes/my-theme/archetypes/default.md

這邊 hugo new 是根據 content-section 名稱來尋找最適合此次指令執行,最貼近文章路徑名稱的模板進行套用的,關於 content-section 這部分之後會在介紹;

順帶一提,筆者測試了(根據匹配邏輯)對不到任何模板,其實也不會怎樣,產生的檔案還是會有至少以下內容寫入檔案中:

---
title: "My First Post"
date: 2020-09-24T08:18:37+08:00
draft: true
---

新增 Archetype

假設我想新增一個模板名為 triathlon,我可以在 archetypes 下新增一個 markdown file 如下

.
├── archetypes
    └── triathlon.md

假設模板內容為

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

# Day nn. {title}

# 前言

write something cool...

# 主要內容

write something cool...

# 小結

write something cool...

# 參考連結

* []()

新增完成後,當你執行下列指令建立新的文章時:

hugo new triathlon/day-01-hello-hugo.md

./content/ 底下會新增 triathlon/ 這個 content-section,且同時會在底下新增一個 day-01-hello-hugo.md 的檔案,以下是文章內容:

---
title: "Day 01 Hello Hugo"
date: 2020-09-24T08:26:55+08:00
draft: true
---

# Day nn. {title}

# 前言

write something cool...

# 主要內容

write something cool...

# 小結

write something cool...

# 參考連結

* []()

目前使用的 Archetypes

筆者目前正在使用中的模板有以下五種,分別是:

  • default.md: 預設模板,沒動過
  • post.md: 文章模板,new 出來時為已發布狀態,draft 狀態為 false
  • draft.md: 草稿模板,new 出來時為未發布狀態,draft 狀態為 true
  • sandbox.md: 測試用模板,用來嘗試各種語法,摸索 hugo 如何使用
  • page.md: 單頁模板,與文章模板有些區別,例如此模板不預設文章分類

文章結構

文章模板的內容也體現出了作者在寫作時,對於每個種類的文章規劃的結構,筆者自己的文章基本上區分為:

  • Front Matter 區塊,在 .md 檔案內容最上面,有一塊用 --- 隔開的內容。
  • Body 區塊,也就是文章內容區塊,緊接在 Front Matter 之後,主要會使用檔 markdown 語法,以及 shortcode 的地方。
  • Footer: 此區域用以標示文章作者、永久鏈結,以及與文章許可協議。
---

+++ Front Matter +++
 
---

+++ Body +++


---
+++ Footer +++

小結

今天介紹了 Hugo Archetypes 文章模板、模板套用原理與優先順序,以及文章內容的結構,在此要再次說明,所謂「文章結構」是為了方便讓沒使用過的使用者,對規劃自建模板有個初步概念,才會用這個說法幫助大家理解,Hugo 官方則是沒有特別定義這種說法。

另外文中還有提到尚未講過的 Front Matter、Content Section、Shortcode 等,這些之後會在陸續介紹到。

題外話

筆者經常使用「文章」這名詞來描述「一支 post/hello.md」這種 Markdown 檔案,而官方稱之為「Content Page」,其實指的都是「文章」,而「Content」指的是「文章內容」,表示那些寫在檔案裡面的文字,在此特別說明,是因為筆者自己之前還沒有很明確認知到這件事。

參考連結


上一篇
Day 10. Hugo Content - 格式與編輯器
下一篇
Day 12. Hugo Content - Front Matter
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言