1
0
hugo/content/blog/2021-07-04-hugo.md
2024-04-23 22:21:26 +09:00

46 lines
1.3 KiB
Markdown

+++
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する際、環境変数を入れるのいつも忘れるので、この方法は使用しません。