写博客必不可少的一个功能就是图片灯箱功能，也就是点击放大查看。但是不同程序的博客所使用的插件也都不一样，我这里研究出一套可以满足绝大部分程序的灯箱插件。已经测试过 hexo, hugo, typecho 均无问题。 引入文件 首先引入我们关键的两个文件分别是 zoom.css 和 zoom.js 。 <!-- head 头部 --> <link rel="stylesheet" href="https://cdn.zburu.com/list/zoom.css"> <!-- body 底部 --> <!-- 如果已经有 jq 文件了，就不要引入 jquery --> <script src="https://cdn.zburu.com/list/jquery3.6.0.js"></script> <!--图片灯箱--> <img src="" alt="" class="bigimg"> <div class="mask"></div> <script src="https://cdn.zburu.com/list/zoom.js"></script> 因为这个文件是放在我自己服务器上的，所以不敢保证以后还是这个路径，建议在浏览器打开，然后把里面的代码复制到本地使用。 调用 js 然后我们需要给图片一个类名，以及一个父元素盒子，同样也可以使用 jq 来完成。 这里的 .post-content 正文的类名，如果你是别的类名，可以直接将 .post-content 替换掉。 $(function(){ $('.post-content img').addClass('smallimg') $('.post-content img').wrap('<div class="imgbox"></div>') }) 接着我们需要对插件进行初始化，直接在刚才的代码下面写入。 $(function(){ $('.post-content img').addClass('smallimg') $('.post-content img').wrap('<div class="imgbox"></div>') /* smallimg // 小图 bigimg //点击放大的图片 mask //黑色遮罩 */ var obj = new zoom('mask', 'bigimg', 'smallimg'); obj.init(); }) 回到页面上，点击正文的图片就可以成功放大了。 结束 随便放个图片试验一下吧！ 之所以我限制了在正文中才可以放大，是因为网站其他地方也有图片，如果都可以点击放大，就很不合理。 如果在使用中有其他问题，欢迎留言。