Use Medium-Zoom in Hexo Blog

Intro

Icarus主题对图片处理时使用 wrap 方法将图片用<a>标签包裹、href(hypertext reference)设为图片的 src，这样点击图片时会跳转到图片的原图地址。

// File: main.js(function($, moment, ClipboardJS, config) {    $('.article img:not(".not-gallery-item")').each(function() {        // wrap images with link and add caption if possible        if ($(this).parent('a').length === 0) {            $(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');            if (this.alt) {                $(this).after('<p class="has-text-centered is-size-6 caption">' + this.alt + '</p>');            }        }    });    ......}(jQuery, window.moment, window.ClipboardJS, window.IcarusThemeSettings));

使用 href 链接会导致网页的跳转，在移动端体验不佳，电脑端差强人意。在Icarus的GitHub Issue中有人提出了这个问题，为了增强用户点击图片后的交互体验，我们可以使用medium-zoom这一轻量级库，medium-zoom 在点击图片时会在当前页面内创建一个平滑的放大效果，提供更优的视觉体验，查看图片的体验也更直观&沉浸，

Steps

• 引入medium-zoom，以Icarus为例，可以在layout.jsx添加如下代码
  <script src="https://cdn.jsdelivr.net/npm/medium-zoom@latest/dist/medium-zoom.min.js"></script>

• 在main.js初始化

  DIFF

  // File: Main.js(function($, moment, ClipboardJS, config) {-   $('.article img:not(".not-gallery-item")').each(function() {-       // wrap images with link and add caption if possible-       if ($(this).parent('a').length === 0) {-           $(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');-           if (this.alt) {-               $(this).after('<p class="has-text-centered is-size-6 caption">' + this.alt + '</p>');-           }-       }-   });    ......+    document.addEventListener("DOMContentLoaded", function () {+        mediumZoom('.article img', {+            background: 'rgba(30, 30, 46, 0.5)',+        });+    });}(jQuery, window.moment, window.ClipboardJS, window.IcarusThemeSettings));

• 根据个人喜好，添加相应样式。建议调整 z-index 以确保放大后的图片在最上层。此外，可通过利用backdrop-filter实现模糊效果

  CSS

  .medium-zoom-overlay {  backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  z-index: 9998 !important;}img.medium-zoom-image {    border-radius: 5px;}.medium-zoom-image--opened {    z-index: 9999;    position: fixed;}

FAQ

部分图片放大后位置不在可视页面内

目前遇到这些问题的图片，都设置了zoom属性，CSS 中的 zoom 属性并非 W3C 标准，可能导致 medium-zoom 计算图片尺寸的位置出现偏差，从而影响图片居中和放大效果。
解决方案就是换用标准的 CSS 属性（如 width）来控制图片大小，VSCode中可以用Ctrl+Shift+H批量替换

- <img src="example.jpg" style="zoom:30%;" alt="示例图片">+ <img src="example.jpg" style="width:30%;" alt="示例图片">

PJAX 等异步加载机制导致的初始化问题

Hexo 一些主题（例如 Icarus）时，多采用 PJAX 或局部刷新加载页面。对于使用 PJAX 或异步加载的博客页面，需要在内容更新后重新初始化 medium-zoom。假设使用 PJAX，可以在 PJAX 完成事件中重新调用 mediumZoom：

// File: pjax.jsdocument.addEventListener('pjax:complete', () => {    // Plugin [MathJax] reload logic    if (window.MathJax) {        try {            window.MathJax.typesetPromise && window.MathJax.typesetPromise();        } catch (e) {            console.error('MathJax reload error:', e);        }    }+   mediumZoom('.article img', {+       background: 'rgba(30, 30, 46, 0.5)',+   });    // TODO pace stop loading animation});