在 Cactus 主题中启用 Fancybox 图片放大功能

起因

最近写的文档里引用的屏幕截图分辨率较高，渲染在文章段落中看不清细节，而使用的 Cactus 主题也不支持图片放大，遂想找个解锁图片缩放的方式。

解决步骤

首先查阅相关资料发现 fancybox 是一种简单通用的插件解决方案。

Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content.

然后找到这篇博客详细记录了集成 fancybox 到 cactus 的方式，使用过程中发现点小问题，这里简单记录下。

Step 1 - 在主题目录 /themes/cactus/layout/_partial/head.ejs 中引入 css 文件

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

Step 2 - 在同级目录的 script.ejs 中引入 js 文件

1
2
3
4
5
6
7
<!-- FancyBox -->
<% if (theme.fancybox.enabled) {%>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script>
    Fancybox.defaults.hideScrollbar = false;
  </script>
<% } %>

这里和原文的区别在于保留了外部的滚动条，可以解决图片放大缩小切换时页面布局变化导致错位的问题，参考 https://fancyapps.com/fancybox/layout-shift/ 。

Step 3 - 在主题配置中加入 fancybox 开关

1
2
3
# Enable FancyBox
fancybox:
  enabled: true

Step 4 - 添加脚本替换图片标签

原文的实现方式是修改 node_modules 中 markdown 渲染插件的 js，但是这样部署到 clouldflare 上后会重新 npm run build，无法生效。所以我们使用官方的添加自定义脚本方式实现。

首先在 hexo 的根目录添加 /scripts 目录，然后在里面新建一个 js 脚本用于替换图片标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo.extend.filter.register('marked:renderer', function(renderer) {
  const originalImage = renderer.image.bind(renderer);
  renderer.image = function(href, title, text) {
    const originalHtml = originalImage(href, title, text);
    // 将img标签包裹在a标签中，并添加Fancybox属性
    const wrappedHtml = originalHtml.replace(/<img([^>]*)>/, (match, imgAttrs) => {
      const srcMatch = imgAttrs.match(/src="([^"]*)"/);
      const src = srcMatch ? srcMatch[1] : href;
      return `<a data-fancybox="gallery" data-src="${src}" data-caption="${text}"><img${imgAttrs}></a>`;
    });
    return wrappedHtml;
  };
});

Step 5 - hexo clean && hexo s 后确认效果

效果参考：
bayesian-visualization-derivation