Hugo：如何在我的帖子列表中显示图像

Question

我正在尝试在我的帖子列表中显示图像。

为了实现这一点，我在 post.md 中添加了一些标签：

---
title: "Hello"
header_image: /images/blog/2019/water.jpg
images: /images/blog/2019/water.jpg
resources:
  src:  /images/blog/2019/water.jpg
  title: "The image I want"

---

然后我编辑了 list.html 并尝试了不同的事情：

{{ define "main" }}
<div class="archive animated fadeInDown">
    <ul class="list-with-title">
      <div class="listing-title">{{.Title}}</div>
      {{ range .Pages }}
      <ul class="listing">
        <div class="listing-item">
            <div class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
              {{ with .Resources.ByType "image" }}
                <div class="Image">
                {{ range . }}
                    <img src="{{ .RelPermalink }}">
                {{ end }}
                </div>
              {{ end }}
{{ $.Param "header_image" }}
                --  {{ range .Page.Resources }}
                  THERE IS ONE ITEM => NOT WORKING
                    {{ end }} <<
              <div class="post-time"><span class="date">{{.Date.Format "Jan 2" }}</span></div>
            </div>
          </div>
    </ul>
    {{ end }}
  </div>
{{ end }}

但是当我尝试显示资源时，我总是得到 [] （什么也没有）

知道我做错了什么吗？

Answer 1

我也不认为你{{ $.Param "header_image" }}在工作。

访问页面和站点上的自定义非标准变量的方法是通过对象.Params，例如.Params.header_image。请注意开头的小写字母，而不是内置参数的大写字母。

Hugo 文档上的页面级参数

自定义页面参数

访问

---
header_image: /images/blog/2019/water.jpg
---

您可以在页面模板中使用它。

{{ .Params.header_image }}

资源

Hugo Docs 上的页面资源

看起来这resources实际上是一个对象数组，并且使用yaml，您实际上应该有这样的东西（注意破折号）：

resources:
- src:  /images/blog/2019/water.jpg
  title: "The image I want"

另请注意，此功能似乎仅适用于页面捆绑包

调试

您可以用于{{ printf "%#v" .Resources }}调试。