使Simple主题支持图片点击放大
在使用 hexo 主题模版 hexo-theme-simple99 的时候,发现该模版并不支持数学公式的渲染,随即动手开始改造改模版使其支持图片点击放大。
修改步骤
主题配置
为了提高主题的可扩展性和可控制性,在 主题配置
文件中加入 fancybox
字段:
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
我在 /simple/source/js/
下新增了 wrapImage.js
用于在指定的 <img>
外裹一层 fancybox
所需要的属性
$(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
:
<!-- 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 -->
至此,图片点击放大预览效果已实现,撒花 ✿✿ヽ (゚▽゚) ノ✿