Jekyll添加FancyBox插件

2017-08-19

jekyll

一、简要

这是之前在GitHub Page上面使用博客功能的完善，之前每次传到GitHub上面的图片在博客里面都是显示压缩后的，导致很多代码细节都看不清。
Markdown 语法中的图片我们一般是如此写法：
```
![tag](url "name")
```

生成的 html 为

<image title="name" alt="name" src="url">

我们如果要使用 FancyBox 的话，则需要如下的链接才可
```
 <a href="url" id="id">
     <img src="url">
 </a>
```

二、使用

FancyBox 具体用法见http://fancyapps.com/fancybox/

首先编辑_includes文件夹中模板文件，在head.html中添加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">

在 footer.html 中添加：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
              <script>
                                // 给图片添加链接
                                $(document).ready(function() {
                                    $("p img").each(function() {
                                        var strA = "<a data-fancybox='gallery' href='" + this.src + "'></a>";
                                        $(this).wrapAll(strA);
                                    });
                                });
              </script>

将代码提交上去，重新打开你的博客，点击图片，就会出现图片灯箱效果

本文参考自：https://www.cnblogs.com/Grand-Jon/p/7397652.html