这个站本身

背景

想把散落在各处的文章、项目和收藏收进一个地方，但它不该只是又一条「Hero + 文章列表 + 页脚」的长卷。参考了一些 Bento 风格的 Dashboard 之后，决定把首页当成一块可以摆放的桌面：个人卡、统计、项目、文章各占一块，格子之间留白均匀。

技术架构

• Astro 静态输出：内容页在构建期生成，不为了几处交互拖一个 SPA 进来。
• Vue 只用岛屿：主题切换、数字递增、Tabs、弹窗这些真正需要状态的才挂载 Vue，其余是纯 HTML。
• 设计令牌：颜色、间距、圆角、动效时长全部走 CSS 变量，深浅主题只需换一组 --c-* 值。
• 内容集合：文章与项目都是 Markdown，加一个 .md 就多一页，页面里没有硬编码的统计。

实现过程

1. 先做骨架与主题：主题三态（浅色 / 深色 / 跟随系统），用一段内联脚本在首帧前写入 data-theme，避免闪白。
2. 再建基础组件：卡片、按钮、徽章、Tabs、弹窗、下拉、骨架屏、空态，配一个 /dev/components 走查页。
3. 然后拼页面：首页 Bento → 博客列表与详情 → 关于页 → 作品集。
4. 最后做收口：五档断点实测、对比度审计、Lighthouse 跑分。

踩坑记录

• Astro 的 scoped 样式作用不到子组件根节点：grid-area 加在子组件 class 上不生效，卡片被塞进一列，压成 76px 宽。改用 :global() 才恢复。
• add_header 在 location 里出现就不再继承 server 块：443 站点上线后 HSTS 全部丢失，最后把安全头抽成 snippet，在每个 location 里重复 include。
• 设计稿的次级文字色只有 2.91:1：#8993A7 放在浅色底上远达不到 AA，改成 #566072（5.96:1），品牌色只保留作填充，文字用更深的 #2B5ABB。
• try_files ... /404.html =404 会让 404 返回 200：error_page 才是正确写法。

结果

12 个静态页面，首页 LCP 0.9s、CLS 0，Lighthouse 桌面性能 93–98、无障碍与 SEO 全 100。写作流程也真的变顺了：新增一篇文章只动一个 Markdown 文件。