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 }}
このテンプレートは、指定されたタクソノミー(カテゴリーやタグなど)に基づいて、現在のページに割り当てられた用語のリストをレンダリングするためのパーシャルテンプレートです。
コードの説明
コメント部分
{{- /*
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: 現在のページオブジェクトtaxonomy: 使用するタクソノミー(例: “tags”, “categories” など)- 使用例:
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
変数の設定
{{- $page := .page }}
{{- $taxonomy := .taxonomy }}
パラメータとして渡された値を変数に代入しています:
$page: 現在のページオブジェクト$taxonomy: 表示したいタクソノミー(“tags”, “categories” など)
タクソノミー用語の表示
{{- 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 }}
with $page.GetTerms $taxonomy: 現在のページに対して指定されたタクソノミー(例: “tags”)の用語一覧を取得$label := (index . 0).Parent.LinkTitle: 最初の用語の親(タクソノミー自体)からリンクタイトルを取得(例: “Tags”)- HTMLの構造を作成:
- タクソノミー名(例: “Tags:")を表示
- 用語のリストをループで処理
- 各用語について、そのリンク先と名前を使ってリンクを作成
使用例
例えば、記事ページで以下のように使用すると:
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ partial "terms.html" (dict "taxonomy" "categories" "page" .) }}
以下のようなHTMLが生成されます:
<div>
<div>Tags:</div>
<ul>
<li><a href="/tags/hugo/">Hugo</a></li>
<li><a href="/tags/development/">Development</a></li>
</ul>
</div>
<div>
<div>Categories:</div>
<ul>
<li><a href="/categories/tech/">Tech</a></li>
</ul>
</div>
これにより、ページに関連付けられたタグやカテゴリーなどが整形されて表示されます。