用 Astro 搭建零 JS 个人门户

·1 分钟阅读
Astro前端静态站点
目录

为什么选择 Astro

Astro 默认零 JavaScript 输出，天然契合个人备案网站「不能有交互后端、不能收集用户数据」的约束。 同时它又支持在需要时用群岛（Islands）架构引入交互组件，灵活度很高。

用到的主流特性

  • Content Collections：用 Zod schema 约束文章数据，类型安全。
  • View Transitions：页面切换的淡入动画，纯前端、无状态。
  • Tailwind：快速搭建一致的 UI。
  • Pagefind：构建期生成静态全文索引，运行时纯前端检索，不收集任何用户数据。

代码片段示例

// 主题切换：仅用 localStorage，不传服务器
const dark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', dark ? 'dark' : 'light');

小结

这套组合既满足合规要求，又保留了良好的浏览体验。