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」を指定し、現在のページオブジェクトも渡します。- このパーシャルは、おそらくページに関連付けられたタグを表示するために使用されます。
このテンプレートはシンプルですが、タイトル、日付(機械と人間の両方のフォーマット)、コンテンツ、およびタグを効果的に表示するページレイアウトを提供します。