我想在Hugo的前端添加图像,以便在我的HTML中调用该图像时显示该图像。我正在使用的当前方案是,我有一个列出项目的列表页面和一个属于单个项目的页面。
在我的.md文件中,我想引用要在两个位置(列表和单页)上显示的对应图像的位置。
我不确定该怎么做。我尝试使用在其他帖子中找到的“ .Params”,但无法在网页上显示图片。
我将图片放在名为images的子文件夹下的静态文件夹中
这是我当前的设置:
<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”
---
我不确定你所指的网页是list.html还是single.html
single
和list
页面根据你设置的语法,
{{ range .Pages }}
...
{{ end }}
无法在中使用它single.html
,而只能在中使用list.html
。尽管list.html
和和single.html
都是Page Variable,但是它们的区别是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或-D才能在运行时查看页面。
我要强调的最后一件事是,前台事务仅向模板提供了一些变量。模板工具是关键。如果你是雨果的初学者,我建议你不要过分依赖他人提供的主题,建议你在尝试引用其他人的主题之前先尝试一下。
如果你在阅读正式文档后一无所知,可以先考虑观看简单的教程视频,然后再浏览正式文档以了解具体情况。