如何在雨果的前端添加图像

Question

我正在尝试在Hugo的正面添加图像，以便在HTML中被调用时显示。我正在使用的当前方案是，我有一个列出项目的列表页面和一个属于单个项目的页面。

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

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

我的图片放在静态文件夹的子文件夹imagess下

这是我当前的设置：

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

“范围页面”用于遍历我所有的项目页面，并显示名称，标题和描述。为了简洁起见，我删除了名称和描述。

和每个项目页面的.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

通过谷歌发现这个问题 - 答案是它变成了 .Params.Featured_Image 但在 featuresImage 和 .Params.FeaturedImage 中使用蛇形大小似乎更正常

Answer 2

我不确定您所指的网页是list.html还是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

当您访问这些网址时，

• 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 才能在运行时看到该页面。

---

不要依赖其他主题

我想强调的最后一件事是，前端只为模板提供了一些变量。模板工具是关键。如果你是 Hugo 的初学者，我建议你不要过分依赖别人提供的主题，建议你先自己尝试一下，然后再考虑引用别人的主题。

如果你看了官方文档很懵逼，可以先考虑看简单教程video，然后再去官方文档了解情况