Hugo：如何在 post 列表中显示图像

Question

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

为了实现这一点，我在 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。请注意开头的小写字母，而不是内置参数的大写字母。

Page-level params on the Hugo Docs

自定义页面参数

访问

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

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

{{ .Params.header_image }}

资源

Page resources on Hugo Docs

似乎 resources 实际上是一个对象数组，对于 yaml，你实际上应该有这样的东西（注意破折号）：

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

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

调试

您可以使用 {{ printf "%#v" .Resources }} for debugging.

Hugo：如何在 post 列表中显示图像

Hugo: How can I display an image in my post list

image

hugo

自定义页面参数

资源

调试