无法使用 Hugo 链接到静态文件答案

【问题标题】：Cannot link to static files with Hugo无法使用 Hugo 链接到静态文件
【发布时间】：2018-02-14 00:55:40
【问题描述】：

我有这个在config.toml:

baseURL = "https://my-username.github.io/blog/"

在static/img/foo.png 有一个静态文件。

现在，在content/posts/bar.md，我有以下内容：

---
title: "Bar"
---

![foo](img/foo.png)

我启动hugo server后图片没有显示，所以我检查了元素，发现Hugo为其生成了以下URL：

http://localhost:1313/blog/posts/bar/img/hireme.png

这不是我所期望的；应该是

http://localhost:1313/blog/img/hireme.png

当我使用![foo](/blog/img/foo.png)时，图片显示正确，但这很奇怪：/blog/是baseURL的一部分，为什么我需要重新输入？

【问题讨论】：

不知道 Hugo 是如何处理链接标记的，所以只是一个想法：你试过/img/foo.png 吗？
@unor 渲染为<img src="/img/foo.png" alt="foo">，即http://localhost:1313/img/hireme.png :(

【解决方案1】：

在您的网站位于域的根目录的简单设置中，对图像的绝对引用将是一种标准做法。但是，在您的网站嵌套的情况下，需要更巧妙的解决方案。

我建议使用简码来解决您的困境。只需简单地创建一个短代码，它接受资源文件路径并每次都吐出所需的绝对路径。这种方法的优点是可以灵活地将未来的资源重新定位到 CDN。

您的降价代码将如下所示： ![foo]({{< resource url="img/foo.png" >}})

您的简码模板将如下所示： {{ .Site.BaseURL }}{{ .Get "url" }}

在“layouts/shortcodes/”文件夹中创建一个名为“resource.html”的文件，并将上面的短代码模板代码放入。

因此，当您决定要切换到 cdn 时，您可以轻松地执行以下操作： ://cdn.example.com/{{ .Get "url" }}

【讨论】：

【解决方案2】：

我认为你应该使用<base> 标签来为静态文件创建baseURL。

在<head>中添加<base>标签：

<base href="{{ .Site.BaseURL }}">

然后你可以像这样在帖子中插入图片：

![Foo image](img/foo.jpg)

参考资料：

【讨论】：