寫博客必不可少的一個功能就是圖片燈箱功能，也就是點擊放大查看。但是不同程序的博客所使用的插件也都不一樣，我這裡研究出一套可以滿足絕大部分程序的燈箱插件。已經測試過 hexo, hugo, typecho 均無問題。
引入文件#
首先引入我們關鍵的兩個文件分別是 zoom.css 和 zoom.js 。
<!-- head頭部 -->
<link rel="stylesheet" href="https://cdn.imhan.cn/list/zoom.css">
<!-- body底部 -->
<!-- 如果已經有jq文件了，就不要引入jquery -->
<script src="https://cdn.imhan.cn/list/jquery3.6.0.js"></script>
<!--圖片燈箱-->
<img src="" alt="" class="bigimg">
<div class="mask"></div>
<script src="https://cdn.imhan.cn/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();
})
回到頁面上，點擊正文的圖片就可以成功放大了。
結束#
隨便放個圖片試驗一下吧！
之所以我限制了在正文中才可以放大，是因為網站其他地方也有圖片，如果都可以點擊放大，就很不合理。
如果在使用中有其他問題，歡迎留言。