幻蓝小站

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 14|回复: 0

Hugo 使用 Fancybox 实现图片灯箱/放大功能

[复制链接]

6851

主题

6854

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
20614
幻蓝 发表于 2022-11-25 09:42:12
1.修改网站根目录下的 config.toml 或者 config.yaml 文件,我的配置文件为 toml 格式,yaml 需要自行调整格式,在 [param] 参数下添加以下内容:

  1. [param]

  2.     fancybox = true
复制代码

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

/layouts/_default/_markup/render-image.html
编辑 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 }}
复制代码

3.在你主题 layouts/partials 目录下的 head.html 或者 footer.html 中添加:

  1. {{if .Page.Site.Params.fancybox }}

  2. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

  3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />

  4. <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

  5. {{ end }}
复制代码

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

不过通过 Markdown hooks 的方式修改图片会有一个小问题,就是在图片的上面和下面会出现空白的 <p></p> 标签

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|幻蓝小站 ( 黔ICP备18008076号-1 )|网站地图

GMT+8, 2022-12-3 00:21

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表