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

hugo-fancybox

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

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

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] 参数下添加以下内容:

[param]
    fancybox = true

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

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

编辑 render-image.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 }}

3.在你主题 layouts/partials 目录下的 head.html 或者 footer.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 }}

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

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

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

Tags: Hugo

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.