如何在Hugo短代码中通过Go模板读取JSON数组生成视频画廊

报错根因 #

• 编写的os.Open("./videos.json")是原生Go语言语法，Go模板语法不支持直接调用Go标准库函数，也不支持在模板命令块中直接执行多返回值的原生Go赋值逻辑，这就是“too many declarations in command”解析失败的本质——短代码模板的语法解析器无法识别原生Go代码的写法。
• 普通Go代码的JSON解析逻辑无法直接迁移到Hugo模板场景，Hugo本身已经封装了全流程的资源读取、内容解析能力，完全不需要手动实现文件IO逻辑。

分步实现 #

1. 基础配置准备 #

不需要额外安装依赖，常规Hugo默认配置已经支持JSON格式的资源解析，如果遇到JSON读取失败，可以在配置文件里补充JSON媒体类型声明：

[mediaTypes]
  [mediaTypes."application/json"]
    suffixes = ["json"]

2. 短代码逻辑改写 #

因为videos.json和嵌入短代码的index.md处于同一目录，会被Hugo自动识别为当前页面的关联资源，不需要手动拼接文件路径：

<section class="flex-ns flex-wrap justify-around center">
  {{/* 从当前短代码所属页面的同目录资源中，读取videos.json */}}
  {{ $videosRes := .Page.Resources.Get "videos.json" }}

  {{ if not $videosRes }}
    <p>当前章节目录下未找到videos.json配置文件</p>
  {{ else }}
    {{/* 用Hugo内置的unmarshal函数把JSON内容解析为可遍历的数组结构 */}}
    {{ $videoList := $videosRes.Content | unmarshal }}

    {{/* 遍历数组生成画廊iframe内容 */}}
    {{ range $videoList }}
      <div class="w-30-ns pa2">
        <h3>{{ .title }}</h3>
        <iframe
          src="{{ .url }}"
          loading="lazy"
          width="100%"
          height="220"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
        </iframe>
      </div>
    {{ end }}
  {{ end }}
</section>

关键注意点 #

• 模板内不要尝试调用原生Go标准库的文件操作函数，Hugo的资源系统已经封装了跨平台的文件读取能力，所有和页面同目录的关联文件，都可以通过.Page.Resources相关方法获取。
• 内置的unmarshal函数可以直接解析JSON、YAML格式内容，和原生Go里的json.Unmarshal效果完全一致，不需要自己实现JSON序列化逻辑。
• 不需要写带./的相对路径，Resources.Get方法会自动匹配当前页面关联的资源路径，避免因为构建工作目录变化导致的文件找不到问题。

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