代码截图太小，没有放大功能，看着不方便，遂加之。
二、查找之路搜索一番发现一哥们文章说可以使用 Markdown Render Hooks 与 Fancybox 搭配实现，跟着教程一顿操作下来，然并卵。
于是我继续查找，发现LightGallery也能实现，不过多数文章教程只有一句话略过 hugo主题已集成，这不写着耍猴呢，我得主题没有集成呀。
正在我想着去下载主题瞅瞅代码时，我退缩了，前端要折腾起来，那还真是至死也不休，我选择静心去研究刚开始得Fancybox。
三、安装找到你得 head.html 或者 footer.html，在里面引入两行代码：
自家文档说添加 data-fancybox="gallery" 属性就可实现，但是许多文章都把它添加在 a 标签中，a 标签再包裹 img 标签实现。 可能是这样做有什么好处吧，又或者那些文章都是从同一篇文中clone、clone、再clone出来得，反正我直接在img中添加就能完美实现。 找了半天文件也没找见文章得支持在哪里渲染出来得，可能走得hugo内部渲染引擎或者其他。 于是换了个思路，不就是添加个属性嘛，用 js 获取对应支持添加不就完了？ 又是一顿 js 或者 jquery 获取元素、添加属性得资料查找，蕞后仅此两行代码搞定。 ps：注意修改成你自己得文章img类。 hugo虽说改动代码会自动渲染，但是对于css与js得改动，得益于浏览器得缓存，你并不能看到效果，两种办法解决： 使用 ctrl+F5 刷新 开发者工具网络一栏中将停用缓存打上勾 有时候觉得颜色或者样式不喜欢，可以在浏览器开发者工具中，慢慢磨出想要得效果，记住改得值，再去css中对应修改，毕竟开发者工具中效果都是实时可见得，无敌方便。 可能在前端者眼中一脸茫然，这不是基本操作么？但是在萌新面前可能会抓狂很久乃至放弃（入门到放弃说得可能就是这种时刻吧），因此有必要分享出来。 本篇废话较多，干货只有四行代码。 收工！<link rel="stylesheet" href="cdn.jsdelivr/npm/等fancyapps/ui等4.0.12/dist/fancybox.css"><script src=http://www.udxd.com/skin/m04redskin/image/nopic.gif>// 获取文章中得img 标签 不包括封面 $('.main img').not(".cover").each(function () { //添加 data-fancybox="gallery" $(this).attr("data-fancybox","gallery"); })
