博客大改造:换主题、加点水墨味

目录

用两天时间把博客从里到外重新拾掇了一遍,记录一下心路历程和灵感来源。

换主题

博客之前用的主题是 hugo-minimal-black —— 好看是好看,科技感很足,但设计上总觉得不像个博客,更像是一个产品展示页。加上最近欣赏了很多大佬的博客,大都以内容为主,于是确定我要一个风格化但设计上克制的主题,一切以内容为中心,精简 UI 元素。找来找去,最终敲定博客整体迁移到 hugo-blog-awesome,一个很简明的博客模板。

加点水墨味

主题换完是干净的白板,接下来是"中式化",灵感取自书法——既是文字载体又是画作可以欣赏:

  • 主页、关于页、博客列表页、装备页依次加上了各自的书法卷轴装饰图,固定在右下角,纯装饰、不挡内容,手机宽度下自动隐藏
  • 页头导航用了毛笔字体 Long Cang,站点名用衬线体 Libre Baskerville,都通过 Google Fonts 加载
  • 新做了一个圆形红底的 favicon/logo,这里的灵感是印章/徕卡小红点,黑白主题下醒目的红点有画龙点睛之意

这里有个妥协,主页和文章页的文字偶尔可能会和背景书法重叠影响阅读,我尝试了反色处理,在字体和书法重叠时颜色变为黑色,方案确实解决了问题。但因为反色,右下侧的书法和文字重叠部分显得特别“脏”,整体观感降低,而且因为“脏”反而吸引了注意力,不够自然,遂作罢。

把日期改成节气

由于博客的定位是输出时间敏感性低的内容(长青内容),写作时间重要性低,所以决定在这里放些小心思,增加站点特色,同时又不影响阅读体验。这大概是这次改动里最"没苦硬吃"的一块:把全站的数字日期换成了中国节气主题。

  • 博客列表页的日期变成"[月份]·[节气]·[候名称]",比如"仲秋·白露·鸿雁来"——节气对应的候名取自《月令七十二候集解》
  • 主页"最新文章"日期:刚发的文章显示"墨迹未干/新墨初凝",更早的按"[中文年份]·[季节]“显示
  • “近况"更新时间改成相对说法:今天/昨天/X天前/X周前/X月前(用大写中文数字),超过一年再回退到完整的"年·月·日”

节气日期不是随便对一张表——写了个脚本按太阳黄经反推 1990-2060 年每年节气的精确日期,存进 data/jieqiDates.json,再配一份节气到月份/候名的映射表 data/solarTerms.yaml,对照维基文库的原文核对过一遍。

正文字体换成思源宋体

前面这些都是"中式装饰”,最后一步是正文字体也配上——把主页、/blog 列表、单篇文章、关于/装备/粉馆几个页面的正文统一换成了思源宋体(走 Google Fonts 的 Noto Serif SC 版本),logo 和导航菜单保留原来专门挑的英文/毛笔字体不变。这几个页面共用同一个 .wrapper 容器,一条 CSS 规则就全覆盖了,比想象中省事。

不得不说从默认字体换到宋体,科技感立马全无,乍一看有点大家闺秀的感觉,整个博客调性秀气了很多。

回顾

两天下来主要是:主题迁移、调细节、核对节气数据,中间被 Hugo 的目录规范和不严谨的字体缓存坑了两次。整体上博客现在看着更"自己"了一点,继续用 Claude Code 打下手,效率确实高。