Front Matter内の記述を極力簡便にしつつ、アイキャッチ画像(サムネイル)を設定する方法について考えてみました

概要

全ての記事のFront Matterにて個別の画像を指定するのは、効率が悪いし面倒です

以下のような構成にします

• (条件1)Front Matterで画像が指定されていたらその画像を使用する
• (条件2)そうでない場合は、タグ毎の既定の画像を使用する(複数のタグが付いている場合は、1番目のタグに対応する画像を使用)

必要に応じてFront Matterで画像を指定する

記事毎に画像を設定したい場合はFront Matterで設定します

title: "example"
date: 1970-01-01
tags:
- Foo
- Bar
eyecatch: "001.jpg"

私はPage Bundleに準じたファイル構成にしているので、ファイル名だけ記述しています 画像を全てstatic/ 以下に置いている場合は、そのパスを記述して下さい

例えば、(ビルド前の)画像のパスが static/img/19700101/001.jpg であれば、

eyecatch: "/img/19700101/001/jpg"

と記述します

タグ毎の既定の画像を用意する

static/img/eyecaches/配下に既定の画像を置きます(ファイル名はタグ名のlowercaseにします)

Front Matterでの記述を省略した場合はこちらの画像を使用します

static/img/eyecatches/
  ├ android.jpg
  ├ hugo.jpg
  └ mac.jpg

記事一覧ページで画像を取得して表示する

テーマのindex.htmlを編集します

{{ range $paginator.Pages }} のような感じで各ページの情報を取得してから、以下のようにして画像を取得します

<!-- 概要の条件1 -->
{{ if .Params.eyecatch }}
{{ $path := path.Join .RelPermalink .Params.eyecatch }}
<a href="{{ .RelPermalink }}"><img src="{{ $path | safeHTML}}" alt="thumbnail"></a>

<!-- 概要の条件2 -->
{{ else if gt .Params.tags 0 }}
{{ $path := printf "%s%s%s" "/eyecatches/" (lower (index .Params.tags 0)) ".jpg" }}
<a href="{{ .RelPermalink }}"><img src="{{ $path | safeHTML}}" alt="thumbnail"></a>

{{ end }}

一部補足します

2行目の
{{ $path := path.Join .RelPermalink .Params.eyecatch }}
で記事のリンクと画像のパスを繋げているのは、Page Bundleに準じたファイル構成にしている為です

画像を全てstatic/の下に置いている場合は
{{ $path := .Params.eyecatch }}
で良いかと思います

5行目でprintfを使用しているのは、複数の文字列をそのまま連結するにはこれしか方法が無い為です printfの使用法は普通のCとかの物に近いです
タグには大文字が含まれるので、lowerで囲ってlowercaseに変換して実際のファイル名と一致させるようにしています
また、拡張子を決め打ちしているのでファイルの種類は統一させる必要があります

<a href ~></a>の記述が被っていますが、私が単純にHugoのカスタマイズ方法を熟知していない為です(ちょっと頭が悪い感じですがゴチャゴチャするよりはマシかと)

とまあこんなもんです

タグ毎に画像を用意するようにしてから記事の更新が楽になったので是非やってみてください