hexo引入fancybox优化图片视频查看效果

sakura

在这里插入图片描述

一、fancybox介绍

在我们平常阅读博文时,常遇到:图片太小,字看不清的情况
在这里插入图片描述
不怕,fancybox可以将你的图片放大!
在这里插入图片描述
强大的相册功能!
在这里插入图片描述
原理:给所有图片加一层a标签,并链接图片地址到蒙版层面上

简单源码:(多图)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset = utf-8”>
<title>我的页面</ title>

<!--CSS-->
<link rel = stylesheettype = text / csshref = 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>
1234567891011121314151617181920212223242526272829303132

视频:(弹窗播放)
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset = utf-8”>
<title>我的页面</ title>

<!--CSS-->
<link rel = stylesheettype = text / csshref = 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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445

文档:https://fancyapps.com/fancybox/3/docs/
中文翻译参考:jQuery 强大丰富的响应式弹出框插件 fancyBox3
很详尽很丰富,拿到手又有一点头大!本文是hexo-sakura主题博客整合fancybox插件实例的教程!

二、hexo中添加fancybox

1. 添加引用

  1. 分别在head.ejs和footer.ejs:删去zoom引用,只保留fancybox;
    在这里插入图片描述

  2. 在footer中添加cdn加速版jQuery引用

    完整的引用:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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>

    123456789101112131415

2.修改配置

hexo是md格式文件生成的静态页面,
说明一下node_modules\marked\lib\marked.js这个函数的作用:

  • marked.js是一个用JavaScript写的功能齐全的Markdown解析器和编译器。可以非常方便的在线编译Markdown代码为HTML并直接显示,并且支持完全的自定义各种格式。

  • 它的作用:

    1
    2
    3
    4
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200304135000622.png)
    转换成:
    <img data-action="zoom" src="https://img-blog.csdnimg.cn/20200304135000622.png" alt="在这里插入图片描述">
    123

我们要进一步转换成含a标签的fancybox可调用的样式:

1
2
3
4
<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>
123
  1. 修改静态文件

    1
    node_modules\marked\lib\marked.js

    ctrl+F 搜索

1
Renderer.prototype.image

函数,修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
};
12345678910111213141516171819202122

现在已经大功告成,可以实现效果了!