Hugo相册组件

作者现在用的主题为hugo-theme-stack，其借鉴了 Typlog 的相册语法，并且支持PhotoSwipe 图片灯箱，相册和灯箱功能还算丰富。一位朋友需要在博客放些图片也就有了相关的需求。

然后无意中找到了hugo-shortcode-gallery这个项目，个人感觉是功能上最丰富的。不过功能丰富肯定代表资源大或是容易冲突。

# 介绍

是一款Hugo短代码主题组件，在hugo的md文件中使用短代码即可（不需要``）。能够将图片自动渲染为缩略图并以网格（栅栏）展示，点击图片可放大展示（灯箱）。

# 项目地址

Demo看着还是挺棒的。

个人见解：

个人以为jQuery不太文明。
在我的主题中使用全屏会错位。

使用此项目后理解到Hugo shortcode（短代码）就是Hugo的插件一样的存在。

# 使用

# 安装

如果使用git管理项目可以采用子模块管安装

1
git submodule add https://github.com/mfg92/hugo-shortcode-gallery.git themes/hugo-shortcode-gallery

toml写法如下

1
theme = ["your-main-theme", "hugo-shortcode-gallery"]

json写法如下

1
2
3
theme: 
    - hugo-theme-stack
    - hugo-shortcode-gallery

如不使用git管理的话建议添加 assetDir = "assets"（toml），assetDir: assets（json）以保证按钮图标正常显示。

使用只需要在文章中添加以下内容(以json为例)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{< gallery
match="images/*"
sortOrder="desc"
rowHeight="150"
margins="5"
thumbnailResizeOptions="600x600 q90 Lanczos"
showExif=true
previewType="blur"
embedPreview="true"
>}}

需要在文章目录下创建images文件夹（可自行修改目录）并将图片放置其中。

# 参数与配置

没有jQuery的主题需要在短代码中添加 loadJQuery=true。
rowHeight可以设置图片展示时的行高，margin可以设置图片间的距离
thumbnailResizeOptions有三个参数，缩略图大小；图片压缩质量；重采样类型。如下：
thumbnailResizeOptions="600x600 q90 Lanczos"
其中重采样类型可以参考hugo文档image processing
previeType是预加载前的展示方式，可选透明 blur，颜色 color与无 none。
embedPreviewbase64压缩不过多解释，建议开启。
thumbnailHoverEffect是至悬停放大的动画效果，可选值为 none与 enlarge。
imageResizeOptions和 thumbnailResizeOptions都可以设置图片展示大小，省略则默认以图片大小展示。
lastRow设置最后一行的展示方式，参数分别为 justify，nojustify和 hide。
showExif设置为 true可以在图片灯箱时展示图片的元数据，不过多赘述。展示需要在配置文件中添加如下内容（以toml为例）：
1 2
[imaging.exif] includeFields = ".*"
filterOptions可以能够添加分类功能（基于元数据）与全屏展示按钮，并自动开启 storeSelectedFilterInUrl将以分类添加至Url中，具体配置可以参考下方：
1
filterOptions="[{label: 'All', tags: '.*'}, {label: 'Birds', tags: 'bird'}, {label: 'Macro', tags: 'macro'}, {label: 'Insects', tags: 'insect'}]"

引入数据文件

图像的元数据可以通过 sidecar文件覆写，文件名与图片相同并在其后加上 .meta即可，其格式必须为json，如下所示：

1
2
3
4
5
6
{
"Tags": ["macro","insect"],
"Title": "Maya the Bee",
"ColorLabels": "RG",
"Rating": 3
}

全局设置上诉所有配置 {{< gallery >}}，如下：

All settings can be done globally in the site’s config.toml, for that the prefix gallery has to be used. E.g. galleryLoadJQuery instead of loadJQuery.

1
2
3
4
Params:
    galleryLoadJQuery: true
    galleryMatch: images/*
    ...

注意：使用时需要加上 Params然后将参数开头大写并加上前缀gallery。

具体说明可以查看仓库readme与分支example_site,example还是挺有帮助的，最后帮我解决了百思不得其解的全局设置问题。

不管是主题自带的Typlog语法还是此组件都可以根据Branch Bundle创建单独的相册页面。