博客 | Hugo 博客使用 Fancybox

这本来是来自于 atpX 博客上的一篇文章——《Hugo 使用 Fancybox 实现图片灯箱/放大功能》，个人把它应用到了自己的 ICS-Hugo-Theme 小破主题之中，特意记录一下。

最开始的思路是通过 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
  1. 在你的主题目录下创建以下路径和文件：
/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 }}
  1. 在你主题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。