集成 Twikoo 与 lightGallery 插件，实现评论图片的点击放大

Twikoo 文档页和本站的评论区，支持评论图片点击放大，你现在就可以就下拉到本文评论区试一试！

为什么 Twikoo 没有官方支持图片点击放大？

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

我就想要实现图片点击放大功能！

首先需要你拥有修改博客主题的能力。

1. 在合适的位置（文章页，twikoo.init() 之前），引入相关的 JS 和 CSS 文件

<!-- lightGallery -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.1.8/css/lightgallery.css">
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.1.8/lightgallery.min.js"></script>

2. 找到 twikoo.init 代码所在位置，进行修改

twikoo.init({
  // envId: 'abcdef',
  // ...
  onCommentLoaded: function () {
    var commentContents = document.getElementsByClassName('tk-content');
    for (var i = 0; i < commentContents.length; i++) {
      var commentItem = commentContents[i];
      var imgEls = commentItem.getElementsByTagName('img');
      if (imgEls.length > 0) {
        for (var j = 0; j < imgEls.length; j++) {
          var imgEl = imgEls[j];
          var aEl = document.createElement('a');
          aEl.setAttribute('class', 'tk-lg-link');
          aEl.setAttribute('href', imgEl.getAttribute('src'));
          aEl.setAttribute('data-src', imgEl.getAttribute('src'));
          aEl.appendChild(imgEl.cloneNode(false));
          imgEl.parentNode.insertBefore(aEl, imgEl.nextSibling);
          imgEl.remove();
        }
        lightGallery(commentItem, {
          selector: '.tk-lg-link',
          share: false
        });
      }
    }
  }
});

3. 大功告成！