写博客必不可少的一个功能就是图片灯箱功能，也就是点击放大查看。但是不同程序的博客所使用的插件也都不一样，我这里研究出一套可以满足绝大部分程序的灯箱插件。已经测试过 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();
})
回到页面上，点击正文的图片就可以成功放大了。
结束
随便放个图片试验一下吧！
之所以我限制了在正文中才可以放大，是因为网站其他地方也有图片，如果都可以点击放大，就很不合理。
如果在使用中有其他问题，欢迎留言。