Fqzlrのblog

缘起#

上周末翻出了 Firefly 流萤主题的仓库，越看越喜欢它的两样东西：背景视频和壁纸切换的顺滑过渡。正好自己的博客在这两块都有历史遗留问题——切壁纸会白屏闪一下，切页面时舞台高度单帧硬切——于是决定动手，能抄的设计就抄，抄不动就自己补。

这轮改动一共四块：背景视频、壁纸过渡、公告板、音乐播放器打磨。

背景视频：按需加载，零额外负担#

复刻 Firefly 的背景视频功能，但按 Shirone 的「零额外负担」规则重做：

• 配置驱动，enable: false 或不配置时零 DOM、零请求、零打包体积；
• 导航栏右侧有播放/暂停按钮，右下角 FAB 也有快捷入口；
• 点击才开始加载视频（不浪费流量），在用户点击手势内直接有声播放，被浏览器自动播放策略拦截时降级静音重试；
• 支持多个视频源，order 顺序 / random 随机。

这次往源列表里加了两个本地视频（/videos/bg-sp01.mp4、bg-sp02.mp4），和原来的远程源一起顺序轮播。

壁纸切换：舞台全程可见#

原来的实现是「旧图卸载 → 新图加载」，中间那个空档就是白屏的来源。参考 Firefly 改成统一舞台容器：

• 切换时打开一个 520ms 的过渡窗口，旧图淡出、新图淡入在同一个容器里完成，舞台底色兜底，永不露白；
• 容器高度走 CSS 过渡，新图加载完成后尺寸变化也是平滑的；
• swup 切页（首页 ↔ 文章页）时舞台高度不同，以前是单帧硬切（实测最大 495px 的跳变），现在在落位前打开过渡窗口，与内容区 400ms 过渡同步，并写了一条 Playwright 契约测试锁定「单帧位移必须小于 120px」。

顺手把首页 hero 模式加了个滚动渐模糊：壁纸从顶部的清晰状态，随滚动逐渐虚化到设定值，进内容区时视线自然聚焦到文字上。

公告板#

右下角 FAB 新增公告按钮，点开是一个轻量弹窗：公告条目支持标签（重建/优化/友链/欢迎）、日期、正文和「查看详情」外链。

弹窗卡片背景特意用了和文章卡片同一个 --card-bg 令牌——第一版用了偏灰一级的 surface-container，摆在一起明显两个色，改成同源令牌后就完全一致了。配置关闭或列表为空时整块零 DOM。

音乐播放器：悬浮唱片会「关」了#

三个小修复：

1. 悬浮唱片关闭按钮：鼠标移到唱片上会展开完整面板，右上角现在有个 ×，点一下悬浮球就消失（不打断播放），状态持久化，刷新也不会回来；想恢复去侧栏播放器工具栏点「悬浮播放器」开关即可。
2. 悬浮歌词误显示：以前没放歌的时候，屏幕底部偶尔会孤零零挂着一个歌词关闭按钮——原因是显示条件只判断了「开关开 + 歌词已加载」，没判断是否正在播放。现在只有真正播放时歌词条才浮现。
3. 视频按钮显示修复：导航栏的视频按钮以前水合前会出现播放/暂停两个图标并排的错乱，用 :not([data-playing="true"]) 选择器保证首帧只显示播放图标。

收尾#

还有一批更早的小修也一并带上了：配色首帧闪变（localStorage 缓存 + 首帧内联应用）、导航栏首帧透明、显示设置面板五个分区支持折叠、新访客默认外观固定为 Monochrome + 全屏壁纸 + hero 布局。

老规矩，全部改动走 astro check 0 errors + Playwright 实测 + 构建验证后才上线。折腾告一段落，接下来准备写点不是折腾博客的文章了（大概）。