{"ok":true,"data":{"slug":"photo-migration","title":"23 张旧照片的一次搬家","summary":"旧站 assets/images/Camera 下躺着 23 张照片、约 20MB。这次只搬走其中 11 张，顺手把相册页做成能键盘操作的灯箱。","date":"2026-09-20","category":"生活随笔","tags":["摄影","性能","资产整理"],"cover":"/images/covers/cover-photo.svg","featured":false,"draft":false,"body":"\n翻旧项目的时候，发现 `frontend/src/assets/images/Camera/` 里静静躺着五个文件夹：\n\n```text\nfengjing/   风景 10 张   6.2M\nmeishi/     美食  5 张   3.1M\nsuixin/     随心  4 张   1.8M\nhuiyi/      回忆  4 张   1.5M\nzhuanti/    专题  4 张   7.9M\n```\n\n`zhuanti` 里是游戏和影视的封面图，那是旧站「实时热点」轮播的素材，不属于我自己的照片，先不动。其余四类，我挑了 11 张搬进新站。\n\n## 为什么不全搬\n\n理由很朴素：**博客不会展示全部照片**。\n\n- 单张图片动辄 1.6MB，一次打开 10 张就是十几 MB；\n- 分类命名还带着 `fengjing (1).jpg` 这种形态，需要重命名；\n- 手机竖构图和横构图混排，需要给瀑布流预设宽高比，避免布局抖动。\n\n所以搬的时候顺手做了这几件事：\n\n1. 重命名为语义化文件名（`fengjing-1.jpg` 而不是 `fengjing (1).jpg`）；\n2. 保留原图，不做任何二次压缩——原件是回忆，不该被工具改写；\n3. 给每张照片写一句标题和描述，让相册在数据层面可被检索。\n\n## 瀑布流的实现比想象中简单\n\n不需要 JavaScript 计算布局。CSS 的多列布局天生就是瀑布流：\n\n```css\n.columns-2 {\n  column-count: 2;\n  column-gap: 1rem;\n}\n\n.masonry-item {\n  break-inside: avoid; /* 关键：不要被列切断 */\n  margin-bottom: 1rem;\n}\n```\n\n```tsx\n<MasonryGrid>\n  {photos.map((photo, index) => (\n    <MasonryItem key={photo.id}>\n      <button onClick={() => setOpenIndex(index)}>\n        <img src={photo.src} alt={photo.title} loading=\"lazy\" />\n      </button>\n    </MasonryItem>\n  ))}\n</MasonryGrid>\n```\n\n## 灯箱要照顾键盘\n\n相册页最容易被忽略的无障碍细节，是**它能不能只用键盘看完**。我用 Radix 的 Dialog 做基础，自己补了方向键：\n\n```tsx\nuseEffect(() => {\n  if (!open) return;\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \"ArrowLeft\") prev();\n    if (e.key === \"ArrowRight\") next();\n  };\n  window.addEventListener(\"keydown\", onKeyDown);\n  return () => window.removeEventListener(\"keydown\", onKeyDown);\n}, [open, prev, next]);\n```\n\n这样，Tab 进入相册、点开第一张之后，`←` `→` 可以翻到任何一张，`Esc` 退出。整个过程不需要碰鼠标。\n\n## 关于图片优化\n\n目前图片是原图 + `loading=\"lazy\"`。下一步要做的是：\n\n- 用 `sharp` 在构建期批量转 WebP，体积能降 60% 左右；\n- 给首屏之外的图片加 `blurDataURL` 占位；\n- 灯箱里的图走全尺寸，列表页只发缩略图。\n\n> 技术债不总是坏事。知道欠在哪里、什么时候还，比一开始全都做对更重要。\n\n照片搬完了，还差 12 张没找齐。慢慢来，反正这个站有的是时间。\n"}}