原文地址: https://www.zatp.com/post/hugo-fancybox/

收藏时间: 2022-08-05 10:53:50

文章分类: hugo

文章标签：Hugo,Fancybox,图片灯箱

我的小破站一直都在用 Fancybox 实现图片灯箱效果，但是本站是用 Typecho 搭建的，使用 PHP 直接替换图片的链接格式就好了，实现起来比较简单。前段时间用 Hugo 搭建了一个静态网站，感觉实现起来就比较麻烦 ~主要是懒~ ，所以一直搁置了，现在需求已经迫在眉睫了，花了点时间研究一些。

最开始的思路是通过 js 实现，但效率似乎不高，实现起来也麻烦。对于 Hugo 本身的 Markdown 渲染方式也没有过多的了解，网上的方法大多是引入 Fancybox 组件后通过 shortcode 的方式调用 html 实现，但这样的话以前文章的图片还得去一个一个修改，平时写起来也麻烦。

好在无意中看到了 Maupassant 主题的一个 PR，查阅文档后发现他的方法是新增一个 render-image.html 文件，通过 Markdown Render Hooks 的方式覆盖 Hugo 的 Markdown 渲染方式，就可以轻松的解析和处理图片内容，结构如下：

1
2
3
4
5
6

layouts
└── _default
    └── _markup
        ├── render-image.html
        ├── render-image.rss.xml
        └── render-link.html

官方解释可以通过该文件实现替换链接，修改 img 样式，例如添加 target=_blank 属性等功能。

因此，只要借助这个方法，就可以轻松的实现 Fancybox 的功能了，你只需要做以下三步：

1.修改网站根目录下的 config.toml 或者 config.yaml 文件，我的配置文件为 toml 格式，yaml 需要自行调整格式，在 [param] 参数下添加以下内容：

1
2

[param]
    fancybox = true

2.在你的主题目录下创建以下路径和文件：

1

/layouts/_default/_markup/render-image.html

编辑 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.在你主题 layouts/partials 目录下的 head.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 }}

接下来就可以直接 hugo server 看看效果了，如果你后面不想在使用 Fancybox，只需要将第一步中的 true 改为 false 即可。其实如果常态化使用的话，就不需要判断了，可以跳过第一步，把第二步和第三步中的 {{if .Page.Site.Params.fancybox }} 和 {{ end }} 去掉。

不过通过 Markdown hooks 的方式修改图片会有一个小问题，就是在图片的上面和下面会出现空白的 <p></p> 标签，如果你感兴趣的话可以看看这个具体讨论的 issue。

最后吐槽下一直都觉得 Typecho 算比较折腾了，现在发现 Hugo 更加折腾…