前言

通过 FancyBox 给 Hugo 博客添加图片点击放大功能。

配置

  1. 在 config/_default/params.yaml 中添加配置开关：
1

fancybox: true
  1. 新建 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 }}
  1. 在 layouts/partials下的 extend_head.html 或者 extend_footer.html 中添加：
1
2
3
4
5
6

<!-- FancyBox -->
{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
{{ end }}

使用语法：

1

![测试图片](图片链接)

预览效果：

测试图片

FancyBox 集成到 Figure Shortcode 中

修改 layouts/shortcodes/figure.html 里面的 <a> 标签为下面的内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<a 
    {{- if and (.Page.Site.Params.fancybox) (not (.Get "link")) }} 
        data-fancybox="gallery" 
    {{- end -}}
    {{- if .Get "link" -}} 
        href="{{ .Get "link" }}" 
    {{- else -}} 
        href="{{ .Get "src" | safeURL }}" 
    {{- end -}}
    {{- with .Get "target" }} target="{{ . }}"{{ end -}}
    {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
>
......
{{- if or (.Page.Site.Params.fancybox) ( .Get "link") }} </a>{{ end -}}

使用语法：

1

{{< figure src="https://69A69.github.io/picx-images-hosting/20250313/hly.7egxg4pqnu.webp" title="绘梨衣" caption="Sakura & 绘梨衣 の Rilakkuma" >}}

预览效果：

Sakura & 绘梨衣 の Rilakkuma
绘梨衣

Sakura & 绘梨衣 の Rilakkuma

FancyBox参考