博客近况：一次关于设计、阅读与性能的更新

最近花了一些时间继续整理这个博客。和最初从 Typecho 迁移到 Astro 时相比，这次没有更换底层框架，而是把注意力放在了更具体的地方：页面是否足够清楚，长文是否容易阅读，图片是否方便浏览，以及那些平时不太显眼的性能和 SEO 细节是否正确。

这不是一次推倒重来的改版，更像是对博客的一轮重新校准。下面记录一下最近完成的主要更新。

重新整理视觉语言

这一轮首先调整的是整体主题。页面继续保留黑白为主的基调，但重新梳理了首页、文章列表、导航和内容区域之间的层级关系。

首页现在用更明确的标题介绍站点和作者，最新文章、个人简介与导航各自承担清晰的职责。减少装饰并不意味着页面只能朴素，真正重要的是留白、字号、边界和内容密度之间是否协调。

深色模式也一起做了细节调整。页面会优先读取之前保存的主题设置，没有手动选择时则跟随系统偏好。主题初始化脚本会在页面绘制前执行，尽量避免刷新时先亮后暗的闪烁。

博客最终还是要回到阅读本身，所以文章页是本轮修改最多的地方之一。

目前文章页包含阅读进度、侧边目录、阅读时长和上下篇导航。对于较长的文章，目录可以帮助快速理解结构，顶部进度条则提供一个轻量的阅读位置提示。

这次还修复了一个容易被忽略的问题：正文原本使用进入视口动画，但长文章内容块的高度远大于浏览器窗口，导致可见比例始终达不到观察阈值，正文偶尔会一直保持透明。现在观察条件改为只要内容与视口相交就触发，长文也能正常显示。

引用块的样式也重新调整过。浅色与深色主题使用各自合适的背景和边界，同时统一了模糊效果的兼容写法。它仍然足够醒目，但不会从正文中突然跳出来。

页面右下角新增了返回顶部按钮。它只在页面滚动后出现，接近页脚时会自动避让；如果系统开启了“减少动态效果”，滚动行为也会相应调整。

除了文字，我也希望这里能容纳一些照片和图像记录，因此新增了相册页面。照片按主题分组，每个相册都有独立页面，可以从相册索引进入查看。

图片预览使用 Fancybox 实现。点击相册照片或文章正文图片后，可以在灯箱中查看大图，并在同一组图片之间切换。正文中的普通 Markdown 图片会在页面加载后自动接入预览，不需要为每张图片额外编写 HTML。

这个功能没有改变写作方式，文章里仍然只需要使用标准 Markdown：

![图片说明](/images/example.jpg)

保持内容格式简单，是我选择静态博客的重要原因之一。

图片变多以后，加载策略也需要跟上。现在文章正文中的图片会在构建阶段自动添加浏览器原生懒加载属性：

<img src="/images/example.jpg" alt="图片说明" loading="lazy" decoding="async">

loading="lazy" 会让浏览器在图片接近视口时再请求资源，decoding="async" 则避免图片解码阻塞其他页面内容。整个实现直接使用浏览器原生能力，没有增加新的客户端脚本或依赖。

首屏图片没有一律懒加载。首页头像、相册封面第一张和相册详情前几张图片仍然优先加载，避免为了追求一个漂亮的性能指标，反而让用户最先看到的内容出现延迟。性能优化最终还是要服务于实际体验。

这次还修复了一个 SEO 配置问题。站点地址原本同时存在于站点常量和 Astro 配置中，其中一处仍然保留着示例域名，导致 canonical、RSS 地址以及 Open Graph 图片错误地指向了 example.com。

现在 Astro 配置直接读取统一的 SITE.url。以后只需要修改一个地方，以下内容就会同步使用正确域名：

这种修改看起来不影响页面外观，却决定了搜索引擎和社交平台如何识别网站。配置只有一个真实来源，也能避免以后再次出现同类问题。

功能增加了，但博客的基本方向没有改变：文章继续使用 Markdown 管理，Astro 在构建时生成静态页面，客户端只保留确实需要的交互脚本。

我不希望这里变成一个不断堆叠功能的项目。相册、图片预览、目录和返回顶部按钮之所以留下，是因为它们分别解决了明确的问题；图片懒加载选择原生实现，也是因为没有必要为这件事再引入一套复杂方案。

接下来会继续整理旧文章、替换示例资源，并根据实际阅读体验调整细节。博客不需要频繁改头换面，但应该随着内容一起慢慢生长。

这次更新大致如此。页面比以前完整了一些，也更接近我希望长期使用的样子。剩下的事情，就是继续写下去。