嗯。。。。。没想好怎么做
前言
拖了这么久，决定用fancybox.js来搞个图集凑合凑合
简单了解fancybox
参照官网
官网介绍如下：JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.看不懂的路过
这里我们使用fancybox3，首页点击下载
image
往下拉可查看demo效果
image
下载至桌面，解压得到该文件夹。
image
浏览器下打开该文件，阅读文档
image
在How to Use下面查阅代码例子
image
<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
<img src="thumbnail_1.jpg" alt="" />
</a>
<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
<img src="thumbnail_2.jpg" alt="" />
</a>
//我们需要的基本代码就是这样
<script>
$('[data-fancybox="gallery"]').fancybox({
// Options will go here
});
</script>
在Options下查看fancybox的一些参数
image
在hexo博客中使用fancybox
方案一
在文章.md文件中使用raw标签直接插入如下代码：
<link rel="stylesheet" href="jquery.fancybox.min.css">
<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
<img src="thumbnail_1.jpg" alt="" />
</a>
<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
<img src="thumbnail_2.jpg" alt="" />
</a>
<script src="jquery.fancybox.min.js"></script>
<script>
$('[data-fancybox="gallery"]').fancybox({
// Options will go here
});
</script>
这种方法有些太麻烦了，于是有了方案二。
方案二
在文章.md文件中使用raw标签直接插入如下代码:
<img class="hj_img" src="https://wx1.sinaimg.cn/large/006bYVyvgy1fr0tc3y3avj31kw0vzqv5.jpg">
<img class="hj_img" src="https://wx4.sinaimg.cn/large/006bYVyvgy1fr0ufullbkj31kw0vz4qq.jpg">
<img class="hj_img" src="https://wx4.sinaimg.cn/large/006bYVyvgy1fr0ug1074xj31kw0vr4qp.jpg">
<img class="hj_img" src="https://wx2.sinaimg.cn/large/006bYVyvgy1fr0ugfyw4aj31kw0vue82.jpg">
<img class="hj_img" src="https://wx4.sinaimg.cn/large/006bYVyvgy1fr0ug8ds8xj31kw0vxqv5.jpg">
接着使用js给他转换成需要的格式。
博主是在footer的模板下插入如下代码
//前面需要引入fancybox的css和js，这里省略
<secrpt>
(function() {
//前面部分是判断是标签否为图集的文章，根据需求可以舍弃
var arr = new Array();
var $tags = $('.post-tags').children('a');
$tags.each(function() {
arr.push($(this).html())
})
if (arr.indexOf("图集") !== -1) {
//如果是图集
$('.hj_img').each(function() {
$(this).wrap('<a class="fancybox" data-fancybox="gallery" href="' + $(this).prop("src") + '"></a>');
})
//初始化fancybox，padding设为0，loop设为false
$('.fancybox').fancybox({
padding: 0,
loop: false
});
}
})();
</script>
方案三
这里只提供个思路，因为方案二版的实现很简便，就没去折腾了。
大致思路即是修改maked.js生成渲染的规则，根据图集图片的特定标志，识别出来，把需要的a标签渲染出来。直接生成文件。
实现过程可参照我之前的两篇文章OwO-可爱的js表情符号插件和Lozad.js学习使用
支持作者请悦读百家号文章链接，谢谢~
网友评论