为 Twikoo 评论系统添加图片点击放大功能

博客目前使用的 Twikoo 评论系统,但是这个评论系统中发图是无法点击放大的。

原作者是这样解释这个问题的:

  1. 会增加包体大小
  2. 涉及 body DOM 节点操作,为了不影响在不同主题下的显示效果,需要杜绝这类操作
  3. lightGallery 库是 GPLv3 协议的

所以原作者也专门写了一篇 文字 来告诉用户如何使 Twikoo 评论中的图片可以点击放大。

但是我发现他博客本身就使用 lightGallery 来提供类似的功能,而我的目前使用 Fluid 主题使用的是 Fancybox,再多引入一个功能类似的未免有些臃肿。

这样的话,既然 lightGallery 能集成,那么 Fancybox 没道理不可以。

2021.09.28 更新:Fluid 最新发布的 Release 已经加入了这个功能。

https://github.com/fluid-dev/hexo-theme-fluid/releases/tag/v1.8.12

首页图片 Pixiv ID = 87095893

使用

由于自己对前端完全不懂,我带着我的问题去请教了前端同事,然后他帮我解决了。

首先修改 /source/js/plugins.js 文件,找到第 58 行处,将以下代码部分:

1
2
3
4
initFancyBox: function() {
if (!$.fancybox) { return; }

jQuery('.markdown-body :not(a) > img, .markdown-body > img').each(function() {

改为:

1
2
3
4
5
6
7
8
9
10
initFancyBox: function(param) {
if (!$.fancybox) { return; }

var option = param || {};
var $imageSel = '.markdown-body :not(a) > img, .markdown-body > img';
if (option.isTwikoo) {
$imageSel = '#twikoo .tk-content img:not(.tk-owo-emotion)';
}

jQuery($imageSel).each(function() {

然后找到 /layout/_partial/comments/twikoo.ejs 文件,找到第 10 行处,将以下代码部分:

1
path: '<%= theme.twikoo.path %>'

改为:

1
2
3
4
5
6
path: '<%= theme.twikoo.path %>',
onCommentLoaded: function () {
Fluid.plugins.initFancyBox({
isTwikoo: true
});
}

这时候重新部署一遍应该就可以了。

写在最后

在和同事讨论的过程中,考虑到主题本身支持多个评论系统,所以在修改的过程中考虑到扩展性,提了 PR 给主题项目。

感谢同事,帮我解决了这个问题!