Hugoにおける画像およびキャプションの掲載

2020/11/08
https://i.imgur.com/Yx4trUJh.jpg
クジラ

昨日から画像を載せ始めたが、この状態に至るまでやや紆余曲折あったので現在の状態を書き記しておく。

HugoにはShortcodeというツールがあり、よく使うHTMLタグを shortcode名.html として /layouts/shortcodes/ に作成しておくことで利用することができる。

Markdownでは画像を載せるMarkdown記法を利用するか、HTMLタグを利用することで画像を載せることができる(気がする、網羅的ではない)。ShortcodeはHTMLタグを指定した文字列で特定して呼び出しているという状態なのだと思う。

というわけで自分も /layouts/shortcodes/image.html に使いまわしたい画像およびキャプション掲載用のHTMLを作成して使いまわしている。

また、今まで引数として利用するURLを /content/post/img/ 以下の画像ファイルパスにしていたが、この度imgurを使うようになったことで、今までPowerToysとExifEraserを利用していた工程に比べ、トリミングとExif情報削除の数回のクリック分が短縮された。この記事の画像はimgurのURLを引数に利用している。

加えて、今までGitHub Pagesの容量制限を気にして画像のファイルサイズをなるべく削る努力をする必要があったが、imgurを利用することでこのブログのディレクトリに画像ファイルを置く必要が無くなったため、文字だけで1GBに届かないよう気をつけるだけで良くなった。

imgurが消滅しないかぎりURLも使い回すことができるし、いざとなればまとめて保存すればいいような気もする。記事のURLはそのうち自動で書き換えられるようになりたい。

imgurといえば5chでよく使われ、どういった読み方をするのか議論されているサービスというイメージだったが、今後お世話になることになりそう。