layouts/_partials/terms.html
Hugoのlayouts/_partials/terms.html の解説
% cat themes/my-theme/layouts/_partials/terms.html
{{- /*
For a given taxonomy, renders a list of terms assigned to the page.
@context {page} page The current page.
@context {string} taxonomy The taxonomy.
@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
*/}}
{{- $page := .page }}
{{- $taxonomy := .taxonomy }}
{{- with $page.GetTerms $taxonomy }}
{{- $label := (index . 0).Parent.LinkTitle }}
<div>
<div>{{ $label }}:</div>
<ul>
{{- range . }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
</div>
{{- end }}
このテンプレートは、指定されたタクソノミー(カテゴリーやタグなど)に基づいて、現在のページに割り当てられた用語のリストをレンダリングするためのパーシャルテンプレートです。
layouts/_partials/menu.html
% cat themes/my-theme/layouts/_partials/menu.html 21:45:32 [9/198]
{{- /*
Renders a menu for the given menu ID.
@context {page} page The current page.
@context {string} menuID The menu ID.
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}
{{- $page := .page }}
{{- $menuID := .menuID }}
{{- with index site.Menus $menuID }}
<nav>
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
</nav>
{{- end }}
{{- define "_partials/inline/menu/walk.html" }}
{{- $page := .page }}
{{- range .menuEntries }}
{{- $attrs := dict "href" .URL }}
{{- if $page.IsMenuCurrent .Menu . }}
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
{{- else if $page.HasMenuCurrent .Menu .}}
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
{{- end }}
{{- $name := .Name }}
{{- with .Identifier }}
{{- with T . }}
{{- $name = . }}
{{- end }}
{{- end }}
<li>
<a
{{- range $k, $v := $attrs }}
{{- with $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end -}}
>{{ $name }}</a>
{{- with .Children }}
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }}
{{- end }}
このコードは、Hugoの部分テンプレート (partial) で、指定されたメニューIDに基づいてナビゲーションメニューをレンダリングするものです。以下に詳細な解説をします:
layouts/term.html
Hugoのlayouts/term.htmlコードの解説
$ cat themes/my-theme/layouts/term.html
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}
このコードはHugo(静的サイトジェネレーター)のテンプレートで、term.htmlというテンプレートファイルの内容です。これはタクソノミーのタームページ(カテゴリーやタグのページなど)を表示するためのものです。
{{ define "main" }}…{{ end }}: これは「main」という名前のブロックを定義しています。このブロックは通常、基本レイアウト(baseof.html)内の{{ block "main" . }}部分に挿入されます。<h1>{{ .Title }}</h1>: 現在のタームのタイトルを表示します。例えば、「Technology」カテゴリーや「golang」タグの名前などです。{{ .Content }}: タームに関連付けられたコンテンツを表示します。多くの場合、タームページに対応するMarkdownファイルがある場合、その内容がここに表示されます。{{ range .Pages }} ... {{ end }}: このタームに属するすべてのページをループ処理します。<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>:- 各ページへのリンクをh2見出しとして表示
.RelPermalink: そのページの相対URLを提供します.LinkTitle: そのページのリンク用タイトル(通常は.Titleと同じですが、front matterでlinkTitleが指定されていればそれが優先されます)
使用例
例えば、あなたのサイトに「Technology」というカテゴリーがあり、それに複数の記事が含まれている場合、このテンプレートは以下のようなHTMLを生成します:
layouts/taxonomy.html
HUGOのタクソノミーテンプレート解説
このコードは、Hugoのタクソノミー(カテゴリー、タグなど)一覧ページを表示するためのテンプレートです。
$ cat themes/my-theme/layouts/taxonomy.html
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}
{{ define "main" }}: 「main」という名前のブロックを定義します。これはベーステンプレートの対応する「main」ブロックに挿入されます。<h1>{{ .Title }}</h1>:- タクソノミー名(例: “Tags"や"Categories”、または特定のタグ/カテゴリー名)を見出しとして表示します。
{{ .Content }}:- そのタクソノミーに関連するコンテンツがあれば表示します(通常は空か、_index.mdファイルの内容)。
{{ range .Pages }}...{{ end }}:- このタクソノミーに属するすべてのページをループで処理します。
- タグページならそのタグが付いた記事、カテゴリーページならそのカテゴリーに属する記事の一覧です。
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>:- 各記事へのリンクをh2見出しとして表示します。
.RelPermalinkはページの相対URLを出力します。.LinkTitleはページのタイトルを表示します(frontmatterでlinkTitleが設定されていればそれを使用し、なければ通常のtitleを使用)。
このテンプレートは単純ですが、タクソノミーのリスト表示に必要な基本的な要素をカバーしています。
layouts/section.html
HUGO のlayouts/section.html テンプレートの解説
% cat themes/my-theme/layouts/section.html
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<section>
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ .Summary }}
</section>
{{ end }}
{{ end }}
このテンプレートは Hugo のセクションページ(カテゴリーページ)を表示するためのもので、themes/my-theme/layouts/section.html に配置されています。
主な要素
{{ define "main" }}…{{ end }}- このテンプレートが「main」という名前のブロックを定義していることを示します
- 通常、baseof.html などの基本テンプレートに
{{ block "main" . }}{{ end }}があり、そこに挿入されます
<h1>{{ .Title }}</h1>- セクションのタイトルを表示します
.Titleはセクションページのメタデータや front matter から取得されます
{{ .Content }}- セクションのコンテンツを表示します
- 通常、セクションフォルダ内の _index.md ファイルの内容がここに表示されます
{{ range .Pages }} ... {{ end }}- このセクションに属するすべてのページを順番に処理します
.Pagesはこのセクションに含まれるページの配列です
各ページごとの表示部分:
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>- ページへのリンクを作成します
.RelPermalinkはそのページの相対パーマリンク(URL).LinkTitleはリンク用のタイトル(front matter の linktitle があればそれを使用、なければ通常の title)
{{ .Summary }}- ページの要約を表示します
- コンテンツの最初の部分か、`