记录本站从零搭建的过程、技术选型思考、踩坑经验与迭代优化。
建站日志
Build LogDay 29 — LiveRoomController 从 1445 行拆到 660 行：Flutter 上帝类重构实录
将 1445 行上帝类 LiveRoomController 拆分为 4 个专职文件，最终缩减至 660 行（-54%）。同时清理 AppSettingsController 模板代码（-19%）、迁移 UI Sheet 到 Page 层、全项目 91 文件零 analyzer 问题。
Day 25 — 播放器持久化与 View Transitions 的兼容之战
修复播放器三连 bug（浏览器后退失效、页面切换累积 UI、URL不更新），根因直指一个空字符串的 persist-id。R2 重传 189 首。音乐库大整理：東京事変独立、专辑排序、元数据修复。
Day 24 — 文章排版优化 + 左侧目录导航栏
修复了两个问题：1) 项目使用 Tailwind 的 prose 类但未安装 @tailwindcss/typography 插件，导致文章排版完全依赖浏览器默认样式，阅读体验差；2) 为长文章添加可跳转的左侧目录栏。方案上用自定义 .article-content 替换 prose，避免引入外部依赖；TOC 用客户端 JS 动态扫描 heading 生成，fixed 定位不占文档流，配合毛玻璃背景和滚动高亮。
Day 23 — 性能优化：修复 25fps 卡顿与 View Transitions 主题丢失
从用户反馈的 '网页卡顿' 出发，深入诊断并修复了三层性能问题：backdrop-blur 导致 GPU 重绘过载、timeTheme.js 的 applyColor 每帧无脑调用造成 DOM 重排和 PMREM 环境贴图重建、所有页面使用硬编码颜色导致时间主题失效。同时修复了 View Transitions 切换页面后颜色回退到白色的兼容性问题。
Day 22 — 路由分类修复：多级嵌套目录的正确提取
修复博客路由系统中因路径解析错误导致 interview 等嵌套目录下的内容无法归入正确分类的问题。将 `parts[length-2]` 统一改为按 `categories` 关键词定位的索引方案，同时补全了缺失分类的中文显示名，确保构建产物路由结构正确。
Day 21 — 让 3D 场景拥有时间灵魂：24 小时昼夜系统
为博客引入基于新加坡时区的 24 小时动态背景系统：Three.js 3D 场景根据时间自动变色，UI 卡片和文字同步切换明暗模式
Day 20 — 3D 场景搭建：白色空间、蜂巢网格、末影水晶与纯脚本持久化
引入 Three.js 构建 3D 背景：球面曲率蜂巢网格、银色金属末影水晶、浮动阴影，以及解决 View Transitions 导致 3D 场景闪烁的纯脚本解耦方案
Day 19 — 自制播放器：从 APlayer 到自建，UI 反复迭代的全记录
彻底替换 APlayer，用 Preact + HTML5 Audio API 自建音乐播放器。深色毛玻璃、彩灯边框、阶梯面板、SVG 图标、竖排音量……两天内迭代了十几个版本
Day 18 — 首次部署：从 Pages 到 Workers 的认知修正
实际部署时发现项目已经配置了 Workers 模式而非 Pages，全程踩坑记录：构建、部署、R2 自定义域名绑定、音频上线
Day 17 — 音乐播放器架构决策：为什么选 Astro + R2
参考 Hugo + PJAX 博客的播放器方案，分析为什么对 Astro 技术栈来说 View Transitions + R2 + D1 是更好的选择
Day 9 — 毛玻璃卡片加白底，提升视觉层次
全局毛玻璃卡片白色底色从 25% 透明度提升至 60%，覆盖 9 个文件，让卡片在渐变背景上更显眼
Day 6 — 阅读面板加宽 + 透明度滑块修复 + 全站毛玻璃样式统一
阅读面板加宽到 4xl、修复 View Transitions 下透明度滑块不工作、全站返回按钮和社交图标统一毛玻璃样式
Day 5 — 社交链接优化 + 点赞功能 + Tag 分类系统
Email 复制到剪贴板、GitHub Octocat 图标、Cloudflare Workers + D1 点赞 API、Tag 标签分类系统
Day 4 — Added white background for reading
Added white reading backdrop with adjustable opacity slider for blog post pages.
Day 3 — Added categpries
Added new categpries
Day 2 — CSS 骨架修复 + 灯条动画 + 博客分类系统
修复 Tailwind 不生效、实现卡片 LED 灯条动画、搭建博客分类路由、连接建站日志文档
Day 1 — 搭建个人网站的地基
注册 Cloudflare / GitHub，买域名，部署 Astro 博客，搭建页面骨架，Tailwind CSS 初装修