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

Question

这是我第一次使用Hugo。我正在为我的 Hugo 网站使用 Bento 主题，它没有开箱即用的图标支持（我搜索了整个代码库，但无处可寻）。因此，我向部分 > head.html 添加了必要的 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 等...}}，例如 href="{{ #.Site.Params 等。 .}} 你会将变量名和值添加到你的配置文件中。请参阅下面的 hugodocs 中的参考资料： Site Variables

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

Hugo site favicon shows locally, but cannot be found in deployment

favicon

hugo