前言

今天會挑幾個 Hugo Template 來介紹。

Overview

Hugo 提供了各種不同的 Template，在 render 時，會把 Content 放到其對應網站樣板上，以構建整個網站，形成符合樣板佈局的頁面，概念上，有點像是很多不同的益智七巧板的底框，我們的內容就像按照這些底框去描繪的七巧板拼圖，當我們創建七巧板 (文章內容)，Hugo 編譯渲染時，會找到其對應的底框 (Template)，把內容都按照這些樣板的框框拼進去，呈現出來 (網頁頁面)。

之前寫過的 Content Section、Taxonomy、Shortcodes 等文章，在 Hugo 中都稱之為樣板 (Template)，以下會列出幾個筆者認為會用到的其他樣板。

HomePage Template

首頁模板，整個網站唯一頁面唯一的模板 (唯一的唯一~)，網站首頁的內容格式，與其他 Page Template 相似，但不同。若是我們需要客製化首頁，就需要自己去構建這個頁面要長怎樣，筆者覺得可以從選定佈景之後，用覆寫的方式，去微調首頁，會比從空白開始構建，要快一點上手。

這邊有官方範例，有興趣可以看一下，主要是使用 content/_index.md 塞一些要給首頁用的變數，以及 Partial Templates (類似大頁面佈局，切成數個小元件，有側邊欄、導航列、標題、文章列表等等) 組合起來。

另外，Hugo 在找尋「首頁」，也是有優先順序的，可參考這邊，若依照順序的「對應檔案存在」，則會作為首頁呈現 (其他頁面也是有順序)。

Partial Template

如上一 part 所說，Partial Template 作為「局部頁面」，可以拿來構建頁面中個各種區塊、元件，例如側邊欄清單；比較不同的是，他的搜尋清單只有：

• layouts/partials/*.html
• themes//layouts/partials/*.html

先找專案底下有無 layouts/partials，找尋看有無在一般樣板調用的局部頁面，若沒有，就會使用佈景底下的局部頁面，也就是說：

佈景提供的局部頁面 (layouts/partials/*.html)，你想做點客製化，可以透過在專案底下建置同樣路徑、同名檔案，去覆寫 (Override) 之。

Data Template

我們知道，靜態網站與動態網站，其中一點不同的是，動態網站的頁面資料，有時需要與後端伺服器 (Server) 請求交互來取得，最後輸出到視圖呈現，而靜態網站，則是當網頁被瀏覽器讀取時，本身就已包含所有資料直接呈現，換句話說：

• 動態：「瀏覽器讀網頁 -> 網頁程式跟後端要資料(有時) -> 前端呈現網頁資料」
• 靜態：「瀏覽器讀網頁 -> 前端呈現網頁所有資料」

而 Data Template 就是為了支援「後端資料」這種概念所存在的樣板，我們可以建置任何「已知資料」作為 Data Template，在透過例如 Single Template 載入這些資料，建立一個獨立的頁面，舉例來說：

網站有一個頁面，想列出「作者心目中所有縣市的前三名咖啡廳」，其 Data Template 可能會長這樣 (名字只是虛構的，撞名純屬巧合)：

# top3coffee.json
{
    "Taipei": {
        "top_1": "老王Ａ嘎逼廳",
        "top_2": "啡熊喝林",
        "top_3": "Little Coffee"
    },
    "Taichung": {
        "top_1": "懂喝，那個苦味",
        "top_2": "HotHotHot",
        "top_3": "咖啡就給令狐沖"
    },
    ...
}

在一般的 Page 或 Shortcode 樣板中可以透過以下語法讀出資料：

{{ range $.Site.Data.top3coffee }}
   {{ . }}
{{ end }}

支援的內容格式有 yml、toml、json，或是透過輸入 File 如 CSV 都可以被讀取使用。

來試試：

---
title: "全台縣市咖啡廳 Top 3"
date: 2020-10-09T09:59:51+08:00
draft: false
slug: "coffee"
---

# DataTemplateTest

{{< coffee-top-3 >}}

Shortcode coffee-top-3.html：

{{ range $.Site.Data.coffee }}
  {{ partial "artist.html" . }}<br>
{{ end }}

Partials Template artist.html：

<h2>{{ .title }}</h2>
<ul>
  {{ range .coffee }}
    <li>{{ . }}</li>
  {{ end }}
</ul>

Data Template：

• taipei.toml

title = "台北"
coffee = [
  "Top1 - 老王Ａ嘎逼廳",
  "Top2 - 啡熊喝林",
  "Top3 - Little Coffee"
]

• taichung.toml

title = "台中"
coffee = [
  "Top1 - 懂喝，那個苦味",
  "Top2 - HotHotHot",
  "Top3 - 咖啡就給令狐沖"
]

追加新的連結清單，放在側邊欄，以下是成效 (顯示順序跟 Data Template 檔名有關)：

之後若要新增其他縣市，或餐廳，就可透過新增新的 Data Template 擴增內容。

Custom 404 Page

404 頁面樣板，可讓我們自訂錯誤畫面，作用在各種不同的 Web Server 上，當瀏覽頁面者輸入不存在的網址，找不到頁面時，會自動轉向此頁。

自訂的方式也很簡單，請先參照佈景是否已有在 ./theme/layouts 底下設有 404.html，有的話，就複製一份出來，放到專案底下的 ./layouts/404.html，並改寫其內容，以下以 Tranquilpeak 佈景的 404 頁面為例：

{{ partial "head.html" . }}
<main class="posts">
  <article class="post">
    <h1>蹦 404 測試頁面</h1>
  </article>
</main>
{{ partial "foot.html" . }}

成效 (本地測試，請直接瀏覽 /404.html)：

小結

這篇主題會放到這～麼後面講 again，除了筆者我就看不懂覺得這 hugo templates 不好理解、是什麼概念、有什麼用途之外，加上官方列出滿滿一大頁關於 templates 的文件，光是思考要如何介紹，才能簡單明暸，對筆者而言有點硬，今天也僅是簡略地帶過一些樣板介紹，筆者認為目前對我自己而言，是足夠構建網站時使用了，其他沒提到的，或是對細節有興趣的人，可在到官方查閱；有問題可以在下方留言交流，謝謝。

參考連結

• Hugo Templates