Hugo Shortcodes - Simple Gallery

恐咖兵糖收录于类别博客

2023-09-08 2024-02-24 约 683 字预计阅读 2 分钟次阅读条评论

警告

本文最后更新于 2024-02-24，文中内容可能已过时。

Hugo Shortcodes - Simple Gallery 简易画廊。使用 jquery 插件 justifiedGallery 和 view-image.js

Code

layouts/shortcodes/gallery.html

简易版本

单个页面只允许一个该画廊存在，默认开启 view-image.js 。

html

{{- $content := .Inner -}}
<link href="https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css" rel="stylesheet">
<div id="mygallery">
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>
<script src="//tokinx.github.io/ViewImage/view-image.min.js"></script>
<script>
    const imageArray = "{{- $content -}}".trim().split('\n');

    imageArray.forEach((imageUrl) => {
        const anchor = document.createElement("a");
        anchor.href = imageUrl;
        anchor.classList.add("mygallery");

        const img = document.createElement("img");
        img.src = imageUrl // + "?image_process=quality,Q_10"; // 略缩图 - 使用 CDN 的图像处理
        img.alt = "";
        img.loading = "lazy";

        anchor.appendChild(img);
        document.getElementById("mygallery").appendChild(anchor);
    });

    $("#mygallery").justifiedGallery({
        rowHeight: {{ .Get 0 | default 200 }},
    });
    window.ViewImage && ViewImage.init('.mygallery');
</script>

允许多个画廊存在版本

单个页面允许多个该画廊存在，默认不开启 view-image.js , 需要在最后一个画廊开启初始化 view-image。

https://gitee.com/kkbt/www.ftls.xyz/blob/master/layouts/shortcodes/gallery.html

html

{{- $content := .Inner -}}
{{- $md5Hash := md5 $content -}}
{{- $md5Short := substr $md5Hash 0 8 -}}
<link href="https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css" rel="stylesheet">
<div id="{{- $md5Short -}}">
</div>
<script type="text/javascript" src="https://cdn.ftls.xyz/static/whispers/assets/js/view-image.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>
<script>

    "{{- $content -}}".trim().split('\n').forEach((imageUrl) => {
        const anchor = document.createElement("a");
        anchor.href = imageUrl;
        anchor.classList.add("gallery-img");

        const img = document.createElement("img");
        img.src = imageUrl + "?image_process=quality,Q_10"; // 略缩图 - 使用 CDN 的图像处理
        img.alt = "";
        img.loading = "lazy";

        anchor.appendChild(img);
        document.getElementById("{{- $md5Short -}}").appendChild(anchor);
    });

    $("#{{- $md5Short -}}").justifiedGallery({
        rowHeight: {{ .Get 0 | default 200 }},
    });
    if({{- .Get 1 -}} == true) {
        window.ViewImage && ViewImage.init('.gallery-img');
    }
</script>

从 URL 获取版本

https://gitee.com/kkbt/www.ftls.xyz/blob/master/layouts/shortcodes/gallery2.html

html

{{- $url := .Get 2 -}}
{{- $md5Hash := md5 $url -}}
{{- $md5Short := substr $md5Hash 0 8 -}}
<link href="https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css" rel="stylesheet">
<div id="{{- $md5Short -}}">
</div>
<script type="text/javascript" src="https://cdn.ftls.xyz/static/whispers/assets/js/view-image.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>
<script>
    fetch("{{ $url }}")
    .then(response => response.text())
    .then(text => {
        text.trim().split('\n').forEach((imageUrl) => {
        const anchor = document.createElement("a");
        anchor.href = imageUrl;
        anchor.classList.add("gallery-img");

        const img = document.createElement("img");
        img.src = imageUrl + "?image_process=quality,Q_10"; // 略缩图 - 使用 CDN 的图像处理
        img.alt = "";
        img.loading = "lazy";

        anchor.appendChild(img);
        document.getElementById("{{- $md5Short -}}").appendChild(anchor);
    });
        $("#{{- $md5Short -}}").justifiedGallery({
            rowHeight: {{ .Get 0 | default 200 }},
        });
        if({{- .Get 1 | default false -}} == true) {
            window.ViewImage && ViewImage.init('.gallery-img');
        }
    });
</script>

使用

默认每行高度 200

markdown

{{<  gallery  >}}
https://example.com/1.jpg
https://example.com/2.jpg
{{< /gallery >}}

或者指定每行高度为 150

markdown

{{<  gallery 150 >}}
https://example.com/1.jpg
https://example.com/2.jpg
{{< /gallery >}}

多个允许版本：单个页面允许多个该画廊存在，默认不开启 view-image.js , 需要在最后一个画廊开启初始化 view-image。因此每行高度是必须的。使用 md5 区分，如果发送碰撞可加换行。

markdown

{{< gallery 200 true >}}
https://cdn.ftls.xyz/images/2023/06/jxCOit.jpg
https://cdn.ftls.xyz/images/2023/06/0072Vf1pgy1foxk7h6p4zj31hc0u0asb.jpg

{{< /gallery >}}

从 URL 获取

markdown

{{< gallery2 200 true "https://note.ftls.xyz/ZK/202309091936.md"  >}}

Demo

Demo Shortcodes

markdown

### Demo 

#### Demo RowHeight 200

{{< gallery 200 >}}
https://cdn.ftls.xyz/images/2023/08/1688306399523.jpg
https://cdn.ftls.xyz/images/2023/08/404371.jpg
https://cdn.ftls.xyz/images/2023/07/1688620098526.jpg
https://cdn.ftls.xyz/images/2023/01/55754e0f99940687fc310e2752e86064c455772b.jpg
https://cdn.ftls.xyz/images/2023/01/41c5c54fccccad55d07201f04c40fff6a421abbf_raw.jpg
https://cdn.ftls.xyz/images/2023/01/103578274_p0_master1200.jpg
https://cdn.ftls.xyz/images/2022/12/IMG_20230105_104639_613.jpg
https://cdn.ftls.xyz/images/2022/12/1671200096483.jpg
https://cdn.ftls.xyz/images/2022/12/1671200047862.jpg
https://cdn.ftls.xyz/images/2021/12/309906.jpg
https://cdn.ftls.xyz/images/2022/12/543a81c509926239f2f7979a2468ec8a24d90ba1_raw.jpg
{{< /gallery >}}


#### Demo RowHeight 100

{{< gallery 100 true >}}
https://cdn.ftls.xyz/images/2023/06/jxCOit.jpg
https://cdn.ftls.xyz/images/2023/06/0072Vf1pgy1foxk7h6p4zj31hc0u0asb.jpg

{{< /gallery >}}

目录

Hugo Shortcodes - Simple Gallery

Code

简易版本

允许多个画廊存在版本

从 URL 获取版本

使用

Demo

Demo Shortcodes

Demo

Demo RowHeight 200

Demo RowHeight 100