如何在 Hugo 的 front matter 中添加图像

Question

我正在尝试在 Hugo 的封面中添加一张图片，以便在我的 HTML 中调用它时显示。我正在使用的当前场景是我有一个列出项目的列表页面和一个属于单个项目的页面。

在我的 .md 文件中，我想引用要在两个位置（列表和单个页面）上显示的相应图像的位置。

我不知道该怎么做。我试过使用在其他帖子中找到的“.Params”，但我无法在网页上显示图像。

我的图像在名为 images

的 sub-folder 下的静态文件夹中

这是我当前的设置：

<div class="projects">
    {{ range .Pages }}
    {{ with .Params.featured_image }}<img src="{{ . }}">{{ end }}
    {{ end }}
</div>

"range pages" 是循环遍历我所有的项目页面并显示名称、标题和描述。为了简洁起见，我取出了名称和描述。

和我的每个项目页面的 .md 文件：

---
title: "Text Based Adventure"
description: "A simple text based adventure game that gives a nod to the 80s style terminal games"
draft: true
featured_image : “images/textAdventure.png”

---

Answer 1

通过 Google 发现了这个问题 - 答案是它变成了 .Params.Featured_Image 但使用 snake-case 似乎更正常，如 featuredImage 和 .Params.FeaturedImage

Answer 2

我不确定您所指的网页是否是list.html or single.html

single 和 list 页

根据您设置的语法，

{{ range .Pages }}
    ...
{{ end }}

无法在single.html中使用，只能在list.html中使用。 list.html和single.html虽然都是Page变量，但区别在于它们的range Pages。 Pages可能有，single.html肯定没有。

---

我不确定你是否理解list.html和single.html之间的区别。我会用非正统的白话来描述它，

• list.html: 像一个 文件夹
• single.html: 就像文件夹中的 文件。

假设您的文件如下所示，

• posts/lesson1.md
• posts/lesson2.md

当您访问那些 URL、

• http://localhost:1313/posts/ # 呈现的页面是 list.html
• http://localhost:1313/posts/lesson1 # 呈现的页面是 single.html
• http://localhost:1313/posts/lesson2#single.html

图片

如果你的图片位置是images/textAdventure.png

则图片位于static/images/textAdventure.png

草稿

您的草稿是 True，所以当您 运行.

时，您需要 --buildDrafts or -D 才能看到该页面

---

不依赖其他主题

最后要强调的是，front matter只是给模板提供了一些变量。模板实现是关键。如果你是Hugo的初学者，我建议你不要太依赖别人提供的主题，建议你先自己尝试一下再考虑引用别人的主题。

如果看了官方文档还很懵逼，可以考虑先看简单的教程video再去官方文档入手