给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']) %>

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

参考链接

https://tianma.space/post/2208308547/index.html

(完)