[Hugo] Partial Template に複数の引数を渡す方法

更新: 2022-01-06 (木) 投稿: 2021-12-31 (金)

Partial Template を呼び出す際に、引数を渡して使用する例。

環境

  • Hugo 0.91.0

結果

1. 引数1個のケース

layouts/_default/single.html

{{ partial "page-categories.html" . }}

layouts/partials/page-categories.html

{{ with .GetTerms "categories" }}
{{ range . }}
  <a class="tag" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end }}
{{ end }}
  • partial template 側では . で引数にアクセスする。
  • この例では、.GetTerms でアクセスしている。

2. 引数2個のケース

layouts/_default/terms.html

{{ partial "icon.html" (dict "icon" .Type "class" "icon is-medium" "size" "is-3") }}

layouts/partials/icon.html

{{/* "icon" 引数は必ず指定される前提で処理する例 */}}
{{ $icon := .icon}}
{{ if eq $icon "tags"}}
  {{ $icon = "tag-multiple"}}
{{ else if eq $icon "categories" }}
  {{ $icon = "folder"}}
{{ else if eq $icon "archives" }}
  {{ $icon = "calendar"}}
{{ end }}

{{/* "size" 引数は省略可能で指定された場合のみ処理する */}}
{{ $size := "mdi-18px" }}
{{ with .size }}
  {{ if eq . "is-3" }}
    {{ $size = "mdi-24px" }}
  {{ else }}
    {{ $size = "" }}
  {{ end }}
{{ end }}
<span class="{{ with .class }}{{ . }}{{ else }}icon{{ end }}">
  <i class="mdi {{ $size }} mdi-{{ $icon }} has-text-grey-light"></i>
</span>
  • dict を使用して、KeyValue の形式で渡す。
  • partial template 側では .Key で引数にアクセスする。
  • {{ with .Key }} Keyが指定された場合の処理 {{ else }} Keyが指定されない場合の処理 {{ end }} のようにKeyの有無を処理できる。
  • この例では .icon, {{ with .size }}, {{ with .class }} でアクセスしている。

感謝

更新履歴

  • 2022/01/06
    • html 例のファイル名にフォルダパスを記載。
更新: 2022-01-06 (木) 投稿: 2021-12-31 (金)