个人网站重建

项目背景

这个项目源于将网页开发课程中的知识应用到现有个人网站的想法。AI 辅助开发让多种渲染方案的调研与迭代变得可行，也为更复杂的交互设计提供了尝试空间。项目目标是在保留旧文章的基础上，将 Hexo 博客重建为易于维护的内容平台，并为博客、作品集和关于页面建立一致的视觉风格。

应用架构

Nuxt 4 与 Vue 3 负责路由、共享布局和响应式状态。Nuxt Content 管理文章集合，结构化的作品集内容则经过校验后编译为 JSON。网站最终生成静态 HTML 和资源文件，部署构建产物无需持续运行 Node.js 应用服务器。主要内容页面共用一个持久化的卡片外壳；导航时替换内部内容并执行过渡动画，避免反复重建玻璃表面。雨景也会在路由切换期间保持运行。

共享渲染管线

视觉系统以 Lucas Bebber 的 RainEffect 和经过适配的 ybouane Regular Glass 渲染器为基础。雨景由 WebGL 实时绘制，而非背景视频。玻璃适配器在雨景完成一帧绘制后直接采样现有画布，避免为每张卡片单独截取 DOM。源纹理更新跟随雨景的帧生命周期；仅更新几何位置时，可以复用已上传的图像。采样范围限制在视口附近，因此长文章不需要生成与整个文档等高的纹理。Dock 的多个玻璃表面共用渲染器，减少重复创建上下文和重复处理。

焦点过渡与镜头表现

博客首屏通过焦点变化，将视觉重心在远景与雨滴之间转移。离开首屏时，过渡由滚动位置驱动；返回时则使用按时间推进的曲线。共享控制器协调焦点变化、路由导航与阅读位置恢复。虚化采用圆盘采样，同时处理高光并补偿对比度，使远处灯光在模糊程度增加时仍保留辨识度。轻微改变取景范围，用来表现对焦呼吸。这些着色器效果是对视觉感知的近似，并非完整的物理相机模拟。焦点状态不变时，会复用计算成本较高的背景虚化结果。

性能与交互取舍

最棘手的问题是让玻璃内的折射画面在滚动和浏览器边界回弹时始终与背景对齐。后续尝试的一套渲染方案减少了边缘缺口，却带来了长时间运行后的性能下降，以及卡片初始化时的黑闪。最终保留较早的 Regular Glass 实现，并禁用横纵两个方向的边界回弹。这个选择以舍弃弹性边界效果为代价，换取更稳定的画面对齐，同时保留普通的原生滚动。实验版本已归档，便于回退与比较。Chrome 性能录制和反复的视觉检查为这些决策提供了依据，但项目并未承诺所有设备都能达到统一帧率。

独立内容工作流

网站代码、文章与作品集内容分别保存在独立 Git 分支中，并通过本地 worktree 管理。文章使用 Markdown 正文和元数据，作品集使用结构化 YAML front matter。内容合成脚本在替换网站快照之前完成校验，拒绝不支持的字段和路由，并保留旧数据以便恢复。资源文件和应用代码仍由网站分支管理。这样的分离让日常内容编辑无需改动应用的其他部分。

• 中英文文章分别编写和保存，并根据当前语言选择对应文件；网站不会在运行时翻译文章正文。
• 迁移时保留文章原有的日期、媒体资源和旧链接路径，并通过分语言路由与语言替代版本元数据支持双语访问。
• GitHub Actions 分别检出三个内容源，记录各自的提交版本，校验合成内容，并生成可下载的静态构建产物。部署仍是独立步骤。
• 隔离的本地构建使用相同的内容合成与校验脚本。在依赖已安装的情况下，无需访问 GitHub，也可以从本地内容或已提交的快照完成构建。

验证与现有限制

自动化检查覆盖内容结构、路由生成、语言行为、渲染生命周期辅助逻辑及生成后的 HTML。浏览器检查涵盖桌面与移动端布局、快速滚动、页面导航、阅读位置恢复，以及渲染器就绪状态。针对减少动态效果和减少透明度的偏好，网站提供静态回退方案。这些检查与视觉审查相互补充：GPU 负载、长时间运行和浏览器特有的合成行为，仍需在有代表性的设备上持续分析。目前尚未进行生产环境负载测试，也没有完成全面的跨浏览器性能基准测试。

项目贡献与工程经验

项目工作包括定义交互要求、评估第三方库、整合渲染生命周期、设计内容构建流程，以及在浏览器中审查实际表现。AI 参与了调研、实现、测试和迭代；雨景与玻璃效果的基础实现仍归功于各自的上游作者。最重要的经验是，视觉连续性不仅取决于着色器质量，也依赖生命周期与坐标管理。复用场景、减少重复计算，并明确作出交互取舍，比不断增加渲染逻辑的复杂度更能带来一致的体验。