layouts/_partials/terms.html

2026/02/02 10:08

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>

これにより、ページに関連付けられたタグやカテゴリーなどが整形されて表示されます。