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

编程问答 2022-04-30

问题描述

这是我第一次使用 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 来实现这一点，但也没有成功。

解决方法

下面是你会怎么做：

<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
faviconfaviconhugo