Lightbox2をHexoに導入し、マークダウンは従来の記述で実装する

Share on:

この記事は約3 分で読めます。

目次

今回はLightgallery(画像をクリックしたときにポップアップする機能。テーマに最初から付属。)が画像によって機能したり機能しなかったりしたので、これを大御所のLightbox2に変更したという記事です。

このブログはHexoで書いていて、テーマにhuemanを利用しています。(2019/04/25テーマを変更しました。)

Hexoブログを書き始めて気づきましたが、テーマによってプラグインとの相性があまりよろしくないです。

これまでもいくつかのプラグインをカスタマイズしてきました。以下はのその一部です。

テーマとの関係でLightbox2プラグインのインストールだけでは実装できなかったので備忘録として書いておきます。

Lightboxのインストール

まずは、お約束どおり、

1npm install lightbox2 --save

としてみましたが、モジュールが入るだけで、然るべき場所にCSSやらJSが配置されなかったので手動で配置しました。

~/node_modules/lightbox2/src内にある、cssimagesjsフォルダを~/themes/hueman/sourceにコピーします。

続いてソースの読み込みを設定します。(個人的にはこの後ソースをインライン化して記述します。)

<head>~</head>内でCSSを読み込みます。

1<link href="../../css/lightbox.css" rel="stylesheet" />

</body>のなるべく直上にJS関係を記述します。

1<script src="../../js/lightbox.js"></script>
2
3<script>
4$(function(){
5  $('img').wrap(function() {
6    return '<a href="'+$(this).attr('src')+'" data-lightbox="image"></a>';
7  });
8});
9</script>

※最後のjQueryについては後述します。

※繰り返しますがテーマはhuemanですので、適宜読み替えてください。

以上で、Lightbox2を使う準備が整いました。

マークダウン記法

画像は![](画像パス)のように書いています。

展開すると、こんな感じです。

1<a href="hexo-image.jpg">
2    <img src="hexo-image.jpg">
3</a>

Lightbox2を利用するには、<a>タグにdata-lightbox="image"が必要になりますので、追記して上げる必要があります。

せっかくマークダウンで書いているのにべた書きで画像ソースを書くのはナンセンスです。

そこで今まで通り![](画像パス)と記述して、jQueryでdata-lightbox="image"aタグに付加してimgタグを包んであげます。

その処理が、

1<script>
2$(function(){
3  $('img').wrap(function() {
4    return '<a href="'+$(this).attr('src')+'" data-lightbox="image"></a>';
5  });
6});
7</script>

です。

ここでは単純に$('img')としており、全てのimgdata-lightbox="image"があたりますので、classや条件(例:$('img:not(.thumbnail)')でLightbox2をあてたい画像を特定してください。

以上で、画像がきれいにLightboxします!

実際にこのブログの画像をクリックしてポップアップされることを確かめてみてください。

雑感

Hexoブログ楽しいです。ぜひ皆さんにも脱WordPressしてもらいたいと本気で思います。

ただ、まだまだ不具合が多かったり、情報が少なかったりしますので、これからもHexoブログ=静的サイトの良さをどんどん記事に書いていきたいと思います。

WordPressを動的WEBアプリとして使っている方も静的サイトはちょっと、、、と思われるかもしれませんが、クライアント様案件の中にはjQueryだけで動的な機能を実装できてしまった案件もありますので、この軽くて高速で簡単なHexoブログぜひおすすめです。