约 2491 字
网站修复记录
Vercel 回源用量告警：把图库筛选改回静态交付
一次 Fast Origin Transfer 告警，暴露了爬虫、组合筛选地址和动态渲染的叠加成本。记录如何保留导航体验，同时让书法与摄影内容恢复静态交付。
内容加载中
Archive
技术文章、建站记录与学习笔记，按时间和主题归档。
28 篇文章
主题
网站修复记录
一次 Fast Origin Transfer 告警，暴露了爬虫、组合筛选地址和动态渲染的叠加成本。记录如何保留导航体验，同时让书法与摄影内容恢复静态交付。
网站修复记录
围绕首次访问、模式切换与加载性能，整理 3D 首页上线前的修复：压缩场景资产，并恢复双语页面的静态生成与边缘缓存。
网站修复记录
从朝向错位与复原公式失效出发，统一魔方的屏幕与逻辑坐标，并调整初始状态、拖拽范围和聚焦尺寸。
3D 首页开发记录
最后一轮把小物件从装饰变成局部应用：魔方按层转动、掌机运行小游戏，墙上名牌则使用有限弹簧模拟拖拽和翻面。
3D 首页开发记录
博客、摄影和书法不再跳回普通页面模板，而是在显示器与房间内原生内容层中完成浏览，同时保留真实 DOM 与键盘操作。
3D 首页开发记录
修正镜头聚焦时的后退与漂移，用一条时间线连接位置和视角，再让原生 DOM 卡片承接最近听歌的阅读与点击。
3D 首页开发记录
为什么 Blender 中自然的模型到了浏览器会像塑料？从材质差异入手，把稳定光照烘入图集，保持设计画面与 WebGL 展示一致。
3D 首页开发记录
从模型导入走向稳定交付：整理 Blender 层级、记录资产许可，让导出配置和 manifest 共同保证场景可复现、可验证。
3D 首页开发记录
从空旷方盒到可读的工作室，真正的尺度判断来自固定入口镜头中的构图，而不是单独追求某个房间长宽。
3D 首页开发记录
3D 房间最早不是一次完整替换，而是一项渐进增强实验：先保证首屏、导航和回退可靠，再让 Three.js 接管同一构图。
网站修复记录
首页书法日课先跳到 404，返回后又停在入口 H。两个连续现象其实来自不同层：开发路由清单失效，以及首页入口状态没有响应浏览器历史恢复。
首页修改记录
最终版本把最近摄影拆成外部照片叶片、中心模拟光圈和鼠标预览三层。照片靠 clip-path 分割，间隔靠底色露出，动画共享同一个 progress。
首页修改记录
这次最近摄影光圈先后试过覆盖线、SVG 叶片、clip-path 分区和几何内缩。真正稳定的是把间隔放进照片叶片自身。
首页修改记录
最近摄影板块想做成相机光圈，真正难的不是画一个六边形，而是别把叶片、缝隙、底色和照片切割画成互相冲突的层。
全站动效记录
摄影和书法详情弹层不是单纯尺寸问题，而是被页面入场动画容器改变了定位参照。最后用 portal 把弹层移出页面动画树。
字体修改记录
为中文、英文、代码和手写欢迎语建立各自的字体栈，在风格、加载速度和可靠回退之间找到平衡。
全站动效记录
博客、摄影、书法和关于页面需要进入感，但不需要全局加载遮罩。最后用本地 PageEnter 处理各页面板块。
全站动效记录
首页动效的重点不是动得多，而是先后顺序。加载层退场后，header、欢迎语、书法图和后续板块才依次出现。
全站动效记录
这次先把全站动效分层，再处理首访加载。入口动画只负责第一眼，不能拖慢后面的阅读和点击。
首页修改记录
从 Last.fm 数据到专辑封面、SVG 黑胶与环形曲目布局，记录最近听歌模块如何连接稳定的数据流与轻量交互。
首页修改记录
首页第二屏不再堆入口卡片，而是用最近更新和最近摄影承接内容。文章来自 Velite，照片来自 YAML，页面只负责展示。
首页修改记录
首页背景后来被抽成全站背景。关键不是复用一张图，而是把背景、遮罩、主题切换和内容可读性放到同一个边界里管理。
首页修改记录
这次首页调整的第一步，是把它从功能入口页变成更像个人网站的第一屏：欢迎语、书法鸟图、个人名片和继续浏览。
工程笔记
从真实需求拆开看：原图太大、访问端不一样、内容数据要稳定，所以先把摄影图处理成可上传、可展示、可追踪的资产。
工程笔记
用 Sharp 生成 720、1600、2560 三档 WebP 图片，分别服务缩略图、页面展示和大图浏览，平衡清晰度与加载成本。
工程笔记
处理完图片只是第一步。真正好用的流程还要把资产上传到 R2、写入公开 URL、再生成 Next.js 可读取的 YAML。
前端
一张 Procreate 花饰鸟引出了两个问题：透明处理为何让笔锋泛灰，明暗主题切换又为何闪出底色？记录图像混合与首屏渲染的排查过程。
从 WordPress 迁移到静态站点，开始记录技术实践、摄影与书法。