hugoで画像表示を自動化する
昨日紹介したvueを使った方法は、browserでjavascriptをdisableにしているuserには表示できないので、本来的にはhugoで解決したほうがいいかもしれません。
vueは基本的にjsで出力されるのに対して、hugoはhtmlで出力されるますので。
したがって、hugoでの解決法も書いておきます。
$ export IMG_YUI=`ls ./static/img/yui_*.png|wc -l|tr -d ' '`
$ hugo serve
{{ $yuin := getenv "IMG_YUI" }}
{{ $yuil := int $yuin }}
{{ $yuil := sub $yuil 1 }}
<p>
<img src="/img/yui_{{ $yuil }}.png"/>
</p>
<p>
{{ range $index, $val := seq $yuin }}
{{ if lt $index 10 }}
<img src="/img/yui_0{{ $index }}.png"/>
{{ else }}
<img src="/img/yui_{{ $index }}.png"/>
{{ end }}
{{ end }}
</p>
getenvで環境変数を取得後、最新の画像をトップに表示して、それ以降は順番通りに表示しています。
valは1から、indexは0からです。subする際にintで文字を数値に変換してます。
ただ、hugoでpreviewする際、環境変数を入れるのいつも忘れるので、この方法は使用しません。