gpt4 book ai didi

image - Hugo:如何在我的帖子列表中显示图片

转载 作者:行者123 更新时间:2023-12-02 16:38:38 25 4
gpt4 key购买 nike

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

为了实现这一点,我在我的 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 }}

但是当我尝试显示资源时,我总是得到 [](没有)

知道我做错了什么吗?

最佳答案

我认为您的 {{ $.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 .

关于image - Hugo:如何在我的帖子列表中显示图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62135931/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com