Hugo模板如何引用Front Matter中的image字段？

问题情况 #

我的文章Front Matter格式如下：

---
title: "My First Post"
date: 2023-04-07T22:11:00+02:00
draft: false
slug: "hi-first-post"
tags: ['tag1','tag2']
image: "images/featured.jpg"
---

当前index.html模板里用的是固定图片路径：

{{ range .Site.RegularPages.ByDate.Reverse }}
{{ if and (eq .Section "story") (not .Draft) (le .Date $.Date) }}
{{$image := resources.Get "images/dogs.webp" }}
            <img src="{{ ($image).RelPermalink }}" alt="Image for {{ .Title }}"></a>
{{end}}{{end}}

图片都存在assets/images目录，我想改成引用Front Matter里的image字段，而且不想给每篇文章在content下单独建文件夹。

解决代码 #

直接修改模板里的图片引用逻辑，替换成下面的代码：

{{ range .Site.RegularPages.ByDate.Reverse }}
{{ if and (eq .Section "story") (not .Draft) (le .Date $.Date) }}
{{ with .Params.image }}
  {{$image := resources.Get . }}
  <img src="{{ $image.RelPermalink }}" alt="Image for {{ $.Title }}"></a>
{{ end }}
{{end}}{{end}}

关键说明 #

• {{ with .Params.image }}用来判断当前文章有没有设置image字段，防止没设置时模板报错
• resources.Get .里的.就是取当前文章Front Matter中image字段的值，直接从assets目录拉取对应图片，不用再写固定路径
• 原有的文章筛选逻辑（只显示story栏目、非草稿、发布日期不晚于当前日期的内容）完全保留

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