Hugo if文とfor(renge)文の書き方まとめ #HTML

静的サイトジェネレータHugoのif文とfor文の書き方をまとめてみました。

if文

// トップページなら変数を表示
{{ $var := "Hugo Page" }}
{{ if .IsHome }}
    {{ $var = "Hugo Home" }}
{{ end }}

// パラメータにtitleがある場合はタイトルを表示
{{ if isset .Params "title" }}
  <h4>{{ index .Params "title" }}</h4>
{{ else }}
  <p>タイトルがない</p>
{{ end }}

else if

{{ if (isset .Params "description") }}
    {{ index .Params "description" }}
{{ else if (isset .Params "summary") }}
    {{ index .Params "summary" }}
{{ else }}
    {{ .Summary }}
{{ end }}

equal, not equal

eq: arg1 == arg2
ne: arg1 != arg2

// categoryがblogなら
{{ if eq .Params.category "blog" }}current{{ end }}

// categoryがblogでないなら
{{ if ne .Params.category "blog" }}current{{ end }}

greater, lower

ge: arg1 >= arg2
gt: arg1 > arg2
le: arg1 <= arg2
lt: arg1 < arg2

// 10が5以上なら
{{ if ge 10 5 }}true{{ end }}

// 10が5より大きいなら
{{ if gt 10 5 }}true{{ end }}

// 5が10以下なら
{{ if le 5 10 }}true{{ end }}

// 5が10より小さいなら
{{ if lt 5 10 }}true{{ end }}

and or

カッコで括って複数並べるだけ

// and
{{ if (and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")) }}

// or
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}

// パイプを使って複数重ねることも可能
{{ if isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" }}
Stuff Here
{{ end }}

for(renge)文

繰り返し構文はforではなく、rengeを使います。

データの取得は、一覧ページでは.Pages、他のページから一覧を呼び出す場合は.Site.Pages。

{{ range .Pages }}
  <li>
    <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
  </li>
{{ end }}

// listページ以外から呼び出す場合は、.Siteつける
{{ range .Site.Pages }}
  <li>
    <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
  </li>
{{ end }}

// ループ中にグローバルコンテキストにアクセスするために$を使う
<ul>
{{ range .Params.tags }}
  <li>
    <a href="/tags/{{ . | urlize }}">{{ . }}</a>
    - {{ $.Site.Title }}
  </li>
{{ end }}
</ul>

order

表示順序を指定

ByDate: 作成日
ByPublishDate: 公開日
ByLastmod: 更新日
ByLength: コンテンツのながさ
ByTitle: 見出し
ByParam: 特定のパラメータ

{{ range .Site.Pages.ByDate }}
  <li>
    <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
  </li>
{{ end }}

// ByParamの場合
{{ range (.Pages.ByParam "rating") }}
  <!-- ... -->
{{ end }}

reverse order

新しい方から順に表示

{{ range .Site.Pages.ByDate.Reverse }}
  <li>
    <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
    <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
  </li>
{{ end }}

limit

取得するデータ量を制限したい場合

first: 最初のx件
last: 最後のx件

// 最初の10件だけを取得
{{ range first 10 .Site.Pages.ByDate }}
  <li>
    <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
  </li>
{{ end }}

where

条件に指定したデータだけ取得する

// categoryがblogの記事だけを表示
{{ range where .Site.Pages.ByLastmod "Params.category" "blog" }}

{{ end }}

// limitと組み合わせ
{{ range first 10 ( where .Site.Pages.ByLastmod "Params.category" "blog") }}

{{ end }}

no data

記事（データ）がない場合の表示はelseを使う

{{ range $array }}
    {{ . }}
{{else}}
    <!-- This is only evaluated if $array is empty -->
{{ end }}