hugo/content/blog/2021-07-04-hugo.md

+++ date = "2021-07-04" tags = ["hugo"] title = "hugoで画像表示を自動化する" slug = "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する際、環境変数を入れるのいつも忘れるので、この方法は使用しません。