站点升级手记 03：相册和随机音乐，为什么 Gallery 不该只是照片墙
相册页面的定位变化
相册最初只是图片列表，用户进来看看图，体验很短，也缺少记忆点。升级之后，Gallery 被重新定义成一个停留型页面：照片墙仍然是主体，但音乐、封面、随机切歌和光效一起参与氛围。
这个方向并不是把页面做复杂，而是让它有自己的场景。技术博客也可以有个人表达，Gallery 就是站点里最适合表达审美和情绪的地方。
随机音乐接口
为了避免每次随机歌曲都刷新整个页面，后端新增了随机音乐接口。前端点击随机时只请求一首新歌，更新封面、标题、作者和播放地址。这样页面不丢状态，播放器也更接近现代 Web App 的交互方式。
音乐数据来自原有的音乐库，接口只返回页面需要的结构，不把数据库细节暴露给前端。这个接口以后还可以继续扩展，比如按语种、情绪、歌手、收藏状态随机。
- 无刷新切歌，减少页面跳动。
- 保留独立音乐页，方便以后扩展完整播放列表。
- Gallery 内置播放器，让照片和音乐形成同一个浏览节奏。
- 对播放器错误状态做兜底，避免控制台重复报错。
看板娘为什么在 Gallery 隐藏
Gallery 的底部有播放器和光效，左下角还有图片浏览区域。如果看板娘一直覆盖在那里，会挡住交互，也会让页面视觉重心变乱。所以 Gallery 页会隐藏看板娘。
后面修复 Live2D 问题时也验证了一个经验：隐藏不等于销毁。对 canvas、音频、Live2D 这类有内部状态的组件，切页时粗暴删除再重建，很容易引发贴图、事件或播放状态异常。
相关推荐
开发者工具
请我喝咖啡
如果内容帮到了你，可以赞赏支持继续更新。
赏