我的博客是九年前高二时设计的,踩过知乎问题“你见过的最棒的个人博客界面是什么样的?”中Flipped 的高赞回答 ↗所说的大部分雷点:
请问你的博客是那个给文本加上渐变配色代码块,用衬线字体article巨大阴影半透明背景加莫名其妙的地方抄来的canvas动效,打开会自动播放网易云音乐且加载一个Live2D*小人挡住播放器控件,还有自定义光标加上点击特效且复制文本的时候会自作主张加上版权通告,切出网页以后title还会变成莫名其妙的文本内容的吗

这么多年过去,我的审美变了、我的受众也变了,我变得更在意受众的浏览体验。因此我陆续删除了博客之前的冗余装饰:live2d 看板娘、侧边栏音乐播放器、自定义鼠标指针、鼠标点击烟花爆炸特效、键盘打字礼花特效。
去掉这些后,博客轻巧了很多,但仍然加载很慢,因为我使用了大量的图片、自定义字体、JavaScript 脚本。我想要删除文章的封面图以加快载入速度,但因主题限制,删除封面后整篇文章被展开填满主页(原来这就是我一开始给每篇文章配图的原因)。于是我打算重构博客,调研后,选择用 Astro ↗ + Astro Theme Pure ↗ 。
耗费了两周时间,逐篇修改 270 篇历史文章,规范为标准 Markdown 语法,修正错别字和排版错误,最终博客焕然一新。

变化如下:
- 降低认知负荷
- 减少导航栏选项数量:主导航项由 5 个缩减至 3 个,两个次要选项以不易注意的小图标展示,仅供有功能需求时操作;
- 导航栏选项重命名,便于理解:Blog→全部文章、留言→留言板、自述→关于博主;
- 文章去除无关封面图:过去为了好看,我会为每篇文章搭配一张与内容无关的封面。而现在我想专注于内容本身,摒弃无关的信息,因此不再特意放封面图了。(除iOS 旧版 APP 推荐与降级方法 ↗这篇浏览量数十万的文章外,因其封面图中的人物风子已几近于博客的视觉符号,为降低风格骤变而生的突兀感而保留)。
- 布局以内容优先
- 归档、标签从导航栏移除,隐入全部文章板块;
- 文章标题下增加内容摘要,便于读者决定是否浏览;
- 文章反应由 Waline 默认的 6 个表情选项简化为 3 个更直观的代表「好、中、差」的选项,以便量化文章的受欢迎程度。

- 性能优化
- js 延迟加载;
- 弃用局部低频使用的字体;
- 博客图标缩小至保障清晰的最低分辨率。
Google Lighthouse 评分从改版前的移动端 56 分 / 桌面端 76 分,提升至双端满分。

