更新: 2022-01-06 (木)
投稿: 2021-12-31 (金)
[Hugo] Partial Template に複数の引数を渡す方法
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 }}
でアクセスしている。
感謝
- Partial Templates | Hugo
- How to pass variables to a partial template? - support - HUGO
- template engine - Using Hugo, how can I access a variable from a partial file that is defined in base file? - Stack Overflow
更新履歴
- 2022/01/06
- html 例のファイル名にフォルダパスを記載。
関連記事
新着記事