基本原理

Islands Architecture

本站基于 Astro 的 Islands Architecture（孤岛架构）：

• 默认情况下，所有组件都在服务器端（构建时）渲染为纯 HTML
• 只有显式标记 client:* 的组件才会在浏览器中注入 JavaScript
• 这使得页面的初始加载几乎没有 JavaScript 负担

<!-- 静态组件：零 JS -->
<StaticCard />

<!-- 交互组件：按需加载 -->
<Counter client:idle />
<Chart client:visible />
<HeavyApp client:only="react" />

客户端指令对比

指令	触发时机	适用场景
client:load	页面加载立即	首屏关键交互
client:idle	主线程空闲时	非关键交互
client:visible	组件进入视口	长页面下方
client:only	仅客户端渲染	完全依赖浏览器 API

内容集合

博客和文档通过 Astro 的 Content Collections 管理，提供类型安全的 frontmatter：

// src/content/config.ts
const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

这样在代码中访问内容时，TypeScript 会提供完整的类型检查和自动补全。

路由约定

Astro 使用文件系统路由：

src/pages/
├── index.astro          → /
├── about.astro          → /about
├── blog/
│   ├── index.astro      → /blog
│   ├── [slug].astro     → /blog/:slug
│   └── tag/[tag].astro  → /blog/tag/:tag
└── docs/
    ├── index.astro      → /docs
    └── [...slug].astro  → /docs/:slug+