看到一篇文章写了 Hugo 的图片点击放大功能，自己也试了一下，记录一下防止忘记。
配置
首先在站点配置文件中添加配置开关，不用了可以设置为 false
TOML
[param]
fancybox = true在站点目录新建文件 ~/layouts/_default/_markup/render-image.html，写入内容：
HTML
{{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 中添加：
HTML
{{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 }}去掉即可。
评论