HugoのTips：画像にキャプションを付ける

画像を引用するときには、引用元を明示し、リンクも付けることが必要
- 参考：画像や文章の正しい引用方法と著作権侵害を防ぐためのルールを解説
Hugo の Markdown Render Hooks の機能を利用して、キャプション要素 <figcaption>を出力できるようにした

方法

Markdown のレンダリングをカスタマイズする

layouts/_default/_markupにrender-image.htmlというファイルを作り、次のように記述する

{{ if .Title }}
<figure>
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
  <figcaption>{{ .Title | safeHTML }}</figcaption>
</figure>
{{ else }}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
{{ end }}

結果

input: Markdown

Markdownファイル内で次のように記述する

![画像の説明](https://example.com/image.png "source: <a href='https://example.com'>引用元</a>")

output: HTML

アンカー要素<a>などを含む場合でも、HTMLを問題なく出力できた

<figure>
  <img src="https://example.com/image.png" alt="画像の説明">
  <figcaption>source: <a href='https://example.com'>引用元</a></figcaption>
</figure>

hugo

Posted : 24.01.07