起因

本博客主题cactus没有图片放大功能，在看教程图片时往往会出现文字太小而看不清楚的状况。经搜索，发现 fancybox 这一插件，效果良好。

安装

下图为fancyapps的官网，可以看到除了fancybox还有其他的Javascript UI库。

fancyapps官网

引入文件

点击进入fancybox的文档 ，在 Installation 部分看到我们可以通过npm安装以及直接CDN引入等方式。由于是博客网站，我直接选择CDN引入。

You can also use standalone UMD build by downloading the files or using directly from the CDN on your page:

在 hexo文件夹/themes/cactus/layout/_partial/head.ejs 文件中，我们在head标签的最后添加代码引入css文件：

1
2
3

<% if (theme.fancybox.enabled) {%>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<% } %>

在同级目录下的 scripts.ejs 文件中，我们直接在最后一行添加代码引入js文件：

1
2
3
4

<!-- FancyBox -->
<% if (theme.fancybox.enabled) {%>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<% } %>

可以发现我添加了条件判断，所以要在 主题的_config.yml 文件中添加：

1
2
3

# Enable FancyBox
fancybox:
  enabled: true

至于是否直接引入，全凭大家喜欢。

修改配置

继续看官方文档可以发现，我们只需要简单的在img标签 <img 外套上一层a标签 <a ，加上标签属性 data-fancybox data-src data-caption ，即可实现功能。

刚开始我打算直接引入js脚本修改，但是发现毫无作用。后来想想，或许hexo将markdown渲染成html的时刻在外部js脚本生效之后？我也没去深究缘由，如果有大佬懂这些，欢迎评论指点！

所以我决定试试能不能直接从渲染器下手。搜索得知，hexo默认渲染器是 hexo-renderer-marked ，在 hexo文件夹/node_modules/hexo-renderer-marked/lib/renderer.js 文件中，搜索关键词 img 找到相关代码修改如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 原代码
let out = `<img src="${encodeURL(href)}"`;
if (text) out += ` alt="${text}"`;
if (title) out += ` title="${title}"`;
if (lazyload) out += ' loading="lazy"';

out += '>';

// 修改后
let out = `<a data-fancybox="gallery" data-src="${href}" data-caption="${text}"><img src="${encodeURL(href)}"`;
if (text) out += ` alt="${text}"`;
if (title) out += ` title="${title}"`;
if (lazyload) out += ' loading="lazy"';

out += '></a>';

验证收尾

执行 hexo clean && hexo s 预览后发现显示正常，功能也有，问题解决了。

效果

来张图片看看效果。

最终成果

真不错，满足了哈哈哈。

感谢

Fancybox