HugoサイトでMainroadテーマを使用する場合にサムネイル画像をページバンドルフォルダに保存する方法
すべてのページに関連するコンテンツを1つのフォルダに保持しています...
目次
長い間、この不満に悩まされてきました。ページのサムネイル画像（[ページのサムネイル画像](https://www.glukhov.org/ja/post/2025/06/hugo-images-in-bundle-pages-mainroad-thumbnails/ “ページのサムネイル画像 mainroad と hugo”）を static ディレクトリに配置する必要があります。これは Mainroad、Rodster などの類似した Hugo テーマに適用されます。
私は Hugo ページコンテンツをページバンドルとして整理するのが好きで、すべてのページに関連する画像をこのページバンドル内に保存したいと思っています。
そしてここに解決策をご紹介します！
Mainroad Hugo テーマ（および類似テーマ）のサムネイル画像をページバンドルフォルダに保持する方法
このテキストをファイル ./layouts/partials/post_thumbnail.html に配置するだけで、バンドルフォルダおよび static フォルダから画像をどこにでも保存できます :).
{{- if $thumbnail := .page.Params.thumbnail }}
{{- $class := .class }}
{{- $visibility := .page.Site.Params.thumbnail.visibility | default (slice "list" "post") }}
{{- $valueType := printf "%T" $thumbnail -}}
{{- $isMap := in $valueType "map" -}}
{{- if $isMap }}
{{ $visibility = default (slice "list" "post") (default .page.Site.Params.thumbnail.visibility $thumbnail.visibility) }}
{{ $thumbnail = $thumbnail.src }}
{{- end }}
{{- if in $visibility $class }}
{{- $thumbnailURL := "" }}
{{- /* まずページリソースから画像を検索（バンドルページ用） */ -}}
{{- $resource := .page.Resources.GetMatch $thumbnail }}
{{- if $resource }}
{{- $thumbnailURL = $resource.RelPermalink }}
{{- else }}
{{- /* デフォルトとして static フォルダの画像を使用 */ -}}
{{- $thumbnailURL = $thumbnail | relURL }}
{{- end }}
<figure class="{{ with $class }}{{ . }}__thumbnail {{ end }}thumbnail">
{{ if eq $class "list" }}<a class="thumbnail__link" href="{{ .page.RelPermalink }}">{{ end }}
<img class="thumbnail__image" src="{{ $thumbnailURL }}" alt="{{ .page.Title }}">
{{ if eq $class "list" }}</a>{{ end }}
</figure>
{{- end }}
{{- end }}
コメントからもわかるように、このテンプレートはページバンドルに保存された画像への参照を生成しようとしています。画像が見つからない場合は、デフォルトの static フォルダにフォールバックします。つまり、後方互換性があります！
楽しんでください！
ハッピーハーグー！
