今天折腾了下Nexo博客，并选用了Stellar主题，按照作者的文档说明进行了相关配置，发现使用image标签可以实现图片的点击放大功能，但是image标签属于主题的标签组件，虽然功能强大，但不是通用语法，因此开始探究使用Markdown语法引用的图片，能否点击放大，答案是肯定的，但是中途也踩了点坑，特此记录下，免得时间长了忘了又掉坑里。

Nexo Stellar主题中使用了fancybox插件用来实现点击图片放大的功能，关于插件的默认配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
# https://fancyapps.com/docs/ui/fancybox/
# available for {% image xxx %}
fancybox:
    enable: true
    loader: /js/plugins/fancybox-loader.js
    js: https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js
    css: https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css
    # 让 md 语法图片支持放大可以这样写: .md-text img:not([class]), .md-text .image img
    # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
    # 使用 twikoo 评论可以写: .tk-content img:not([class*="emo"])
    # 使用 waline 评论可以写: #waline_container .vcontent img
    selector: .timenode p>img # 多个选择器用英文逗号隔开

按照注释的说明，我将选择器修改成了：

1
selector: .timenode p>img, .md-text img:not([class]), .md-text .image img

但是发现并没有生效，看了一下渲染生成的HTML文件，生成的图片相关HTML代码是这样的：

1
<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=" data-src="https://myimages.us.kg/api/cfile/AgACAgUAAxkDAAOKZuwBZ_XbYi5CG4OTXuRTXFrXv2sAAq-_MRtE4WBXpzB8MU_EW6EBAAMCAAN4AAM2BA">

可以发现，Markdown生成的图片使用了 class="lazy"类型，导致图像选择器无法匹配。

既然发现了问题，那就好办了，fancybox插件配置上边是lazyload插件，默认配置如下：

1
2
3
4
5
6
# lazyload
# https://www.npmjs.com/package/vanilla-lazyload
lazyload:
    enable: true # [hexo clean && hexo s] is required after changing this value.
    js: https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js
    transition: fade # blur, fade

可以看到lazyload插件默认启用，所以才会给图像文件加上class="lazy"，只要把enable: true改成enable: false即可，即修改为：

1
2
3
4
5
6
# lazyload
# https://www.npmjs.com/package/vanilla-lazyload
lazyload:
    enable: false # [hexo clean && hexo s] is required after changing this value.
    js: https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js
    transition: fade # blur, fade

如果需要使用到lazyload插件的功能，那就需要修改fancybox的选择器了，修改成.md-text img.lazy就可以和lazyload搭配工作了

1
selector: .timenode p>img, .md-text img.lazy

或者干脆暴力点，修改成.md-text img匹配所有图片

1
selector: .timenode p>img, .md-text img

自此，通过Markdown语法链接的图片都能够通过鼠标点击进行放大了，而不需要用到image标签，很容易解决，但是对于第一天接触的新手来说，确实是个坎，希望能帮到有同样困惑的新手朋友们，完结撒花~~~

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~