给Hexo主题Material X添加图片放大功能

概述

我现在的博客是基于hugo自己开发的主题，有兴趣可以去github上看。本篇内容适用与所有静态博客，原理都是一样的。（2020-04-29）

五一假期趁着没事给博客加了图片放大功能。

使用过GitHub Pages的朋友都知道，官方有一些列的主题可以供大家选择，除此之外主要还有Hexo和Jekyll两种静态站点生成框架，更是提供了丰富的主题列表，如Hexo Theme list。

我的博客是基于Hexo的，每次在Issues页面写完博客，会通过Webhooks同步到服务器，最后Hexo部署到域名下。 因为核心是Hexo，所以可以很容易的切换Hexo主题，最近换到了Material X主题，但是该主题没有图片放大功能，虽然在作者的TODO里面有这一项，但是过了一段时间依然没有添加，并且作者的上游对主题修改还挺大，同步之后不太理想，同时还增加了学习成本，所以暂时放弃同步上游，自己开发一个图片放大功能。

开始操作

首先切到Hexo项目根目录，也就是执行hexo init dir生成的目录，切到主题目录的source目录下，类似这样的themes/material-x/source，这里面放了我们需要引入的静态文件，js、css等。

目录结构不复杂，描述起来不是很方便，研究之前大概看一下就明白了。

图片放大插件使用的fancybox，使用起来很方便。

注意这里，为了项目的结构化，我们可以把fancybox的js和css分别放到source目录下相应的位置，我这里面没有这么做也是为了同步作者的修改，所以使用的git的submodule方式，都放在了source下的js目录里面。基于以上，我们在source/js目录下执行：

git submodule add https://github.com/fancyapps/fancybox.git

然后会自动clone项目到当前目录下。

修改主题文件

添加好第三方插件后，我们需要在主题文件内引入，Material X主题需要在两个地方进行修改（不同的主题文件名可能不同），如下：

在themes/material-x/layout/_partial/head.ejs下引入css：

<link rel="stylesheet" href="/js/fancybox/dist/jquery.fancybox.min.css">

在themes/material-x/layout/_partial/scripts.ejs里引入js：

<script src="/js/fancybox/dist/jquery.fancybox.min.js"></script>

注意这里的路径是绝对路径，因为执行hexo g生成的静态文件，是在项目目录的public下，这个目录也就是网站的根目录。我们添加在themes/material-x/source目录下的文件都会copy到public目录下。

添加js文件

引入文件完成后，我们需要根据页面的元素来添加自己的js代码来使插件生效，如下是我添加的代码（参考网友的，代码基于主题做了删减，链接在文后）。基本思路就是给img标签添加上插件需要的属性。

在目录themes/material-x/source/js下添加wrapimg.js文件：

$(document).ready(function() {
    wrapImageWithFancyBox();
});
/**
 * Wrap images with fancybox support.
 */
function wrapImageWithFancyBox() {
    $('img').not('.sidebar-image img').not('#author-avatar img').not(".mdl-menuimg").not(".something-else-logo img").not('.avatar').not('.share-body img').each(function() {
        var $image = $(this);
        var alt = $image.attr('alt');
        var src = $image.attr('src');
        $imageWrapLink = $image.wrap('<a data-fancybox=images data-caption="'+ alt +'" href="' + src + '"></a>');
    });

    // fix微信分享二维码需要开新页面查看问题
    $('.qrcode').attr('data-fancybox', 'images');

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

引入js文件

再次修改主题文件，添加上我们加入的js文件，这里不同的主题方法不一，可以参考已有的来添加，或者直接用script标签来引入。

在themes/material-x/layout/_partial/scripts.ejs里引入js：

<%- js(['js/app.js', 'js/search.js', 'js/clipboard-use.js', 'js/wrapimg.js']) %>

到这里所有的步骤就都完事了，部署上就可以了。

（完）