Hexo 折腾：利用 Fancybox 添加图片放大预览查看功能

在之前的博客中，有的图片因为页面宽度或者高度的限制，显得比较小，不是很清晰，而我目前使用的主题是 hexo-theme-material ，版本为 1.5.2，该版本主题本身未加入图片预览功能，所以就自己折腾来加入图片点击放大预览效果。

考虑到之前使用的主题 hexo-theme-next 中已经有了图片预览功能。next 主题使用 Fancybox 库实现图片预览。Fancybox 是一个基于 jQuery 的可高度定制化的轻量级库，可以用于显示图片、视频，并可以响应很多交互操作。因为 next 主题使用的 v2 版本的 fancybox，而官方弃用了 fancybox v2 并推荐使用 fancybox v3，所以本文主要参照 fancybox 的官方文档并结合 material 主题结构特点折腾出图片查看功能。

折腾

主题配置配置中新增 fancybox 配置项

为了提高 material 主题的可扩展性和可控制性，在 主题配置 文件中加入 fancybox 字段：

# Fancybox support
fancybox: true

下载fancybox库

点击这里下载最新的 fancybox 库，解压缩至 /theme/material/source/js/fancybox/ 目录下，这里贴出目录结构：

js
└── fancybox
      ├── jquery.fancybox.min.css
      └── jquery.fancybox.min.js

下载下来的 fancybox 只保留了 jquery.fancybox.min.css 和 jquery.fancybox.min.js 文件，其他的非必需。

编写js将fancybox应用到页面中

参考 next 主题的 /next/source/js/src/utils.js , 我在 /material/source/js/ 下新增了 wrapImage.js 用于在指定的 <img> 外裹一层 fancybox 所需要的属性（前端不熟，js写的可能很次 ORZ ）：

$(document).ready(function() {
    wrapImageWithFancyBox();
});

/**
 * Wrap images with fancybox support.
 */
function wrapImageWithFancyBox() {
    $('img').not('.sidebar-image img').not('#author-avatar img').not(".mdl-menu img").not(".something-else-logo img").each(function() {
        var $image = $(this);
        var imageCaption = $image.attr('alt');
        var $imageWrapLink = $image.parent('a');

        if ($imageWrapLink.size() < 1) {
            var src = this.getAttribute('src');
            var idx = src.lastIndexOf('?');
            if (idx != -1) {
                src = src.substring(0, idx);
            }
            $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a');
        }

        $imageWrapLink.attr('data-fancybox', 'images');
        if (imageCaption) {
            $imageWrapLink.attr('data-caption', imageCaption);
        }

    });

    $().fancybox({
        selector: '[data-fancybox="images"]',
        thumbs: false,
        hash: true,
        loop: false,
        fullScreen: false,
        slideShow: false,
        protect: true,
    });
}

上述代码中，thumbs, hash, loop 等都是 fancybox 支持的属性，更多具体属性可参考 Fancybox Options

head模版中引入 fancybox 库

由于我们需要在 html 的 <head> 标签中引入 fancybox js库，所以我们找到 <head> 标签对应的模版文件 /material/layout/_partial/head.ejs, 利用之前配置的 fancybox 配置项在 head.ejs 中引入 fancybox:

<!-- fancybox support -->
<% if(theme.fancybox === true && page.fancybox !== false) { %>
  <!-- for theme: default is false -->
  <!-- for page: default is true -->
  <%- jsLsload({path:('js/fancybox/jquery.fancybox.min.js'), key:'fancybox_js'}) %>
  <%- jsLsload({path:('js/wrapImage.js'), key:'wrap_image_js'}) %>
  <%- cssLsload({path:('js/fancybox/jquery.fancybox.min.css'), key:'fancybox_css'}) %>
<% } %>

注意：如果有单独的页面不需要使用 fancybox，可以在页面的 front-matter 中关闭：

fancybox: false

以上，重新生成静态网页，会发现网页源码中会新增类似如下内容：

<head>
	<!-- ... -->
	<!-- fancybox support -->
  <script>lsloader.load("fancybox_js","/js/fancybox/jquery.fancybox.min.js?t2LXoiIDGJmos9j6jmohzw==", true)</script>
  <script>lsloader.load("wrap_image_js","/js/wrapImage.js?2z+b2rMZFAJ9HG9/nm3U9g==", true)</script>
	<!-- ... -->
</head>

至此，图片点击放大预览效果已实现，撒花 ✿✿ヽ(ﾟ▽ﾟ)ノ✿

展示

点击图片进行浏览：

参考

fancyBox3 Documentation