photo swipe 是目前最理想的一种图库解决方案，MIT 协议，且性能也足够好，使用和兼容问题也没遇到那么多,但目前还有一个问题就是第一次点击时会触发图片原始链接，而不是打开灯箱

主要就是两个 shortcodes 文件

<a href="{{ .Get "src" }}" data-pswp-width="{{ .Get "width" | default 150 }}" data-pswp-height="{{ .Get "height" | default 150 }}" class="gallery-item" >
    <img src="{{ .Get "src" }}" alt="Beautiful Landscape" style="width: 100%; height: auto;" class="gallery-item">
</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">
    <style>
        .post-content a {
            box-shadow: none;
        }
        #my-gallery {
            column-count: 2;
            column-gap: 0px;
        }
        #my-gallery a {
            display: block;
            overflow: hidden; /* 防止内容溢出 */
            border-radius: 10px;  /* 圆角 */
            margin:  0 2px 4px 2px; /* 边距 */
        }
        #my-gallery img {
            width: 100%;
            transition: transform 0.4s ease; /* 平滑变换效果 */
            margin: 0;
        }
        #my-gallery a, #my-gallery img {
            padding: 0;
            border: none;
        }
        #my-gallery a:hover img {
            transform: scale(1.1); /* 鼠标悬停时放大图片 */
        }
    </style>
</head>
<body>
    <div id="my-gallery">
        {{ .Inner }}
    </div>

    <script type="module">
        import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe-lightbox.esm.min.js';
        import PhotoSwipe from 'https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.min.js';

        const lightbox = new PhotoSwipeLightbox({
            gallery: '#my-gallery',
            children: 'a',
            pswpModule: () => Promise.resolve(PhotoSwipe)
        });
        lightbox.init();
    </script>

</body>
</html>

使用方法

{{< PhotoSwipes >}}
{{< PhotoSwipe src="https://s2.loli.net/2024/04/28/AYskmM68Eg4Cy7t.jpg" width="3000" height="4000" >}}
{{< /PhotoSwipes >}}