ひさびさにのこの技術記事を書こうと思ったきっかけは・・・
2022/8/10にはてなブックマークでバズったこちらのブログ記事に出合ったことだ。
↓　↓　↓
上田隼也 氏のブログ記事「リーダーの作法」マネジメントに限らず、エンジニアとして仕事の作法について書かれた良書

おおー、このエンジニアの方。Hugoを使っていらっしゃるではないか！

そして、ふとトップページを表示したところ、驚きがあった。
↓　↓　↓
上田隼也 氏のブログのトップページ

トップに記事の画像が表示されている！！！

これ、どうやっているんだ？？？

それから、テンプレートのソースをたどったりして悩むことしばらく・・・ようやくPaperModのオプション設定として実装されていることが分かった。
この方法は、6. トップページの一覧にサムネイル画像を表示する方法 で解説するが、HugoのPaperModテンプレートで画像を表示する仕方についていろいろあるので、順を追って解説していきたい。

1. 画像ファイルはどこに置くか

まず、画像は別のサイト上にあればそのURLを読み込むことができるが、同じサイト内に画像ファイルを配置するならば、static ディレクトリ内に置けばよい。
私の場合、画像の種類に応じて整理するため、static ディレクトリ内にさらにフォルダを作って置いている。

【site】/static/eyecatch_images/
【site】/static/posts_images/
【site】/static/thumbnail_images/

という具合だ。

なお、Hugoコマンドで出力することにより生成される public ディレクトリの直下に生成されるので、【site】/xxx.md と【site】/static/xxx/ というように名前が重複してはいけない。

2. 記事内に画像を表示する方法

まず、/posts/hoge.md という記事ページ内に、hoge.png という画像を表示する方法である。
(1) 【site】/static/posts_images/hoge.png　のようにファイルを置く。 (2) hoge.md 内に、

![hogeテキスト](/posts_images/hoge.png)

と書けばよい。先頭に! ビックリマークを忘れないこと。

このように表示される。
↓　↓　↓ hogeテキスト

3. 記事内に画像リンクを表示する方法

画像をリンクにしたい場合の書き方はこうだ。

{ {< figure src="/posts_images/hoge.png" link="https://www.nokami-system.jp/" width="231">} }

※前後の「{ {」の間のスペースは無し

このように表示される。 (クリックすると当サイトのトップに遷移する)
↓　↓　↓

4. 記事のサムネイル画像を設定する方法（記事内には非表示）

何もしないと、記事のサムネイル画像として、configファイルにある

params:
  images: ["/post_images/hoge.png"]

が使われることになるが、普通は記事ごとにサムネイル画像を用意したいところだろう。
その場合、記事の /posts/hoge.md のオプション設定記載部分に、

images: ["/cover_images/hoge.png"]

のように記述すればよい。
※ただしこうして指定した画像はページ上には表示されない。

5. 記事のアイキャッチ画像を設定する方法（記事内にも表示）

記事のアイキャッチ画像を設定したい場合は、複数の設定が必要だ。
(1) 記事の /posts/hoge.md のオプション設定記載部分に、

cover:
  image: "/cover_images/hoge.png"

と記述する。
(2) configファイル(config.yml等)の、cover: 項の、hiddenInSingle: を、false に変更する。

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: false # hide on single page

6. トップページの一覧にサムネイル画像を表示する方法

トップページの一覧の記事の部分ににサムネイル画像を表示したい場合は、複数の設定が必要だ。
(1) 記事の /posts/hoge.md のオプション設定記載部分に、

cover:
  image: "/cover_images/hoge.png"

と記述する。
(2) configファイル(config.yml等)の、cover: 項の、hidden:と、hiddenInList: を、false に変更する。

  cover:
    hidden: false # hide everywhere but not in structured data
    hiddenInList: false # hide on list pages and home
    hiddenInSingle: true # hide on single page

[PR]
「なめらかな・・・」の伴名練 氏によるSF新人気鋭アンソロジー。14作品目の『夜警』が傑作！

当ブログのHugo関連関連記事

このエントリーをはてなブックマークに追加