之前博客的优化文章太长了，之后都分开来写了
显示效果
右上角依次为：放大图片、图片播放（如有多张）、批量查看图片和关闭
实现方法
1.修改config.toml或者hugo.yaml
我使用的是stack主题，配置文件为hugo.yaml，在params中添加
1
2
|
[params]
fancybox: true
|
2.创建并修改render-image.html
路径为/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 }}
|
3.导入和添加内容
在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 }}
|
来启用灯箱即可
