Hugo Shortcodes - Simple Gallery 简易画廊。使用 jquery 插件 justifiedGallery 和 view-image.js
layouts/shortcodes/gallery.html
单个页面只允许一个该画廊存在，默认开启 view-image.js 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| {{- $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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| {{- $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>
|
https://gitee.com/kkbt/www.ftls.xyz/blob/master/layouts/shortcodes/gallery2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| {{- $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
1
2
3
4
| {{< gallery >}}
https://example.com/1.jpg
https://example.com/2.jpg
{{< /gallery >}}
|
或者指定每行高度为 150
1
2
3
4
| {{< gallery 150 >}}
https://example.com/1.jpg
https://example.com/2.jpg
{{< /gallery >}}
|
多个允许版本：单个页面允许多个该画廊存在，默认不开启 view-image.js , 需要在最后一个画廊开启初始化 view-image。因此每行高度是必须的。使用 md5 区分，如果发送碰撞可加换行。
1
2
3
4
5
| {{< gallery 200 true >}}
https://cdn.ftls.xyz/images/2023/06/jxCOit.jpg
https://cdn.ftls.xyz/images/2023/06/0072Vf1pgy1foxk7h6p4zj31hc0u0asb.jpg
{{< /gallery >}}
|
从 URL 获取
1
| {{< gallery2 200 true "https://note.ftls.xyz/ZK/202309091936.md" >}}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| ### 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 >}}
|
