我把 Hugo 的图标放在哪里

Where do I put my favicon with Hugo

我正在使用 Hugo 生成静态站点。我应该把我的 favicon.ico 文件放在哪里?

将网站图标放在静态目录中。静态目录位于您的 hugo 站点的根目录中。当您生成站点时,网站图标将被复制到生成站点的根目录 public 中。

将您的网站图标放在 static 文件夹中是正确的。页面构建后,它将发布到 public 文件夹。

但是,使用绝对 CDN(例如:Dropbox)服务可能会提高页面性能。

静态文件(如徽标图像或网站图标)转到“静态”文件夹 如果您正在使用:

  • 一个下载好的模板,放在你的hugo项目的/static/*中(避免更新时被抹掉)
  • 自己的模板,放在/themes/themeName/static/*

两者都可以通过以下路径访问:/*

示例:“/static/ico/myico.ico”和“/themes/themeName/static/ico/myico.ico”将由“/ico/myico.ico”机器人访问

当你在脑海中使用这段代码时:

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

...您可以将单个 icon-192x192.png 放在静态目录的 'img' 文件夹中(或任何其他您喜欢的地方,只要您正确指定路径)。

只是 运行 进入这个并发现@mathtick 的评论“这取决于”是这里最准确的答案,所以我决定做这个 post.

答案似乎取决于您使用的主题, 我试图将我的解释通用化,以使其对其他人了解如何使其在他们的场景中发挥作用仍然有用,即使它与我的不完全相同。

当我使用带有 docsy 主题的 Hugo 创建概念验证网站时,这对我有用:

确定您最有价值的 3 种资源:
1。您的主题示例站点的 Git 回购:
示例:
https://github.com/google/docsy-example

2。您的主题 Git 回购:
示例:
https://github.com/google/docsy

3。您的主题文档页面:
示例:
https://www.docsy.dev/docs/

这是我为让它工作所经历的逻辑工作流程:

  1. 听人说在 /static/ 文件夹中查找。我查看了 docsy-example 站点,发现它没有名为 static 的文件夹。 (我的代码库有一个由 hugo cli 的初始化逻辑创建的空 /static/ 文件夹。)
  2. 这时候我想起主题有父继承关系,因为docsy-example没有/static/文件夹,它必须使用它父的/static/文件夹, docsy 主题回购。
    https://github.com/google/docsy/tree/main/static/favicons
  3. 然后我在我的代码库中创建了 /static/favicons/
    https://myrepo.com/my_hugo_site_that_uses_docsy_theme/static/favicons
    意识到如果我在此文件夹中创建的文件与 docsy 主题对应的 /static/favicons/ 文件夹中的文件名相匹配,我的文件夹副本将与主题的文件夹副本合并,我的副本将覆盖主题的副本。
  4. 然后我就像废话一样,这里有大约 15 个文件,所以我 RTFM'ed 找到了这个页面:
    https://www.docsy.dev/docs/adding-content/iconsimages/#add-your-favicons
    其中有关于如何使用 http://cthedot.de/icongen 生成这些文件的提示。

然后我在使用 Hugo 的本地主机开发快速反馈循环进行测试时发现了文档中没有写的东西,并且 QA'ing 改变了预期的效果。如果您更新网站图标,有时仅使用隐身模式不足以反映更新后的变化。我必须下载一个备用浏览器,并使用它的隐身模式,才能成功看到发生的变化。然后在我的普通浏览器中,我必须清除缓存/cookie,完全退出所有浏览器进程并重新打开浏览器,然后使用隐身模式让更改在我通常使用的浏览器中正确反映。