如何彻底禁用Blogger SOHO主题的Lightbox全屏图片功能？

嘿，太懂你手动改100多张图的崩溃了！别慌，用CSS或者JavaScript就能一次性搞定，不用挨个折腾每张图。下面给你两种靠谱的解决方案：

方法一：用CSS直接禁用图片点击（最简单） #

这个方法通过阻止图片（或包裹图片的链接）响应点击事件，从根源上避免触发全屏效果。把这段CSS代码加到你的主题里就行：

/* 禁用博客内所有图片的点击交互 */
.post-body img, .post-body a:has(img) {
    pointer-events: none;
    cursor: default; /* 可选：把鼠标指针改成默认样式，明确告诉用户图片不可点击 */
}

怎么添加到Blogger： #

1. 打开你的Blogger后台，进入「主题」页面
2. 点击「自定义」旁的下拉菜单，选择「编辑HTML」
3. 找到<head>标签，把上面的CSS代码放进<style>标签中（如果已经存在<style>标签，直接追加进去即可）
4. 保存主题，刷新博客就能看到效果！

方法二：用JavaScript彻底阻止全屏行为（更稳妥） #

如果CSS方法没生效，说明主题可能用JavaScript绑定了点击事件，那试试这段JS代码：

<script>
// 等页面完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
    // 处理所有博客图片
    const postImages = document.querySelectorAll('.post-body img');
    postImages.forEach(img => {
        // 清空图片自带的点击事件
        img.onclick = null;
        // 阻止点击事件冒泡和默认行为
        img.addEventListener('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
        });
    });
    // 处理包裹图片的链接（防止点击链接触发全屏）
    const imageLinks = document.querySelectorAll('.post-body a[href$=".jpg"], .post-body a[href$=".png"], .post-body a[href$=".gif"]');
    imageLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
        });
    });
});
</script>

添加方式： #

把这段代码放到<head>标签里，或者页面底部的</body>标签之前，保存后测试即可。

小提醒 #

• 如果你的主题里图片的父容器类不是.post-body，可以用浏览器开发者工具（F12）查看图片所在的父元素类名，替换掉选择器里的.post-body就行
• 要是之后主题更新，可能需要重新添加代码，记得提前备份好你的主题设置哦！

内容的提问来源于stack exchange，提问作者firoze