如何在Hugo内容文件的Front Matter中定义图片映射数组

Hugo支持三种主流的Front Matter格式（YAML、TOML、JSON），你可以根据偏好选择任意一种来配置包含alt文本的图片数组，配置完成后均可通过.Params.images在模板中访问该字段。

1. YAML格式（推荐，最常用） #

YAML用缩进表示层级，数组以-开头：

---
title: "你的文章标题"
images:
  - src: "images/giraffe.png"
    alt: "giraffe"
  - src: "/images/elephant.png"
    alt: "elephant"
  # 可继续添加更多图片项
---

2. TOML格式 #

TOML用[[数组名]]定义嵌套数组项：

+++
title = "你的文章标题"
[[images]]
src = "images/giraffe.png"
alt = "giraffe"

[[images]]
src = "/images/elephant.png"
alt = "elephant"
# 可继续添加更多图片项
+++

3. JSON格式 #

直接使用你提供的JSON结构即可，注意Front Matter首尾用{}包裹：

{
  "title": "你的文章标题",
  "images": [
    {
      "src": "images/giraffe.png",
      "alt": "giraffe"
    },
    {
      "src": "/images/elephant.png",
      "alt": "elephant"
    }
  ]
}

模板中访问示例 #

在Hugo模板（如single.html）中，可通过循环遍历.Params.images渲染图片：

{{ range .Params.images }}
  <img src="{{ .src | relURL }}" alt="{{ .alt }}">
{{ end }}

使用relURL函数可自动处理相对路径，确保图片链接在不同部署环境下正常访问。

内容的提问来源于stack exchange，提问作者foxgroot