+++
date = "2021-07-04"
tags = ["hugo"]
title = "hugoで画像表示を自動化する"
slug = "hugo"
+++

昨日紹介したvueを使った方法は、browserでjavascriptをdisableにしているuserには表示できないので、本来的にはhugoで解決したほうがいいかもしれません。

vueは基本的にjsで出力されるのに対して、hugoはhtmlで出力されるますので。

したがって、hugoでの解決法も書いておきます。

```sh
$ export IMG_YUI=`ls ./static/img/yui_*.png|wc -l|tr -d ' '`

$ hugo serve
```

```html:layout/img/single.html
{{ $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する際、環境変数を入れるのいつも忘れるので、この方法は使用しません。