題外話：
原本在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並直接顯示，並且支持完全的自定義各種格式。
- 它的作用：
 轉換成： <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