| hexo

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 =“ 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>
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 =“ 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>
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

现在已经大功告成，可以实现效果了！

ESC