用 Astro 复刻 MiMo 官网风格的博客

这个站的设计参考了小米 MiMo 官网。把它的视觉拆开来看，其实是一套非常克制的「纸面编辑风」。

设计语言拆解

从原站提炼出的核心要素只有五条：

暖白纸面底色（#F5F4F1）配纯黑文字，接近印刷品而不是屏幕；
超大加粗标题，首屏一句话占满整屏；
发丝分隔线（1px、低透明度黑）代替卡片阴影和圆角堆砌；
索引式列表：序号、衬线标题、小字日期、右箭头；
签名交互：悬停时整行黑白反转。

索引列表的实现

列表就是一段语义化的 HTML 加 CSS Grid：

<a class="row" href="/blog/hello-world/">
  <span class="row-num">01</span>
  <span class="row-main">
    <span class="row-title">标题</span>
    <span class="row-date">2026年10月5日</span>
  </span>
  <span class="row-arrow"><span>→</span></span>
</a>

反转效果只需要在 :hover 上换两块调色板：

.row:hover {
  background: var(--invert);       /* #111110 */
  color: var(--invert-paper);      /* #F5F4F1 */
}

.row:hover .row-arrow > span {
  transform: translateX(7px);      /* 箭头轻轻滑一下 */
}

字母平铺纹理

首屏背景那层淡淡的字母墙，是构建时生成的网格，每个字母带确定性的伪随机旋转和透明度：

{Array.from({ length: rows * cols }, (_, i) => (
  <span style={`--r:${rot(i)}deg; --o:${op(i)}`}>{letters[i % letters.length]}</span>
))}

透明度压到 5% 左右，刚好在「看得见」和「不抢戏」之间。

为什么选 Astro

默认零 JS，页面就是 HTML，Lighthouse 轻松满分；
组件写法接近原生 HTML/CSS，改样式不需要学一套样式系统；
Content Collections 自带 frontmatter 类型校验，少写一个字段直接报错；
对 Cloudflare Pages 是一等公民，npm run build 的 dist/ 扔上去就能跑。