layouts/page.html

Hugoのlayouts/page.htmlの解説

$ cat themes/my-theme/layouts/page.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>

  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
  {{ $dateHuman := .Date | time.Format ":date_long" }}
  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>

  {{ .Content }}
  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}

この page.html ファイルは Hugo のテーマで使われるページレイアウトテンプレートです。ページコンテンツの表示方法を定義しています。

コード解説

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  • define "main" - このテンプレートの「main」ブロックを定義します。これは通常、ベーステンプレートの対応するブロックに挿入されます。
  • <h1>{{ .Title }}</h1> - ページのタイトルを h1 見出しとして表示します。
  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
  {{ $dateHuman := .Date | time.Format ":date_long" }}
  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
  • 日付を2つのフォーマットで処理しています：
    • $dateMachine - 機械可読な ISO 8601 形式の日付（HTML5の datetime 属性用）
    • $dateHuman - 人間が読みやすい長い日付形式（表示用）
  • <time> タグを使用して、日付を意味論的に正しく表示します。
  {{ .Content }}
  • ページのメインコンテンツを表示します。Markdown ファイルの本文が HTML に変換されてここに挿入されます。
  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}
  • partial - 別のテンプレートファイル（terms.html）を読み込みます。
  • dict - パラメータとして辞書（連想配列）を作成し、タクソノミーとして「tags」を指定し、現在のページオブジェクトも渡します。
  • このパーシャルは、おそらくページに関連付けられたタグを表示するために使用されます。

このテンプレートはシンプルですが、タイトル、日付（機械と人間の両方のフォーマット）、コンテンツ、およびタグを効果的に表示するページレイアウトを提供します。