image-gallery - 如何在 Hugo 的主索引中生成图库预览

Question

我正在使用 Hugo 在一个包含多个相册的简单画廊中展示我的照片。此设置中只有 2 个元素：

• 专辑页面： content/img/album[x].md每个专辑一个内容项。content/img/album[x].md只显示目录中的所有图像。
• 主索引列表：一个主索引，其中包含指向每个专辑的链接列表content/img/

我正在生成content/img/album[x].md一个脚本，该脚本扫描static/archive/...子目录下的目录并为每个目录生成一个 .md 文件。

目前主要的索引是一个链接列表。然而，我想要的是该专辑的小预览（即前 4 张图片）。所以我想知道的是：

• 如何content/img/album[x].md根据显示的上下文（主索引列表与专辑页面）进行渲染？
• 是否可以将上下文变量传播到content/img/album[x].md显示它的呈现位置（以便我可以if else在 content/img/album[x].md 内的语句中使用它）？
• 是否可以根据上下文声明其他标签{{ .Content }}或我可以使用的标签？{{ .Summary }}

标签： image-galleryhugo

Answer 1

我的解决方案是将元数据添加到内容项的 params 字段，即：

++++
files = [ ["data/2013-08-16/thumbs/thumb_2013-08-16_09:49:32_IMG_7101.JPG","rotate-90"],["data/2013-08-16/thumbs/thumb_2013-08-16_10:39:55_IMG_7113.JPG","rotate-0"] ]
++++

然后我为每个页面切换布局：

{{ range .Pages }}
{{ .Render "articlepreview"}}
{{ end }}

在 patial 模板 articlepreview.html 中，我使用元数据数组：

{{ range .Params.files }}
<img width="100" src="{{ index . 0 }}" class="{{ index . 1 }}">
{{end}}