56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
|
+++
|
||
|
|
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.cf"
|
||
|
|
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/
|