ひさびさにのこの技術記事を書こうと思ったきっかけは・・・
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 内に、
と書けばよい。先頭に! ビックリマークを忘れないこと。
このように表示される。
↓ ↓ ↓
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"]
のように記述すればよい。
※ただしこうして指定した画像はページ上には表示されない。
[PR]
Twitter文学賞 海外編 第１位（第10回）のあの傑作短編集が文庫になって登場！
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作品目の『夜警』が傑作！
