更新了一下 hugo-theme-island

2026/05/15 | 3分钟阅读 | 更新于 2026/05/16

更新图像相关的功能

修复 SVG 的支持

切了一下主题到 hugo-theme-island , 然后发现构建失败。原因是，当初设计主题的时候，考虑到懒加载，于是手动获取了封面图的宽高，写进 img 标签。而，rect.page 有一些封面图用的是 SVG, 于是就炸了。

解决方案是使用 reflect.IsImageResourceWithMeta 判断能否获得宽高:

Reports whether the given value is a Resource object representing an image from which Hugo can extract dimensions and, if present, Exif, IPTC, and XMP data.

reflect.IsImageResourceWithMeta

停止下载云端图片

接着，在修复上面这个问题的时候，注意到当时把云端图片也给下载下来了。这样问题会很多，每一次构建都要把所有封面图都下载一遍，于是做了修改。允许用户在 cover 中指定 width 和 height, 没有就按 750x500 算，然后使用 object-fit: cover.

cover:
  image: https://example/cover.png
  width: 800
  height: 400
  alt: "demo image"

修复 Markdown 的图片渲染

来都来了，顺手把 render-image 的 hook 也修一下，先前在非默认语言的时候，展示内容中的图像的会有问题。改这个问题的时候，注意到当时把图像全都按块级处理了，于是做了修改，用 render image 的 .IsBlock 判断。

自动生成 site icons

注意到，demo 站点完全没有 favicon, 于是读取了配置中的 logo, 生成 32x32, 16x16 的小图标，以及 180x180 的 apple-touch-icon, 并自动配置 link 标签。Hugo 真的很方便：

{{- $logo := resources.GetMatch site.Params.logo -}}
{{- if reflect.IsImageResourceProcessable $logo -}}
    {{- with $logo.Process "resize 180x png" -}}
        <link rel="apple-touch-icon" sizes="180x180" href="{{ .RelPermalink }}">
    {{- end -}}
    {{- with $logo.Process "resize 32x png" -}}
        <link rel="icon" type="image/png" sizes="32x32" href="{{ .RelPermalink }}" />
    {{- end -}}
    {{- with $logo.Process "resize 16x png" -}}
        <link rel="icon" type="image/png" sizes="16x16" href="{{ .RelPermalink }}" />
    {{- end -}}
{{- else if reflect.IsImageResourceWithMeta $logo -}}
    <link rel="icon" type="image/png" sizes="{{ $logo.Width }}x{{ $logo.Height }}" href="{{ $logo.RelPermalink }}" />
{{- else if $logo -}}
    <link rel="icon" type="image/png" href="{{ $logo.RelPermalink }}" />
{{- end -}}

另外，如果 assets/ 下面存在 favicon.ico, 以及 site.webmanifest 文件，也会自动添加对应的 link 标签。

更新模版的结构

然后 Hugo 一直在 WARN 说 languageCode 和 languageName 被放弃了，用 locale 和 label 代替。于是一并更新，顺手把 Hugo 更新了。然后就发现，标签的详情页没有了，明明 term.html 依然在 _default 中—，确切来说，/tags/ 和 /tags/xxx/ 都指向了 _default/taxonomy.html.

原因大概是，Hugo 大改了模版系统 , 模板的查询机制变了，_default 文件夹被放弃，所有文件都移动到 layouts 内。既然看到了，那就顺手做个迁移吧，根据规范，处理了所有的文件。

然后，归档页面就没有了——还是和更新后的模板系统有关。在旧的场景下，content/archives/_index.md 会找到 _default/archives.html. 而更新之后，它的查找顺序变成了:

layouts/archives/section.html
layouts/archives/list.html
layouts/list.html

虽然可以在 archives/_index.md 中手动指定 layout: archives, 但是考虑到这个主题的用户（如果有的话），用的应该是文档中建议的默认配置。所以这里没有修改，而是把 layouts/archives.html 移动到 layouts/archives/section.html.

另外在文档中注明，非默认用户需要指定 type: archives 而不是之前的 layout: archives. 当然，同一个文件存两份也是一个方案，不过那样太丑了。

顺便说一下，如果手动设置 frontmatters 的话，这里的 type 相当于指定去哪个文件夹找模板, layout 则是指定找哪个模板文件。

更新语言的的配置

最后，新版本的 Hugo , 用 label 以及 locale 取代了 languageName 和 languageCode , 于是一并做了更新。

其它

更新了文档和 demo 。另外，新画了一组封面，像素画放大后的 PNG 图像，因为是索引模式，体积超级小。