Go Template 簡介 | 次世代 Hugo

Hugo 的 Template 使用 Go Template 語言，可將在 Markdown 的資料綁定到 HTML。

Version

Hugo 0.125.2

Content

content/_index.md

---
title: My Blog
description: Hello World
subtitle: Blog for Myself
---

_index.md : homepage 的 front matter 與 content 位於 content 目錄下的 _index.md
title：Hugo 預設的 page variable
description：Hugo 預設的 page variable
subtitle : 使用者自定義的 page variable

Hugo 規定 homepage 所搭配的 Markdown 檔名必須是 _index.md，不可以是 index.md

Layout

layouts/index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{ $title := "Hugo Lab" }}
    <title>{{ $title }}</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 class="title">{{ .Title }}</h1>
    <h2 class="description">{{ .Description }}</h2>
    <p class="subtitle">{{ .Params.Subtitle }}</p>
  </body>
</html>

index.html : 在 layout 根目錄下的 index.html 為 homepage 的 template
.Title：title 為預設 page variable，因此可在 Page Object 下直接存取
.Description：description 為預設 page variable，因此可在 Page Object 下直接存取
.Params.Subtitle：subtitle 為使用者自定義的 page variable，並不存在於 Page Object，必須使用 Params Object 存取

Template 預設的 context 為 Page Object，因此可直接使用 . 存取 Page Object

Page variable 必須使用 Camelcase 存取

Style

static/style.css

.title {
  color: #f00;
  font-size: 2rem;
  font-weight: 700;
}

.description {
  font-size: 1.1rem;
}

.subtitle {
  font-size: 1rem;
  color: #00f;
}

Conclusion

在 Template 讀取 Markdown 的 Front Matter 時，必須考慮其為 內建 或 自訂 的 Page Variable，其讀取方式不一樣