Hugo Blogにlightbox2を導入する

はじめに

Hugoのブログの画像が解像度が固定されているので、拡大もできなくて見づらいなと思ったので lightboxを導入する。

環境

Windows 10 Professional
WSL2 (Ubuntu22.04 LTS)

lightbox 2.11.4

lightboxの導入

下記のページより、最新のバージョンをダウンロードする。
https://github.com/lokesh/lightbox2/releases
Hugoのプロジェクトに css, js, images を入れる。 ※下記のように今回入れる。

static ---- css
            |--lightbox.css
       |
       ----images
       |
       ----js
           |--lightbox.js

テーマの config.toml の customCSS, customJSのパラメータに追加する。

-  customCSS = ["syntax.css"]            # if ['custom.css'], load '/static/css/custom.css' file
-  customJS = []             # if ['custom.js'], load '/static/js/custom.js' file

+  customCSS = ["syntax.css", "lightbox.css"]            # if ['custom.css'], load '/static/css/custom.css' file
+  customJS = ["lightbox.js"]             # if ['custom.js'], load '/static/js/custom.js' file

これで完了。

画像タグの変更

今までは、画像の挿入を下記のように行っていた。

![IMG_4152](/image/tech/tips/install-lightbox2-to-hugo-blog/IMG_4152.jpeg)

↓

これを下記のように変更する

<a href="/image/tech/tips/install-lightbox2-to-hugo-blog/IMG_4152.jpeg" data-lightbox="capture">
![IMG_4152](/image/tech/tips/install-lightbox2-to-hugo-blog/IMG_4152.jpeg)
</a>