Hugo：添加图片点击放大功能
前言 通过 FancyBox 给 Hugo 博客添加图片点击放大功能。 配置 在 config/_default/params.yaml 中添加配置开关： 1 fancybox: true 新建 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 }} 在 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 }} 使用语法： ...