+++
date = "2021-10-24"
tags = ["hugo"]
title = "hugoのresourceを使ってみた"
slug = "hugo"
+++

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

[/photo](/photo)

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

```sh
content/photo
├── figure.jpg
├── illust.jpg
├── index.md
├── pokecard.jpg
└── sticker.jpg
```

```html:/content/photo/index.md
---
title: "photo | syui.ai"
resources:
- src: '*.jpg'
type: "photo"
---
```

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

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

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

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

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

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