浏览模块

图库概览

HB Framework Authors 2023年4月13日 2 分钟阅读 模块 文档 图库
本页内容
赞助
图库概览

图库模块为图片提供了一个简单的布局。

Modulegithub.com/hbstack/gallery
Repository⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
UsageSee how to use modules.

站点配置

ParameterTypeDefaultDescription
paginatenumber24每页图片数量。
thumbnail_sizestringx640缩略图尺寸：[width]x[height]、[width]x 或 x[height]。
date_sort_orderstringdescdesc 或者 asc。
highlight_images_countnumber10高亮图片数量。
highlight_images_recursivebooleanfalse为 true 时，递归展示高亮图片。

params.toml

1[hb]
2  [hb.gallery]
3    date_sort_order = 'desc'
4    highlight_images_count = 10
5    highlight_images_recursive = false
6    paginate = 24
7    thumbnail_size = 'x640'

params.yaml

1hb:
2  gallery:
3    date_sort_order: desc
4    highlight_images_count: 10
5    highlight_images_recursive: false
6    paginate: 24
7    thumbnail_size: x640

params.json

 1{
 2   "hb": {
 3      "gallery": {
 4         "date_sort_order": "desc",
 5         "highlight_images_count": 10,
 6         "highlight_images_recursive": false,
 7         "paginate": 24,
 8         "thumbnail_size": "x640"
 9      }
10   }
11}

创建图库栏目

content/gallery/_index.md
1---
2title: Gallery
3---

创建相册

content/gallery/hello/index.md
 1---
 2title: "Hello"
 3date: 2022-01-01T16:16:05+08:00
 4resources:
 5  - src: 20230101000000.jpg
 6    params:
 7      author: Foo
 8      source: example.com
 9      highlight: true
10  - src: 20230102000000.png
11    params:
12      author: Bar
13      source: example.com
14      date: 2022-01-01T16:16:05+08:00
15---

然后将图片保存到 content/gallery/hello 目录，还可以进一步描述图片。

相册社交分享图片

以 feature* 形式命名的图片将会作为社交分享的图片，如 20220101-featured.jpg。

也可以使用 images 参数指定，仅适用于 static 图片和外部图片。

1images = ['https://example.com/images/feature.png']

1images:
2- https://example.com/images/feature.png

1{
2   "images": [
3      "https://example.com/images/feature.png"
4   ]
5}

图片属性

PropertyTypeRequiredDescription
srcstringY图片文件名。
paramsobject-图片参数。
params.authorstring-图片作者、画家。
params.sourcestring-图片来源。
params.datestring-图片日期，一般用于没有 EXIF 信息的图片。
params.highlightboolean-指示该图片是否高亮。

图片排序

图片按日期（EXIF 或由 params.date 指定的日期）以 date_sort_order 顺序进行排序。其他没有日期的图片则按名称字母排序，并追加到最后。

样式

NameTypeDefaultDescription
hb_gallery_album_item_gapstring5px条目间隔。
hb_gallery_album_item_border_radiusstring5px条目圆角大小。

以扁平样式为例。

params.toml

1[hb]
2  [hb.styles]
3    hb_gallery_album_item_border_radius = 0
4    hb_gallery_album_item_gap = '1px'

params.yaml

1hb:
2  styles:
3    hb_gallery_album_item_border_radius: 0
4    hb_gallery_album_item_gap: 1px

params.json

1{
2   "hb": {
3      "styles": {
4         "hb_gallery_album_item_border_radius": 0,
5         "hb_gallery_album_item_gap": "1px"
6      }
7   }
8}

图库扁平样式
图库扁平样式

如何创建子图库

你可以通过复杂的结构来管理图库和画册，以下列结构作为例子。

1$ tree content/gallery/events
2├── _index.md
3├── bar
4│   ├── ***.jpg
5│   └── index.md
6└── foo
7│   ├── ***.jpg
8    └── index.md

上述结构展示了一个 events 子图库，其包含两个画册：foo 和 bar。

如何于其他栏目使用图库布局

或许你打算修改 gallery 栏目，又或者将图片分离到不同的栏目，比如 photos，为此，你只需要于前言指定一个名为 type 的参数为 gallery。

  1. 创建图库 content/photos/_index.md。
1---
2title: Photos
3type: gallery
4---
  1. 创建相册 content/photos/foo/index.md，并将图片保存至 content/photos/foo。
1---
2title: Foo
3type: gallery
4---
  1. 至此大功告成，新图库可通过 /photos URL 访问。