[Hugo] Hugoテンプレート文法のチートシート 自分用メモリア

アイキャッチ画像


記事内に商品のプロモーションを含む場合があります。

Nプログラマ(@Nprog128)です。

ここ1年くらいHugoを使い初めてようやく手に馴染んできたHugoテンプレートの文法。。。

なんちゃってレベルで使えるようになってきたのはいいのですが、なかなか文法が頭に入らなくなってきました。

なプ

Blade, Twig, Liquid, Smarty、、、頭ドカーン!

いい加減使う度に調べるのが億劫になってきたので、自分用の文法チートシートを作ってみました。

なプ

とりあえずif文だけを書いてみました。

追記という形で追加していこうと思います。

if文

条件分岐であるif文。

なプ

ifから始まりendで終わります。

こんな感じで使うことができます。

 1{{/* 例1. if単体で使う: 記事数が100の時に処理をする */}}
 2{{ $post_count := 100 }}
 3{{ if eq $post_count 100 }}
 4  {{/* 処理 */}}
 5{{ end }}
 6
 7{{/* 例2. ifとelse ifを使う: 記事数が80と90の時に何か処理をする */}}
 8{{ if eq $post_count 80 }}
 9  {{/* 処理 */}}
10{{ else if eq $post_count 90 }}
11  {{/* 処理 */}}
12{{ end }}
13
14{{/* 例2. ifとelse ifとelseを使う: 記事数が0と100とその他で何か処理をする */}}
15{{ if eq $post_count 0 }}
16  {{/* 処理 */}}
17{{ else if eq $post_count 100 }}
18  {{/* 処理 */}}
19{{ else }}
20  {{/* 処理 */}}
21{{ end }}

自分の場合は、eq, ne, gt, ge関数と組み合わせて 書くことが多いです。

両方の値が等しい時 (arg1 == arg2)

eq関数を使って、arg1とarg2が同値であるかを評価します。

なプ

eq: equal to …

1{{ $name := "hoge" }}
2{{ if eq $name "hoge" }}
3  名前は{{ $name }}です。
4{{ end }}

両方の値が等しくない時 (arg1 != arg2)

先程のeq関数とは逆のne関数を使います。

なプ

ne: not equal to …

ne関数は、arg1とarg2が等しくない時にtrueを返します。

自分はshortcodeの引数をデフォルトで空文字にしておいて、引数が渡された時に条件を分岐する、という使い方をしています。

なプ

変数をデフォルトの値で設定するには、default関数を使います。

1{{/* 引数を受け取る */}}
2{{ $text := default "" (.Get `text`) }}
3
4{{ if ne $text "" }}
5引数で渡されたテキストは{{ $text }}です。
6{{ end }}

not関数を使っても書けると思います。この辺はお好みで。。。

左の方が大きい値の時 (arg1 >= arg2, arg1 > arg2)

ge (arg1 >= arg2: 以上)

まずは、ひだり が みぎ以上の値の時にtrueを返すge関数から。。。

なプ

ge: greater than or equal to …

あまり使っている記憶がなかったのですが、このブログのショートコード内を探してみたら、記事数でメダルを切り替えているトコロで使っていました。

1{{ $post_count := 100 }}
2
3{{ if ge $post_count 100 }}
4  記事数は100以上です。
5{{ end }}

gt (arg1 > arg2: より大きい)

ひだり が みぎより大きい値の時にtrueを返すgt関数です。

なプ

gt: greater than …

これはメダルコレクションのページで使っていました。

ざっくりとしたコードですが、記事数がキリ番に到達していないメダルはグレー表示にする、という処理で使っています。

1{{ $post_count := 79 }}
2{{ if ge $post_count 100 }} {{/* 100以上なら100記事目のメダル固定 */}}
3  {{ $achievement = 100 }}
4{{ else }} {{/* 100より少ない場合は、ひと桁目を切り捨てた値を取得する */}}
5  {{ $achievement = div $post_count 10 | mul 10 }} {{/* 79を10で割り7を取得、7に10をかけて70にする(70記事目のメダル(70.png)を表示できる) */}}
6{{ end }}
7
8{{/* ...省略(記事数が未達成ならメダルをグレー表示) */}}
なプ

条件を反対にすれば、他の書き方でも可能です。

ひだりの値が小さい時(arg1 <= arg2, arg1 < arg2)

le (arg1 <= arg2: 以下)

ひだり が みぎ以下の値の時にtrueを返すle関数です。

なプ

le: less than or equal to…

残念ながら自分が使っているトコロがなかったですが、使い方は先程のgtやgeと同じです。

1{{ if le $post_count 100 }}
2記事数は100以下です。
3{{ end }}

lt (arg1 < arg2: より小さい)

ひだり が みぎよりも小さい値の時にtrueを返すlt関数です。

なプ

le: less than …

こちらも使っているトコロがないですが、こんな感じで使います。

1{{ if lt $post_count 100 }}
2記事数は100未満です(100は含まないよ)
3{{ end }}
どちらが大きい or 小さいのかすぐに忘れる

lt(less than)やgt(greater than)はどちらが大きいが迷いますが、ひだりを基準に大きいか小さいか?、と考えると覚えやすいと思います。

lt $v 100なら、$v(ひだり)は、100(みぎ)よりも少ない時にtrue

gt $v 100なら、$v(ひだり)は、100(みぎ)よりも大きい時にtrue

という感じです。

おわりに

今回は、Hugoの文法の自分用チートシート、という内容でした。

なプ

と言っても、まだif文の項目しか書けていないですが、、、(汗)

ショートコードを作る時は結構ガリガリと書いているのである程度覚えているのですが、完成して一区切りついてしまうとキレイさっぱり忘れてしまいます。

bladeとかtwigとかliqidとかsmartyとか、色々となんちゃってレベルで触っているのでもう頭がパンク状態です。。。(笑)

こういうのはもう覚えないで、必要に応じてチートシートを参照することに決めた次第でございます。。。!

自分用にチートシートを作っておくと、自分の書き方も残せるので作るのはオススメです。

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /


関連した記事