返回博客

Static Site / Accessibility / Performance

静态站点可访问性与索引整理

本周围绕个人站点本身做的一次整理:Notes 详情页、较安静的 Spacewar 入口、更清晰的项目卡片,以及更严格的发布检查。

Synthetic site maintenance panel with note pages, project metadata, and a paused canvas preview.

这次为什么调整站点本身

本周主要整理的是记录站点本身,而不是单独的插件或本地工具。检查目标并不复杂,但都和长期维护有关:移除误导性的交互,降低首页 Spacewar 小游戏的首屏成本,并让内容数量增加后的长列表更容易浏览。

站点原本已经具备较轻的 Astro 构建、多语言内容集合、Open Graph 元信息、RSS、sitemap 和浏览器 QA。相对薄弱的部分在交互行为:Notes 卡片看起来可点击却没有详情页,首页小游戏会随页面加载立即初始化,项目卡片也把不同类型的项目放在同一种平铺列表里。

Notes 变成真实页面

Notes 现在和 Blog 一样拥有详情页路由。每张 note 卡片都会指向 /notes/<slug>/,简体中文和日文页面也有对应路径。文章布局被调整为同时支持 Blog 和 Notes,并继续在同一处处理 canonical 与多语言 alternate 链接。

这是一个很小的结构调整,但意义比较明确。Notes 虽然短,但同样有日期、描述、标签、语言信息和翻译键。把它们作为真实页面处理后,键盘导航、搜索引擎收录,以及未来从长文章引用短记录都会更自然。

Spacewar 入口变得更安静

首页小游戏仍然保留视觉存在感,但不再在页面加载时启动完整运行时。首屏只绘制静态 canvas 预览,并保留开始按钮。点击开始后,游戏才创建调试状态、启动动画循环,并开始监听控制输入。

动画循环也会观察页面可见性、视口交叉状态和 reduced-motion 偏好。当页面切到后台、面板离开视口,或系统请求减少动效时,循环会停止,不再持续绘制。运行状态的发布频率也降低了,普通帧不会再每次都序列化完整游戏状态。

项目卡片增加元信息

Projects 卡片现在带有分类、状态和简短技术栈。内容模型支持 plugin、local tool、website、data/benchmark、game utility 和 writing 等分类;状态保持简单,只分为 active、experimental 和 archived。

这让 Projects 页面更像索引,而不是单纯清单。公开和非公开项目仍然可以放在同一个页面里,非公开项目也不必附链接。卡片在进入较长描述之前,就能先说明它属于什么类型、当前处于什么状态。

验证随内容一起更新

发布检查也一起调整。现在会检查 Notes 详情页是否生成、Notes 是否还存在 href="#"、Header 是否标记当前栏目、skip link 是否存在、Spacewar 是否没有在静态 HTML 中被初始化,以及项目卡片是否包含分类和状态。

原先写死的 manifest 数量也改成了三语数量一致性检查。这样后续新增博客时,构建不会因为固定数字变化而失败;检查重点变为英文、简体中文和日文是否保持数量一致。

sitemap 输出也改为更常见的 sitemap.xmlrobots.txt 指向这个名称。浏览器验证覆盖了 16:9 桌面、iPhone 17 Pro 尺寸的竖屏,以及常见安卓竖屏比例。

仍然保持轻量

封面图片继续使用轻量 SVG。当前封面主要是结构示意图,生成多套位图尺寸会增加维护成本和字节数,收益并不高。图片标签已经补充 sizes,文章页首图保留 fetchpriority="high"

搜索仍然保持保守。站点已经导出内容索引,但在完整的前端搜索界面出现之前,更重要的是让页面结构、Notes 真实链接和项目索引先保持清晰。