这个博客原来是 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:六个场景(发射台、云层、卡门线、地球弧、同步轨道、月球)全部是代码画出来的,不加载一张图片。
- 明暗双主题:同一套语义变量,深色是太空,浅色是地面控制中心。
后面我会把每一章都当成一个可以继续长内容的地方,而不是装饰。