Astro 静态博客与岛屿架构实战

千机志博客采用 Astro 7 构建，核心特点是默认零 JavaScript 的静态输出，配合 Svelte 5 实现必要的交互岛屿。

架构设计

访客页面完全静态生成，构建时从 API 获取所有文章并生成 HTML。交互功能（评论、音乐播放器、主题设置）通过 Svelte 岛屿实现，仅在需要时加载。

性能优化

• 构建期 HCT 色彩计算，零运行时开销
• 字体子集化减少 70% 体积
• 图片占位符防止布局抖动
• Pagefind 静态全文搜索

水合策略

使用 client:visible 指令延迟加载侧栏组件，使用 client:load 立即加载评论表单。首屏 FCP 小于 1 秒。