把用了多年的 Typecho 保留为后台内容管理，前端换成 Astro 静态渲染——这就是本站现在的架构。这篇文章记录完整的改造思路与踩坑。

阅读剩余部分

Astro 最迷人的地方在于：默认零 JavaScript，但在需要交互的地方又能精准注水。配合视图过渡（View Transitions），页面切换可以达到接近 SPA 的丝滑感。

岛屿架构

传统的 MPA 每次导航都要重新解析全部资源；Astro 的岛屿（Islands）让交互组件独立水合：

---
// 一个交互组件只在进入视口时才加载 JS
import SearchBox from '../components/SearchBox.astro';
---
<SearchBox client:visible />

零依赖的客户端脚本

Astro 的 <script> 标签会被打包、去重并按需加载，用原生 API 就能实现大部分交互：

// 目录高亮：IntersectionObserver 监听标题可见性
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) activate(entry.target.id);
  }
}, { rootMargin: '-15% 0px -70% 0px' });

document.querySelectorAll('.md-body h2[id]').forEach((h) => observer.observe(h));

实测数据

• [x] 首页 LCP 稳定在 0.4s 以内
• [x] 全站 JS 体积 < 30KB gzip
• [ ] 把 TOC 滚动监听换成 CSS scroll driven animations
• [ ] 试试浏览器原生的 View Transition API

性能优化的最高境界不是优化，而是从一开始就不发送多余的代码。

—— 某位前端工程师的碎碎念

站点完成无头化改造后的第一篇文章，也是渲染链路的冒烟测试。

冒烟清单

• 标题、日期、分类、标签展示正常
• Markdown 渲染无异常
• 评论表单可以提交
• 搜索可以命中这篇文章

如果你能看到这一行，说明整条「Typecho API → Astro 构建 → 浏览器渲染」链路是通的。🎉