Hugo博客添加相册功能

素履coder

发布于 2023-03-27 10:20:06

6530

发布于 2023-03-27 10:20:06

文章被收录于专栏：素履coder素履coder

1. 插件介绍

我采用的是nanogallery2这个插件，里面有具体的配置文档： Titlenanogallery2用法指导

2. shortchodes配置

在layouts/shortcodes下面添加两个文件：gallery.html和galleries.html，其中gallery.html里面放入如下代码：

<a href="{{ .Get "src" }}" data-ngThumb="{{ .Get "src" }}">{{ .Get "title" }}</a>

在galleries.html里面放入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nanogallery2@3.0.5/dist/css/nanogallery2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/nanogallery2@3.0.5/dist/jquery.nanogallery2.min.js"></script>
</head>
<body>

<div data-nanogallery2='{
	 "thumbnailDisplayTransition":          "none",
     "thumbnailDisplayTransitionDuration":  500,
     "thumbnailDisplayInterval":            30,
     "galleryDisplayTransition":            "none",
     "galleryDisplayTransitionDuration":    500,
     "galleryDisplayMode": "rows",
     "thumbnailDisplayOutsideScreen": "false",
     "eventsDebounceDelay": 10,
     "thumbnailL1BorderHorizontal": 0,
     "thumbnailL1BorderVertical": 0,
     "thumbnailLabel": {
        "titleFontSize": "0.6em"
     },
     "thumbnailHoverEffect2": "image_scale_1.00_1.10|label_backgroundColor_rgba(0,0,0,0)_rgba(255,255,255,0)",
     "galleryTheme": {
        "thumbnail": {
            "borderRadius": "8px"
        }
     },
     "thumbnailToolbarImage": {
        "topLeft": "",
        "topRight": "",
        "bottomLeft": "",
        "bottomRight": ""
     },
     "viewerToolbar":   {
        "display": true,
        "standard": "label"
     },
     "viewerTools":     {
        "topLeft":    "pageCounter, playPauseButton",
        "topRight":   "downloadButton, rotateLeft, zoomButton, fullscreenButton, closeButton"
     },
     "viewerGalleryTWidth": 40,
     "viewerGalleryTHeight": 40
}'>
    {{ .Inner }}
</div>
</body>
</html>

data-nanogallery2里面的配置可以在官方文档查看各种配置方法，调整出合适自己的样式，也可以直接使用我已经配置好的。

3. 使用方法

[comment]: <> 使用的时候把前面的a去掉
{a{< galleries >}}
{a{< gallery src="https://www.sulvblog.cn/image/16_IMG_20220430_202353.png" title="香克斯">}}
{a{< gallery src="https://www.sulvblog.cn/image/17_IMG_20220430_202228.png" >}}
{a{< gallery src="https://www.sulvblog.cn/image/19_IMG_20220430_200901.png" >}}
{a{< gallery src="https://www.sulvblog.cn/image/16_IMG_20220430_202353.png" title="香克斯" >}}
{a{< gallery src="https://www.sulvblog.cn/image/17_IMG_20220430_202228.png" >}}
{a{< gallery src="https://www.sulvblog.cn/image/19_IMG_20220430_200901.png" >}}
{a{< gallery src="https://www.sulvblog.cn/image/16_IMG_20220430_202353.png" title="香克斯" >}}
{a{< gallery src="https://www.sulvblog.cn/image/17_IMG_20220430_202228.png" >}}
{a{< gallery src="https://www.sulvblog.cn/image/19_IMG_20220430_200901.png" >}}
{a{< /galleries >}}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-03-25，如有侵权请联系 cloudcommunity@tencent.com 删除

官方文档