Hugo Fancybox实现图片灯箱效果

博客创建成功之后，发现文章中的图片看不清。可是图片本身是很清晰的，在新tab打开是好的。因此，想要实现点击图片自动放大的效果，即灯箱效果。

查找方案

由于我们使用的是Hugo，我们找一下是否有现成方案，网络搜索找到一篇Hugo Fancybox，可以参考其中的方法。使用Fancybox。

实施方案

找到官网的fancybox用法，发现和上面的博客用法不一样，仔细查看发现使用的js不一样。我们以官网的最新用法为例。

添加header

找到layouts/partials/head.html或者其他会出现在<head>中的地方，增加加载js的代码。我们从cdnjs找到fancyapps-ui 。由于我们的首页没有图片，因此我们判断了IsHome，在首页时不加载fancyapps，让首页加载更快。

1
2
3
4

{{ if and (not .IsHome) .Site.Params.usefancyapp }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.umd.min.js" integrity="sha512-VNk0UJk87TUyZyWXUFuTk6rUADFyTsVpVGaaFQQIgbEXAMAdGpYaFWmguyQzEQ2cAjCEJxR2C++nSm0r2kOsyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.min.css" integrity="sha512-s4DOVHc73MjMnsueMjvJSnYucSU3E7WF0UVGRQFd/QDzeAx0D0BNuAX9fbZSLkrYW7V2Ly0/BKHSER04bCJgtQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{{ end }}

修改render-image

添加layouts/_default/_markup/render-image.html文件，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{{if .Page.Site.Params.usefancyapp }}
  <div class="post-img-view">

    <a data-fancybox="gallery" href="{{ .Destination | safeURL }}" data-caption="{{ .Text }}" >
        <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
    </a>
  
  </div>
{{ end }}

增加event handler

找到layouts/partials/footer.html，添加event handler

1
2
3
4
5
6
7
8

{{ if and (not .IsHome) .Site.Params.usefancyapp }}
<script>
  Fancybox.bind("[data-fancybox]", {
  // Your custom options
});
</script>

{{ end }}

修改config.toml

在params下面，增加usefancyapp

1
2

[params]
  usefancyapp = true

查看效果

更新成功之后，点击图片，就可以看到灯箱效果。

灯箱

视频演示


Watch on YouTube