插件介绍
采用的是nanogallery2插件，具体的配置文档：nanogallery2用法指导
用法
1.创建文件
在layouts/shortcodes下面创建文件。
添加文件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>
2.使用方法
{删掉{< galleries >}}
{删掉{< gallery src="/images/fendou.png" title="命运">}}
{删掉{< /galleries >}}
