博客篇：TwiKoo实现评论图片点击放大 🖼️✨#

前言 💬#

之前博客写过一篇配置文章，里面有讲解如何集成TwiKoo评论系统。

Astro/fuwai博客配置教程

不过TwiKoo默认是不支持图片点击放大的，但是fuwari主题默认是支持图片点击放大的。

那么这就非常好实现了💡，也不需要引入其他的插件了🙌。

开始实现 🛠️#

修改配置文件 ⚙️#

通过阅读代码发现fuwari主题是用的PhotoSwipe插件实现的图片点击放大🔍。

具体代码在src/layouts/Layout.astro文件中配置：

1
function createPhotoSwipe() {
2
  lightbox = new PhotoSwipeLightbox({
3
    gallery: ".custom-md img, #post-cover img, .tk-content img",
4
    ...
5
  )}
6
}

首先需要在gallery中添加TwiKoo评论区域img标签图片所在的父元素ID或者class属性。

我这里就直接在原本基础上加上了：.tk-content img 🧩。

但是由于我们的评论组件是 动态加载 的⚡，所以想让图片点击生效还需要添加一行代码，将createPhotoSwipe方法绑定到window对象上。

1
function createPhotoSwipe() {
2
  lightbox = new PhotoSwipeLightbox({
3
    gallery: ".custom-md img, #post-cover img, .tk-content img",
4
    ...
5
  )}
6
}
7

8
(window as any).createPhotoSwipe = createPhotoSwipe;
9

10
...

修改评论组件 💻#

虽然实现了点击放大🖱️，但是鼠标移入图片的时候，鼠标应该变为放大镜🔎，所以还需要修改评论组件，添加样式。

需要在script代码里面动态添加上样式代码🎨：

1
// 动态创建样式并添加到页面
2
const style = document.createElement('style');
3
style.textContent = `
4
                        .tk-content img {
5
                            cursor: zoom-in;
6
                            transition: opacity 0.2s ease;
7
                        }
8
                        .tk-content img:hover {
9
                            opacity: 0.9;
10
                        }
11
                     `;
12
document.head.appendChild(style);
13
console.log("动态样式已添加到页面");

然后在评论组件init方法中的onCommentLoaded事件中调用刚刚为window对象绑定的方法⚙️。

1
twikoo.init({
2
    envId: commentConfig.twikoo.envId,
3
    el: '#tcomment',
4
    region: commentConfig.twikoo.region,
5
    path: location.pathname,
6
    lang: commentConfig.twikoo.lang,
7
    onCommentLoaded: function() {
8
        console.log('Twikoo comments loaded successfully');
9
        if (window.createPhotoSwipe){
10
            window.createPhotoSwipe();
11
        }
12
    }
13
});