Hugo博客添加图片点击放大功能
通过 FancyBox 给 Hugo 博客添加图片点击放大功能。
前言
看到一篇文章写了 Hugo 的图片点击放大功能，自己也试了一下，记录一下防止忘记。
配置
首先在站点配置文件中添加配置开关，不用了可以设置为 false
1[param]
2fancybox = true
在站点目录新建文件 ~/layouts/_default/_markup/render-image.html，写入内容：
1{{if .Page.Site.Params.fancybox }}
2<div class="post-img-view">
3<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
4<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
5</a>
6</div>
7{{ end }}
在 header.html 或者 footer.html 中添加：
1{{if .Page.Site.Params.fancybox }}
2<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
4<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
5{{ end }}
如果不想要这个功能只需要在配置中的
true改为false即可。如果想一直使用，
header或footer中{{if .Page.Site.Params.fancybox }}和{{ end }}去掉即可。
参考
最后修改于 2024-08-21
