Hugo - 页面包中的相对路径

Question

很抱歉这个基本问题，但我刚刚开始使用 Hugo，我不知道如何链接到页面包中的图像。

我的内容文件夹中有以下结构:

content/
├── about
│   └── index.md
└── post
    ├── post01
    │   ├── img01.png
    │   └── index.md
    └── post02
        ├── img01.png
        └── index.md

根据我对 page resources 上的文档的阅读，听起来页面包中的页面资源应该具有相对路径。基于此，我认为我可以使用以下 Markdown 从 post01 index.md 中链接到 img01.png:

![](img01.png)

但是，我就是无法让它工作。我让它工作的唯一方法是将我的图像放入/static 文件夹(与/content 处于同一级别)，然后 Markdown 将加载图像而不进行任何修改。所以看起来相对路径没有按照我认为的方式工作，因为我指定的任何路径都是相对于/static 文件夹的。有人可以帮助我了解发生了什么吗？

另一个令人困惑的地方是，如果我将我的/content/post 文件夹重命名为/content/posts 然后重新启动我的本地 hugo 服务器，我的帖子将不再加载到首页，我什至无法浏览到它带有 URL localhost:1313/posts(尽管 localhost:1313/about 仍然可以正常加载)。是什么原因导致首页自动列出/content/post 而不是/content/posts 的内容，是否有特殊原因导致我无法浏览到localhost:1313/posts？

非常感谢!

Answer 1

这里其实有3个问题。

问题 1 - 页面捆绑图片。

MarkDown 由不知道页面包的 BlackFriday 模块处理。您将需要使用图像标签和一些短代码才能访问它。像这样的东西:

{{ with .Resources.Match "image01.png" }}
   <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{end}}

参见 hugo image processing page

问题 2 - 帖子与帖子(首页)

如果没有大量关于您的主题和布局的信息，这实际上很难回答。但作为一个猜测......

在生成 index.hml 的模板中的某处，会有如下内容:

{{ range .Section "post" }}

通过移动内容，您更改了部分名称。按照惯例，部分名称是单数。

问题3 - post vs posts (hugo server)

hugo server 从内存中提供页面。它没有使用您的文件系统。所以，如果一个目录没有构建的内容，那么它就不可浏览。要准确查看 hugo 服务器 将服务什么(带有路径)，只需构建并查看 public/ 目录即可。