我的博客主题是如何定制的

Sat, 15 Feb 2025 09:15:00 +0000

主题用的 hugo-cactus-dark, 一个暗色主题, 干净, 没什么花哨的东西. 完全够用.

但原版主题只覆盖了基础功能. 我需要双语切换, Giscus 评论, 页面统计, 结构化数据, 这些原版都没有. 所以直接 fork 了一份, 在 layouts/ 里覆盖掉需要改的模板.

覆盖了哪些

layouts/ 目录下的模板优先级高于主题里的同名文件. 我只覆盖需要改的部分, 不需要动的就留给主题.

这个东西开发的时候有个烦人的点: Hugo 对模板有缓存. 你改了 layouts/ 下的文件, 有时候浏览器还是用旧版本. 不是 Hugo 的锅, 是浏览器缓存了 HTML. 清一下或者开无痕模式就好.

head.html

改动最大的一个. 原版只输出了基本的 meta 和样式引用. 这里加了一堆东西:

<!-- 搜索引擎验证 -->
<meta name="360-site-verification" content="xxx" />
<meta name="sogou_site_verification" content="xxx" />

<!-- 双语 hreflang -->
{{ if .IsTranslated }}
{{ range .Translations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

<!-- Open Graph -->
<meta property="og:locale" content="{{ if eq .Lang "zh" }}zh_CN{{ else }}en_US{{ end }}">
<meta property="og:title" content="{{ .Title }}">
<meta property="og:image" content="{{ .Params.image | absURL }}">
<meta property="og:description" content="{{ .Summary | truncate 200 }}">

<!-- Canonical -->
<link rel="canonical" href="{{ .Permalink }}">

<!-- 结构化数据 -->
{{ if .IsPage }}
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "{{ .Title }}",
 "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 "author": { "@type": "Person", "name": "{{ .Site.Params.author }}" }
}
</script>
{{ end }}

为什么要加 Open Graph? 因为文章分享到社交媒体时, 预览卡片需要这些 meta. 没有的话就只显示一个光秃秃的链接.

主题 on Time Friend

我的博客主题是如何定制的

覆盖了哪些

head.html