はじめに

Hugoで画像を表示する際に、lightboxを使っているのだが、タグが長すぎて書くのがかなり辛い。
そのため、HugoのShortcodeを使って楽に書けるようにしてみる。

環境

1
2
3
4

Hugo 0.111.3-ext

Docker 24.0.6
Docker Composer v2.22.0-desktop.2

完成イメージ

使い方

1

{{ < lightbox name="sample" path="" gallery-id="capture" > }}

※ gallery-idが指定されていない場合は、capture が自動的に挿入されるようにする。

レンダリング

1
2
3

<a href="/path/to/image" data-lightbox="capture">
    <img src="/path/to/image" alt="sample">
</a>

作成手順

テンプレートファイルの作成

layouts/shortcodes/以下に作成をする。
ファイル名がそのまま呼び出し名となるので、ファイル名には気をつける必要があると記載がある。
今回は、lightbox.htmlという名前にする。

lightbox.htmlの作成

下記のように作成をした。

1
2
3
4
5
6
7

{{ $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

使ってみる

1

{{ < lightbox name="card" path="/images/card.png" gallery-id="capture" > }}
card

できた！OK

参考

おわりに

今まで作成した記事で使っていた lightboxのタグも書き直さないとなあ。