题外话:
原本在hexo-theme-sakura作者hojun的添加下有zoom功能,
我也乖乖根据配置进行调整,并参考实现了zoom.js缩放图片功能,只能简单缩放,不够美观,还会出现白屏的情况。我果断放弃了。
一、fancybox介绍
在我们平常阅读博文时,常遇到:图片太小,字看不清
的情况
不怕,fancybox可以将你的图片放大!
强大的相册功能!
原理:给所有图片加一层a标签,并链接图片地址到蒙版层面上
简单源码:(多图)
<!DOCTYPE html>
<html>
<head>
<meta charset =“ utf-8”>
<title>我的页面</ title>
<!--CSS-->
<link rel =“ stylesheet” type =“ text / css” href =“ jquery.fancybox.min.css”>
</head>
<body>
<!-- 一组图片 ,a标签的data-fancybox属性很重要 -->
<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>
<!-JS->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js">
<script>
$('[data-fancybox="images"]').fancybox({
thumbs : {
autoStart : true //缩略图
}
});
$('[data-fancybox]').fancybox({
protect: true,//图片右键不能下载
});
</script>
</body>
</html>
视频:(弹窗播放)
<!DOCTYPE html>
<html>
<head>
<meta charset =“ utf-8”>
<title>我的页面</ title>
<!--CSS-->
<link rel =“ stylesheet” type =“ text / css” href =“ jquery.fancybox.min.css”>
</head>
<body>
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
YouTube video
</a>
<a data-fancybox href="https://vimeo.com/191947042">
Vimeo video
</a>
<a data-fancybox data-width="640" data-height="360" href="video.mp4">
Direct link to MP4 video
</a>
<a data-fancybox href="#myVideo">
HTML5 video element
</a>
<video width="640" height="320" controls id="myVideo" style="display:none;">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
<!-- fancybox大图查看 需jq -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script>
$('[data-fancybox]').fancybox({
youtube : {
controls : 0,
showinfo : 0
},
vimeo : {
color : 'f00'
}
});
</script>
</body>
</html>
文档:https://fancyapps.com/fancybox/3/docs/
中文翻译参考:jQuery 强大丰富的响应式弹出框插件 fancyBox3
很详尽很丰富,拿到手又有一点头大!本文是hexo-sakura主题博客整合fancybox插件实例的教程!
二、hexo中添加fancybox
1. 添加引用
- 分别在head.ejs和footer.ejs:删去zoom引用,只保留fancybox;
- 在footer中添加cdn加速版jQuery引用
完整的引用:<link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all"> <!-- fancybox大图查看 需jq --> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script> $('[data-fancybox="images"]').fancybox({//可选 thumbs : { autoStart : true //缩略图 } }); $('[data-fancybox]').fancybox({//启用函数,必须 //protect: true //图片右键不能下载,可选 }); </script>
2.修改配置
hexo是md格式文件生成的静态页面,
说明一下node_modules\marked\lib\marked.js
这个函数的作用:
- marked.js是一个用JavaScript写的功能齐全的Markdown解析器和编译器。可以非常方便的在线编译Markdown代码为HTML并直接显示,并且支持完全的自定义各种格式。
- 它的作用:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200304135000622.png) 转换成: <img data-action="zoom" src="https://img-blog.csdnimg.cn/20200304135000622.png" alt="在这里插入图片描述">
我们要进一步转换成含a标签的fancybox可调用的样式:
<a data-fancybox="gallery" rel="group1 noopener" href="https://img-blog.csdnimg.cn/20200304135000622.png" target="_blank">
<img data-action="zoom" src="https://img-blog.csdnimg.cn/20200304135000622.png" alt="在这里插入图片描述">
</a>
- 修改静态文件
node_modules\marked\lib\marked.js
ctrl+F 搜索Renderer.prototype.image
函数,修改如下:
现在已经大功告成,可以实现效果了!Renderer.prototype.image = function(href, title, text) { // href = cleanUrl(this.options.sanitize, this.options.baseUrl, href); // if (href === null) { // return text; // } // var out = '<img src="' + href + '" alt="' + text + '"'; // if (title) { // out += ' title="' + title + '"'; // } // out += this.options.xhtml ? '/>' : '>'; // return out; if (this.options.baseUrl && !originIndependentUrl.test(href)) { href = resolveUrl(this.options.baseUrl, href); } var out = '<a data-fancybox="gallery" data-caption="'+text+'" href="'+href+'"><img data-action="zoom" src="' + href + '" alt="' + text + '"'; if (title) { out += ' title="' + title + '"'; } out += this.options.xhtml ? '/></a>' : '></a>'; return out; };
示例:demo