title: “Hugo博客添加相册功能” date: 2022-05-05T00:17:58+08:00 lastmod: 2022-05-05T00:17:58+08:00

author: [“Sulv”]

keywords: categories: tags: [建站]

description: “Hugo博客添加相册功能，采用nanogallery2插件”

weight: slug: "" draft: true # 是否为草稿 comments: true reward: true # 打赏 mermaid: true #是否开启mermaid showToc: true # 显示目录 TocOpen: true # 自动展开目录 hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等 disableShare: true # 底部不显示分享栏 showbreadcrumbs: true #顶部显示路径 cover: image: "" #图片路径例如：posts/tech/123/123.png caption: "" #图片底部描述 alt: "" relative: false

1. 插件介绍

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

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 >}}

效果如下：