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