2021-10-24 / @syui

hugo

hugoのresourceを使ってみた

今回、写真が増えてきたので、ページを作ったのですが、その際、hugoのresourceを使ってみました。

/photo

dir構造は以下の通り。content/photo/以下に画像を置きます。

content/photo
├── figure.jpg
├── illust.jpg
├── index.md
├── pokecard.jpg
└── sticker.jpg
---
title: "photo | syui.cf"
resources:
- src: '*.jpg'
type: "photo"
---

それをlayout/photo/single.htmlでresourceを使って取得。

{{ with .Resources.Match "*.jpg" }}
<div class="Carousel__slide">
	<p>
	{{ range . }}
	<a href="{{ .RelPermalink }}"><img src="{{ .RelPermalink }}" width="480"></a>
	{{ end }}
	</p>
</div>
{{ end }}

以下のような感じで取得してもいいらしい。

{{ .Resources.ByType "image" }}
{{ .Page.Resources.ByType "image" }}

でも、正直、分かりづらかったり、思ったように動かなかったりするかも。

https://gohugo.io/content-management/page-resources/