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

为什么选这个风格

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

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

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

核心设计元素

配色

只有三种颜色：

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

状态栏

页面顶部的状态栏是整个 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%），生成 <picture> 标签做渐进式加载。这个是通过自定义 render-image.html 模板实现的。

遇到的坑

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

总结

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

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

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

不得不说，面子在很多时候比里子更重要，原本的博客网站显得很廉价，现在确实是看起来高档了不少

在没有加入项目skill之前，它还创建了一版丑陋的UI，可惜我没有截图下来或者git push一版。大概描述一下吧，就是老样子的UI把色系改成了蓝粉色系，加上玻璃感，我说让他模仿科技大厂的UI，做的也是差强人意。最让我绷不住的是它做的一版极客UI，特别搞整个都变成屎绿色。

但是突然之间我醒悟了，skill的意义不就是这个吗？“AI不蠢只是你不会用”的含金量还在提高。这版UI我还是比较满意的，后续风格应该也不会大改

看看我还有哪些能增加的地方，静态部署web的终点又在哪里？

再次看看token用量，skill确实是花小钱办大事，这个token的消耗算正常吗？

搜索的逻辑肯定还得改，是搜索正文？还是搜索标题？还是按照时间搜索？

但是后台的Sveltia又出现的问题是之前的hello_world.md和my_real_first_blog显示不出来了，这点非常可恶

about me这个感觉做的也比较垃圾，静态博客在这点上可能也算得上的问题是不适合放很多数据，以后数据量上来了，很多内容应该是储存在服务器上会比较好