はじめに

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

環境

1
2
3
4

Windows 10 Professional
WSL2 (Ubuntu22.04 LTS)

lightbox 2.11.4

lightboxの導入

  1. 下記のページより、最新のバージョンをダウンロードする。
    https://github.com/lokesh/lightbox2/releases

  2. Hugoのプロジェクトに css, js, images を入れる。 ※下記のように今回入れる。

1
2
3
4
5
6
7

static ---- css
            |--lightbox.css
       |
       ----images
       |
       ----js
           |--lightbox.js
  1. テーマの config.toml の customCSS, customJSのパラメータに追加する。
1
2
3
4
5

-  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

これで完了。

画像タグの変更

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

1

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

↓ IMG_4152

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

1
2
3

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

↓ IMG_4152

全記事の画像URLの貼り替え

大変そうな作業だなと思ったので、ChatGPT にお助けを頂いた。
↓ chatgpt

というわけでこれを実施する。

間違いがあったみたい。
chatgpt2

置換

置換対象

1

!\[([^\]]+)\]\(([^)]+)\)

置換文字列

1

<a href="$2" data-lightbox="capture"><a href="$2" data-lightbox="capture">![$1]($2)</a>

vscode_search

というわけで、想定通りに置換ができた。

参考

おわりに

Hugoでlightboxをどうしても使いたかったので導入した。
いつも画像見るとき大変だったので、これで少しは楽になる…はず？