把博客打磨到设计奖水准的七个细节

这篇是主题实现的幕后笔记，也是一篇「能做什么」的演示文：目录、代码高亮、标注块、阅读时长——你在这篇里看到的一切，都是写作时零成本可用的。

1. 排版即设计

编辑杂志风的核心判断：文字本身就是海报。巨型标题用 clamp() 做流式字号，中文标题收紧字距，正文行高放到 1.9——中英文混排的呼吸感全靠这几个数值。

h1 {
  font-size: clamp(2.5rem, 8vw, 6rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

2. 动效只用现代 CSS

滚动驱动的入场动画，零 JavaScript：

@supports (animation-timeline: view()) {
  .reveal {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

3. 标注块直接写 Obsidian 语法

在 Obsidian 里习惯的写法原样可用，构建时会转换成带样式的标注块：

4. 双向链接

Obsidian 的 双链 也会在构建期解析成站内链接：见 立项记。链接目标不存在时不会构建失败，只会退化为纯文本——草稿期很友好。

5. 代码高亮亮暗双主题

fn main() {
    let posts = vec!["hello-noobty", "editorial-seven-details"];
    for p in &posts {
        println!("sediment: {p}");
    }
}

高亮配色跟主题令牌走，切暗色模式代码块同步切换，不需要重新加载任何东西。

6. 性能预算是硬约束

7. 暗色是一等公民

不是「反色」，而是独立的一套令牌：暗色下降低纯白冲击、accent 提亮一档、阴影换微光。跟随系统，也可手动切换并记住。

以上细节全部沉淀在主题源码里，改起来比看起来容易——毕竟整个站点就是一堆文本文件。