为 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 给主题项目。

感谢同事，帮我解决了这个问题！