Hugo 站点图标在本地显示，但在部署中找不到

Question

这是我第一次使用 Hugo。我正在为我的 Hugo 网站使用 Bento 主题，它没有提供开箱即用的 favicon 支持（我搜索了整个代码库，但无处可寻）。因此，我将必要的 HTML 标记添加到 partials > head.html。当我使用hugo server -D 或npm run dev 在本地运行时，图标显示正常。

我认为我的相对 href 的编写方式存在问题，但是，每当我更改它时，它都会在本地破坏它。我正在使用 AWS Amplify 进行自动云端失效部署，所以这不是问题。

当我检查已部署站点的页面源代码时，我会为网站图标获取以下信息：

<link rel="apple-touch-icon" sizes="180x180" href="favicon%20not%20found%25!%28EXTRA%20string=apple-touch-icon.png%29">

您可以在href= 字段中查看问题

这是我的网站图标在 partial/head.html 中的实现方式：

<link rel="icon" type="image/png" sizes="32x32" href="{{ "/img/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/img/favicon-16x16.png" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/img/apple-touch-icon.png" | relURL }}">

我还尝试通过在config.toml 中添加链接并使用Site.Params 来实现这一点，但也没有运气。

Answer 1

下面是你的做法：

<link ... href="/img/favicon-32x32.png">
<link ... href="/img/favicon-16x16.png">
<link ... href="/img/apple-touch-icon.png">

因此，您不必使用 hugo/Go {{}} 标签（这适用于像 {{.section }} 这样的站点变量 - 您只需输入相对 url，即“/ img/favicon-32x32...etc" 只要确保您的图像在相应的文件夹中即可。

我在安装 hugo 时进行了测试，只要您的网站图标位于正确的位置 - 就可以解决您的问题。

• 另请注意：如果您想使用站点变量 {{ $.Site.Params etc...}}，例如 href="{{ #.Site.Params etc...}}，您可以添加配置文件的变量名称和值。请参阅下面的来自 hugodocs 的参考： Site Variables