这个博客原来是 Hexo + 默认主题。默认主题并不难看,但它默认了一件事:博客是一个按时间排列的文章列表,除此之外没有别的结构。

我想让首页自己讲一件事——人往上走是一段一段的。所以整个站点按“离地高度”重新编排:

章节 高度 主题
发射台 0 km 我,以及这个站点
对流层 12 km 技术栈
卡门线 100 km 项目
近地轨道 400 km 日志与笔记
地球同步轨道 35,786 km 日常
月球以远 384,400 km 联系与远方

为什么高度是对数的

六章里前四章全部挤在 400 km 以内,最后一章一下跳到 38 万公里。如果高度轴按线性画,前四个节点会重叠成一个点。

所以右侧导航轴使用 log10 刻度:

export const altitudeOffset = (altitudeKm: number) =>
  (Math.log10(altitudeKm + 10) - minOffset) / (maxOffset - minOffset);

+10 是为了让 0 km 也能取对数。这样每个章节在轴上都有一个看得见、点得到的位置。

技术选择

  • Astro:内容在构建期就变成 HTML,首页不背任何框架运行时。
  • 纯 CSS + 内联 SVG:六个场景(发射台、云层、卡门线、地球弧、同步轨道、月球)全部是代码画出来的,不加载一张图片。
  • 明暗双主题:同一套语义变量,深色是太空,浅色是地面控制中心。

后面我会把每一章都当成一个可以继续长内容的地方,而不是装饰。