把博客做成一台终端

大部分个人博客最后都长成一个样子：一个圆角卡片的大标题，三栏网格，右下角浮动按钮，页脚写着 Powered by 某某。模板负责体面，也负责让所有人看起来是同一个人。

我不想再要一张卡片了。我想要的是一台机器：它在运行，有状态，有编号，有日志，你点它一下，它立刻给你反应。

从三张图里拆出来的六条规则

看完终末地那套 UI 之后，我把它压成了六条可以执行的规则，而不是一堆形容词。

1. 浅色纸感底，纯黑字。全站只有一种亮色，用在「可以点」和「正在发生」上，其他一律灰阶。
2. 切角，不圆角；直角，不阴影；纯色，不渐变。所有容器只有两种状态：细线边框，或者被反色填满。
3. 标题分两层：上面一行超宽字距的英文小字，下面一行粗体中文。它们不是装饰，是同一句话的两种语气。
4. 背景只留工业纹理——斜线、等高线、细网格。不做游戏原画的拼贴，那是同人，不是界面。
5. 仪表盘腔调：[ REC ]、●、010 / 010、Si // 01。它们提供一个「系统在场」的错觉，而这个错觉就是风格本身。
6. 动效短而干脆，120–200ms，硬切，不加缓动的橡皮感。遮罩擦除比淡入更像机器。

这六条写进 CSS 之后，剩下的设计工作基本是排列组合，很快。

代码块也要像机器

笔记里贴代码是常态，所以代码块按语言上色：C 里 int、printf、#include 各自一种颜色，JS 里 const、fetch 又是另一组。颜色在构建时就写进 HTML，浏览器不加载任何高亮库，也不用在首屏跑一遍脚本。

#include <stdio.h>
#include <string.h>

int main(int argc, char **argv) {
    /* 打印前三个参数 */
    const char *who = argc > 1 ? argv[1] : "stranger";

    printf("hello, %s\n", who);

    for (int i = 1; i < argc && i <= 3; i++) {
        printf("  arg[%d] = %s\n", i, argv[i]);
    }
    return 0;
}

同一套规则对 JS、Python、Shell、JSON、HTML、CSS 都生效，没写语言名的代码块走通用规则（字符串、注释、数字），至少不会是一片灰。

落地时的取舍

规则五最容易翻车。 [ REC ] 用一次是机灵，用十次是噪音。我的做法是把它限制在「状态」附近：置顶、在线、更新中。文章正文里一个都不放。

双主题不是换个颜色。 浅色是纸，深色是终端。深色下我关掉了等高线纹理（在纯黑上会变成脏点），把强调色从「贴在文字背后的荧光笔」改成「细线和数字的颜色」，因为黄色方块在深色里太刺眼。

性能预算反过来约束了风格。 整站 HTML 压缩后 4 KB 左右、CSS 7 KB、JS 7 KB 以内、零字体文件。这台机器只有 3 Mbps，任何一次「再引一个库」都会在首屏变成半秒白屏。最后所有动画都是 CSS transform 和 opacity，没有一个是 JS 逐帧算的。

结果

• 首屏传输：HTML 3.8 KB、CSS 7.1 KB、JS 6.6 KB（均为 gzip 后字节数）。
• 系统字体栈，没有一次字体请求，中文不会闪。
• 关闭 JS 后文章仍然可读，只是没有搜索和主题切换。

它看起来像是有人在机房里写日记。这正是我想要的。

风格不是加出来的，是删剩下的。