我的博客是怎么变成太空舱的

Tue, 02 Jun 2026 10:00:00 +0800

你可能注意到了，这个博客不太像传统的技术博客。没有白色背景，没有清新配色，取而代之的是纯黑底、金色边框、青色文字，还有一堆看起来像科幻电影里飞船仪表盘的元素。

这叫 Space Cabin HUD 风格，灵感来自太空舱的抬头显示器（Head-Up Display）。这篇博客聊聊它是怎么来的。

为什么选这个风格

最初用 PaperMod 默认主题的时候，博客长这样：白底、蓝色链接、标准卡片布局。干净，但无聊。

我想要一个能让人一眼记住的博客。不是靠花哨的动画或复杂的布局，而是靠统一的视觉语言。太空舱 HUD 这个概念刚好满足几个条件：

暗色主题 — 技术博客标配，护眼，省电（OLED 屏）
信息密度高 — HUD 本身就是高密度信息展示，和博客的阅读场景契合
可扩展 — 状态栏、指示灯、日志编号这些元素可以不断加新功能
独特 — 没见过第二个中文博客用这个风格

核心设计元素

配色

只有三种颜色：

颜色	用途	色值
纯黑	背景	`#0a0a0a`
金色	主色调、标题、边框	`#c9a84c`
青色	次要色、状态指示、日期	`#38bdf8`

为什么是这三个？因为它们在纯黑背景上的对比度足够高，而且金色+青色的组合在科幻电影里很常见（想想《异形》的终端界面）。

状态栏

页面顶部的状态栏是整个 HUD 的灵魂：

SYS NOMINAL | COMM LINK ACTIVE | PROPULSION OK

它不只是装饰——每 6 秒轮播一条真实的系统状态消息，像飞船在汇报自己的健康状况。这个功能纯 CSS 动画实现，不依赖 JavaScript。

日志编号

每篇文章都有一个自动编号：LOG-01、LOG-02……这是用 CSS Counter 实现的，不需要在文章里手动写：

.post-entry {
  counter-increment: post-counter;
}
.post-entry::before {
  content: "LOG-" counter(post-counter, decimal-leading-zero);
}

日期格式

文章日期从 2026-05-26 变成了 T+001 这种格式，模拟任务时间轴。这个用 CSS 的 attr() 和自定义属性实现，原始日期保留在 title 属性里，鼠标悬停可以看到完整日期。

扫描线效果

页面上有一层淡淡的扫描线叠加，模拟 CRT 显示器的效果。纯 CSS 实现：

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

加了 prefers-reduced-motion 媒体查询，如果用户系统开了减少动画，扫描线会自动关闭。

技术实现

布局覆盖

PaperMod 的模板系统允许你覆盖任意 partial。我覆盖了这些：

header.html — 完全重写，加入状态栏和自定义导航
extend_footer.html — 加入 HUD 时钟的 JavaScript
extend_head.html — DNS 预取、百度统计占位、自动 meta description
extend_post_content.html — 相关文章卡片网格
render-image.html — 自动 WebP 转换

所有覆盖文件都在 layouts/ 目录下，Hugo 构建时会优先使用它们而不是主题的默认文件。

CSS 架构

整个自定义 CSS 有 1200+ 行，但结构很清晰：

assets/css/extended/custom.css
├── 基础变量和重置
├── HUD 状态栏
├── 文章卡片样式
├── 代码块样式（SYSLOG://DATA-STREAM）
├── 面包屑导航（终端风格）
├── 滚动条和选中高亮
├── 响应式断点
└── 无障碍支持

PaperMod 会自动加载 assets/css/extended/ 下的所有 CSS 文件，不需要额外配置。

图片处理

博客有一条自动化的图片流水线：写 Markdown 时直接用 PNG/JPG，Hugo 构建时自动转 WebP（质量 82%），生成标签做渐进式加载。这个是通过自定义 render-image.html 模板实现的。

遇到的坑

CSS Counter 在移动端不工作 — 某些安卓浏览器对 counter-increment 支持有问题，加了 fallback
扫描线影响性能 — 在低端手机上，position: fixed 的伪元素会导致重绘，加了 will-change: transform 优化
金色在浅色模式下不可见 — 所以直接禁用了主题切换，锁死暗色模式

总结

Space Cabin HUD 不是一个主题，是一种设计哲学：用最少的颜色和最统一的视觉语言，让整个网站看起来像一个整体。

如果你也想做类似的自定义，建议从 PaperMod 的 partial 覆盖开始。不用改主题源码，Hugo 的模板继承机制会帮你搞定一切。

唯一的风险是：你可能会花更多时间调 CSS 而不是写博客内容。

CSS on 我的博客