使Simple主题支持图片点击放大

在使用 hexo 主题模版 hexo-theme-simple99 的时候，发现该模版并不支持数学公式的渲染，随即动手开始改造改模版使其支持图片点击放大。

修改步骤

主题配置

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

1
fancybox: true

下载 fancybox 库

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

1
2
3
4
js
└── fancybox      
			├── jquery.fancybox.min.css      
			└── jquery.fancybox.min.js

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

编写js

我在 /simple/source/js/ 下新增了 wrapImage.js 用于在指定的 <img> 外裹一层 fancybox 所需要的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function() {
    $('img').not('.notice img').not('.copyright-wrap 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);
        }
    });
});

head的ejs模版中引入js和css

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

1
2
3
4
5
6
7
<!-- fancybox 图片点击放大插件 start -->
<% if(theme.fancybox === true && page.fancybox !== false) { %>
  <%- js('js/fancybox/jquery.fancybox.min') %>
  <%- js('js/wrapImage') %>
  <%- css('js/fancybox/jquery.fancybox.min') %>
<% } %>
<!-- fancybox 图片点击放大插件 end -->

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

参考博文