icarus主题下拓展图片展示模式

以下操作是在 icarus 主题的 4.1.1 版本下完成的。

更换 icarus 主题后，发现点开文章内的图片无法将其放大。这一很是蛋疼的问题在此前使用 NexT 主题时并未出现过。后来翻阅主题的总配置文件，发现默认使用的画廊插件为 lightgallery 并且是集成在 inferno 模块下的。难怪现有的一系列设置失效。

在研究了 lightgallery 的说明文件后，发现问题原因很简单：就是在 lightgallery 里，涉及到的诸如图片缩放、旋转、自动放映等功能，都被单独拎出来作为子插件。若要使用则需额外引入相应的 .js 文件。现有集成于 inferno 模块下的 lightgallery 只是一个最基础的版本，并没有囊括这些额外功能。

对此，只需找到个人站点在本地根目录下的 node_modules\hexo-component-inferno\lib\view\plugin\gallery.js 文件，并找到文件中的以下相关代码，修改如下（主要是引入有关图片缩放和全屏放映的子插件，其对应拟生成 html 文件中的 body 部分）：

    var js = "window.addEventListener(\"load\", () => {\n            if (typeof $.fn.lightGallery === 'function') {\n                $('.article').lightGallery({ selector: '.gallery-item' });\n            }\n            if (typeof $.fn.justifiedGallery === 'function') {\n                if ($('.justified-gallery > p > .gallery-item').length) {\n                    $('.justified-gallery > p > .gallery-item').unwrap();\n                }\n                $('.justified-gallery').justifiedGallery();\n            }\n        });";
    return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "script", null, null, 1, {
      "src": lightGallery.jsUrl,
      "defer": true
    }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
+     "src": lightGallery.js_zoom_Url,
+     "defer": true
+   }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
+     "src": lightGallery.js_fullscreen_Url,
+     "defer": true
+   }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
      "src": justifiedGallery.jsUrl,
      "defer": true
    }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
      "dangerouslySetInnerHTML": {
        __html: js
      }
    })], 4);

除此之外，在同一文件的最后部分找到相关代码，引入两项功能所对应的 .js 文件，将上述代码修改如下：

return {
    head: head,
    lightGallery: {
-     jsUrl: helper.cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js'),
-     cssUrl: helper.cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')
+     jsUrl: helper.cdn('lightgallery', '1.10.0', 'dist/js/lightgallery.min.js'),
+     cssUrl: helper.cdn('lightgallery', '1.10.0', 'dist/css/lightgallery.min.css'),
+     js_zoom_Url: helper.cdn('lg-zoom', '1.3.0', 'dist/lg-zoom.min.js'),
+     js_fullscreen_Url: helper.cdn('lg-fullscreen', '1.2.1', 'dist/lg-fullscreen.min.js')
    },
    justifiedGallery: {
-     jsUrl: helper.cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js'),
-     cssUrl: helper.cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')
+     jsUrl: helper.cdn('justifiedGallery', '3.8.0', 'dist/js/jquery.justifiedGallery.min.js'),
+     cssUrl: helper.cdn('justifiedGallery', '3.8.0', 'dist/css/justifiedGallery.min.css')
    }
};

此操作引入了zoom 和 fullscreen 两项功能所对应的 .js 文件，顺便更新了一下 lightgallery 至最新版本，从 1.6.8 到 1.10.0，以及 justifiedGallery 的最新版本从 3.7.0 到 3.8.0。（最新版本截止 2021 年 2 月 1 日）

保存并执行常规的更新操作。这样就实现了站点的图片缩放和全屏播放功能。用类似的方法还可实现其他一系列功能，如图片旋转、自动播放，乃至图片分享、视频放映，等等。下表为对应的子插件名和 .js 文件地址。更多操作可参考 lightgallery 说明文档。

子插件	对应名称	`.js` 文件（最新版本，截止2021-2-1）
缩略图	thumbnail	https://cdn.jsdelivr.net/npm/lg-thumbnail@1.2.1/dist/lg-thumbnail.min.js
自动播放	autoplay	https://cdn.jsdelivr.net/npm/lg-autoplay@1.2.1/dist/lg-autoplay.min.js
视频放映	video	https://cdn.jsdelivr.net/npm/lg-video@1.4.0/dist/lg-video.min.js
图片全屏	fullScreen	https://cdn.jsdelivr.net/npm/lg-fullscreen@1.2.1/dist/lg-fullscreen.min.js
页数显示	pager	https://cdn.jsdelivr.net/npm/lg-pager@1.0.2/dist/lg-pager.min.js
图片缩放	zoom	https://cdn.jsdelivr.net/npm/lg-zoom@1.3.0/dist/lg-zoom.min.js
相簿分类	hash	https://cdn.jsdelivr.net/npm/lg-hash@1.0.4/dist/lg-hash.min.js
图片分享	share	https://cdn.jsdelivr.net/npm/lg-share@1.2.1/dist/lg-share.min.js
图片旋转	rotate	https://cdn.jsdelivr.net/npm/lg-rotate@1.2.1/dist/lg-rotate.min.js