看到一篇文章写了 Hugo 的图片点击放大功能，自己也试了一下，记录一下防止忘记。

配置

首先在站点配置文件中添加配置开关，不用了可以设置为 false

1
2

[param]
fancybox = true

在站点目录新建文件 ~/layouts/_default/_markup/render-image.html，写入内容：

1
2
3
4
5
6
7

{{if .Page.Site.Params.fancybox }}
<div class="post-img-view">
<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</a>
</div>
{{ end }}

在 header.html 或者 footer.html 中添加：

1
2
3
4
5

{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{{ end }}

如果不想要这个功能只需要在配置中的 true 改为 false 即可。

如果想一直使用，header 或 footer 中 {{if .Page.Site.Params.fancybox }} 和 {{ end }} 去掉即可。

参考