1 显示效果

想要知乎这种图片点击放大的效果，一查才知道是灯箱。

2 解决方案

2.1 修改 `config.toml`

在 config.toml文件中，添加如下代码：

1[params]
2  fancybox = true

2.2 创建 `render-image.html`

在此路径下创建文件：/layouts/_default/_markup/render-image.html

1{{if .Page.Site.Params.fancybox }}
2<div class="post-img-view">
3<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
4<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
5</a>
6</div>
7{{ end }}

2.3 添加内容

在 footer.html 中添加以下内容：

1{{if .Page.Site.Params.fancybox }}
2<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
4<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
5{{ end }}

FEATURED TAGS

ai a记录 branch b站 chroma style gallery cname copy dns drawio fancybox fuse giscus git git bug github githubpages gitignore gpt html hugo jmeter knn lastmod mark mermaid pages python reset shortcodes sqlite ssh svm typora vue3 windows 万历十五年人工智能代码块代码漏洞代码高亮优化冷笑话分支刘慈欣博客搭建博客改造图片放大域名增加新页面大模型天气预报字体字数统计快捷键性能测试悉达多折叠拐点搜索李娟标记流程图深度学习灯箱热力图爱的艺术白盒扫描短代码神经网络与深度学习脚本自定义视频访问量评论进度条阅读笔记随机浏览

Hugo：图片点击放大

1 显示效果

2 解决方案

2.1 修改 `config.toml`

2.2 创建 `render-image.html`

2.3 添加内容

目录

FEATURED TAGS

1 显示效果

2 解决方案

2.1 修改 config.toml

2.2 创建 render-image.html

2.3 添加内容

目录

FEATURED TAGS

2.1 修改 `config.toml`

2.2 创建 `render-image.html`