Hugo Narrow 支持图片点击放大功能,使用 PhotoSwipe 库创建灯箱,同时支持 justified 布局、Masonry 布局和 grid 布局。使用原生 markdown 输入即可创建图库。

图库参数

params.yaml
 1gallery:
 2  enabled: true
 3  defaultLayout: justified # justified, masonry, grid
 4  gap: 10
 5  targetRowHeight: 200
 6  lastRowBehavior: center # left, center, right, fill, hide
 7  columnWidth: 200
 8  columns: 4 # auto 或具体数字
 9
10# PhotoSwipe 灯箱
11lightbox:
12  enabled: true
13  bgOpacity: 0.8
14  showHideAnimationType: zoom
15  showAnimationDuration: 333
16  hideAnimationDuration: 333
点击展开查看更多

图库使用

直接使用 markdown 方式引入图像资源,每行一个资源链接,中间无空行的图像组视为同一个图库。 下面的示例为两个图库,第一个图库包含两个图像资源,第二个图库包含三个图像资源。

MARKDOWN
1![](images/image01.jpg)
2![](images/image02.jpg)
3
4![](images/image03.jpg)
5![](images/image04.jpg)
6![](images/image05.jpg)
点击展开查看更多

版权声明

作者: Hugo Narrow

链接: https://hugo-narrow-docs.vercel.app/zh-cn/docs/%E5%9B%BE%E5%BA%93/

许可证: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

开始搜索

输入关键词搜索文章内容

↑↓
ESC
⌘K 快捷键