はじめに
Hugoで画像を表示する際に、lightboxを使っているのだが、タグが長すぎて書くのがかなり辛い。
そのため、HugoのShortcodeを使って楽に書けるようにしてみる。
環境
Hugo 0.111.3-ext
Docker 24.0.6
Docker Composer v2.22.0-desktop.2完成イメージ
使い方
{{ < lightbox name="sample" path="" gallery-id="capture" > }}※ gallery-idが指定されていない場合は、capture が自動的に挿入されるようにする。
レンダリング
<a href="/path/to/image" data-lightbox="capture">
<img src="/path/to/image" alt="sample">
</a> 作成手順
テンプレートファイルの作成
layouts/shortcodes/以下に作成をする。
ファイル名がそのまま呼び出し名となるので、ファイル名には気をつける必要があると記載がある。
今回は、lightbox.htmlという名前にする。
lightbox.htmlの作成
下記のように作成をした。
{{ $name := .Get "name" }}
{{ $path := .Get "path" }}
{{ $galleryID := .Get "gallery-id" | default "capture" }}
<a href="{{ $path }}" data-lightbox="{{ $galleryID }}">
<img src="{{ $path }}" alt="{{ $name }}">
</a>補足:ChatGPTのプロンプト
ChatGPTに作成してもらった。
https://chat.openai.com/share/f48935f7-5cd1-440a-b953-7aea7501a090
使ってみる
{{ < lightbox name="card" path="/images/card.png" gallery-id="capture" > }}
できた！OK
参考
Create your own shortcodes
https://gohugo.io/templates/shortcode-templates/HUGO で独自 Shortcode を作る
https://blog.chick-p.work/blog/hugo-shortcode/
おわりに
今まで作成した記事で使っていた lightboxのタグも書き直さないとなあ。