给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://mutex.top/posts/f9e0f6c9/
- 发表日期:2019年5月4日
- 版权声明:本文章为原创,采用《知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议》进行许可