把「山间来信」慢慢打磨好：2026 年 11 月 2 日网站改进记录
今天，我围绕自己的个人网站「山间来信」做了一轮集中改进。从五时主题、油画风格的小组件，到搜索、音乐、手机适配，再到图片加载、文章地址和页面切换，修改一路推进到了 v2.2.5。
整个过程借助 AI 编程工具协作完成：提出具体问题、讨论效果、修改实现，再通过截图、实际操作和检查结果反复验收。这篇文章记录今天已经完成的工作，也留下仍需继续观察的部分。
图 01 本轮更新后的正式网站首页，保留雪山横幅和原有三栏布局。
一、让背景融入页面，让主题跟随时间
视觉改进的重点，是减少大块主题色的存在感，让背景素材自然过渡到页面和组件中。我希望保留雪山与山野的气息，同时增加颜料铺在画板上的粗糙感，使页面有可辨认的笔触和纹理。
最终沿用了清晨、日间、黄昏、夜晚和深夜五个时段，让背景、卡片与文字配色一起变化。访问者不需要再选择一套主题色，页面会跟随当地时间调整；深浅色和动效偏好仍可以单独设置。
背景素材也不再作为独立图片贴在文章列表下面，而是成为页面环境的一部分。
图 02 清晨时段效果，使用最终版本在本地预览中模拟时钟展示。
图 03 深夜时段效果，同一布局随时间切换背景与配色。
二、让小组件成为画面的一部分
小组件经历了几轮调整。最初的问题是皮肤与组件本体有割裂感：图片只占一部分，边缘又出现明显的纯色色块。之后改为让画面铺满组件，再以连续色层和渐变承接文字区域。
结合参考素材形成的六张油画风格皮肤，应用到了首页文章、开源项目、友链、说说、留言以及其他内容卡片中，日历和天气也统一到同一套视觉语言。其他页面补上了与首页一致的背景画板。
组件增加了柔和投影、边缘高光和细边框；桌面首页左右两列的顶部与底部也做了对齐，让页面更整齐。
图 04 正式网站的开源项目页，背景画板与内容卡片使用统一的油画风格。
三、把首页里“不太顺手”的地方补齐
首页原来的独立「山间拾光」板块被移除，里面的短句整合到了右下角的小猫中。点击小猫就能读到一句话，再点一下换一句，减少了首页占用，也让这个小交互有了实际内容。
图 05 点击小猫后展开的「山间拾光」，短句随点击轮换。
搜索框也从视觉入口补成了可使用的全站搜索。现在可以检索文章标题、正文、分类标签，以及项目、说说、音乐、相册、友链和关于页内容；结果提供匹配数量、摘要和跳转入口，并支持回车、方向键与清空操作。
图 06 输入关键词后，搜索结果能够找到站内已有的项目。
四、让电脑和手机上的文字都更清楚
桌面端首先调整了顶部与左侧导航的字号、字重，同时提高正文、搜索结果和其他栏目文字的对比度。「归档」入口与页面名称改成了「文章」，原有链接继续保留。
夜间模式下，文章卡片和独立阅读页的封面会降低亮度与饱和度，默认封面和自选封面都生效；这个处理只影响显示，不改动原图。
图 07 夜间文章阅读页，封面亮度与周围环境更协调。
手机端的导航抽屉也补上了皮肤背景，文字大小和对比度同步调整。RSS 的公开页脚入口则被隐藏，原有订阅地址仍然保留。
图 08 手机端导航抽屉，背景、文字和按钮保持统一风格。
五、修正音乐播放器的状态反馈
音乐部分处理了移动端静音、零音量恢复以及音量记忆，也修正了音频已经加载、界面却仍显示「00:00 / 00:00」的问题。
现在元数据载入后会同步真实时长，当前这首 188 秒的音频显示为「00:00 / 03:08」；播放时更新时间与进度，切歌后重新同步。时长无效时显示「--:--」，加载失败时提供明确提示。
这些处理使用真实 MP3 完成了浏览器和移动设备模拟检查，实际手机扬声器的听感仍需要继续回访确认。
图 09 音乐页正确显示 03:08 的真实时长，并保留播放、音量和歌词入口。
六、补上来信入场和细小的交互反馈
首次访问增加了「山间来信」入场层：当前时段背景、当天短句、日期，以及一枚「拆开来信」邮戳。24 小时内回访会跳过，也可以通过右上角按钮或 Esc 直接进入。
桌面端通过用户点击尝试音乐淡入；手机端点击入场不会自动播放。用户曾手动暂停、静音或将音量调为零时，不会再自动开启。
雪山下方的波浪改成了从左向右流动，副标题加入逐字输入、停顿和删除，并改用透明磨砂玻璃底衬。卡片悬停、按钮按下、链接下划线、图片载入和滚动浮现也补上了反馈。动效可以分别关闭，并遵循系统的「减少动态效果」设置。
图 10 「拆开来信」入场层；静态截图展示构图，淡入与波浪流动需要实际访问体验。
七、给图片减负，控制手机首屏体积
增加背景和皮肤之后，图片加载成了今天的重点问题之一。我最初在 390px 宽度下测得首屏图片约 2.09 MB，其中包含手机不需要的桌面资源，以及远大于实际显示尺寸的头像和封面。
这轮优化重新压缩了背景与底纹，生成独立的移动资源、64px 头像和小尺寸封面，并检查响应式图片选择是否真正生效。首屏背景提高加载优先级，非首屏资源延迟加载；手机不预加载下一时段背景，图片也预留显示比例。
最终版本在 390 × 844 的本地移动模拟中，五个时段的首屏图片均低于 500 KB 的目标： 时段 首屏图片体积，约
清晨 143 KB
日间 162 KB
黄昏 127 KB
夜晚 140 KB
深夜 137 KB
这五组请求中没有桌面背景图片。今天较早的 v2.2.4 还完成过 Lighthouse 移动端测量：正式域名 Performance 为 90，本地为 95。最终 v2.2.5 复核了图片预算，没有重新测量 Lighthouse，因此不把前一版本的分数直接当成最终版成绩。
图 11 390px 宽度下的手机首屏。图片体积来自网络请求记录，不能仅凭截图判断加载速度。
八、修复导航切换时的一次白闪
最后一轮修复集中在切页体验。原来的主容器会先变成全透明，旧内容又被立即移除，新内容尚未显示时就出现了空白帧；两套冲突动画和背景重建进一步加重了闪烁。
处理后，主容器透明度固定为 1，内容准备好后再替换。背景绘制层常驻在路由内容之外，雪山及装饰节点复用；标题、正文、列表和侧栏分别过渡，上移 8px，以 60ms 错峰。
支持 View Transitions 的浏览器使用内容块快照交叉过渡，其他浏览器降级为内容块动画；开启「减少动态效果」时直接切换。动画结束或取消后清理临时渲染提示，快速连续点击时也避免过期请求覆盖最新页面。
在本轮五种路径、共 1,732 帧的采样中，主容器透明度始终为 1，没有出现空的主容器；路由切换新增背景请求为 0，Performance 时间线记录的背景重新解码也为 0。
九、整理文章地址、分享信息和订阅
文章地址从 UUID 形式整理为语义化地址，例如 /posts/hello-world/。旧地址仍能访问并跳转，站内链接、分享、canonical、站点地图和 RSS 同步使用新地址，文章 ID 与留言关联保留。
文章页补充了站点名称元信息的缺失兜底与去重；sitemap.xml 的各项加入 lastmod，重复构建不会凭空刷新修改日期。另外增加 /feed.xml 订阅别名，返回与 /rss.xml 一致的内容，兼容更多阅读器。
这些修改沿用现有的静态生成、预渲染与路由结构，没有引入新的前端框架或第三方运行时依赖。
十、网站更新之外，也把写作工具维护好
今天还完成了内容与代码分离、栏目模块边界、留言管理和本地预览等二期基础工作。写作内容作为独立数据保存，网站页面、订阅与分享信息从同一份内容生成；管理器继续提供编辑、预览、备份与发布入口。
Windows 管理器曾出现实际解压路径下的启动异常，定位后调整了文件复制方式和错误提示，并补上对应回归检查。最终，原目录中的管理器同步升级到了 v2.2.5，可以继续使用。
程序、文章和用户媒体分别保存。升级前后核对了内容与媒体哈希，保留备份、源码版本和回退记录；安装包与源码包排除了账号令牌、私人运行数据和数据库。
图 12 升级后的「山间来信管理器」，可以在本地查看网站预览后再发布。
十一、今天的验收结果与后续计划
最终版本已发布到正式网站。下表列出最终一轮的检查结果，各版本之间重复执行的用例不作累加：
检查组 通过数量
路由与切页专项 88 项
原有功能浏览器回归 61 项
构建与 SEO 检查 40 项
移动首屏图片检查 25 项
正式域名与管理器内嵌预览也完成了核验。这里的结果主要来自 Chromium、移动设备模拟和本地检查，不能代替所有真实设备与网络环境。后面还需要继续观察真机音乐播放、长期访问体验，以及搜索引擎收录和外部分享卡片的实际表现。
今天的工作让网站从“有了一个页面”，逐步走向能阅读、能检索、能维护的小空间。接下来，我也会继续把学习、项目和日常写进这里，让这次改进真正服务于之后的记录。