Astro 入门指南

什么是 Astro？

Astro 是一个现代 Web 框架，专为构建快速、以内容为中心的网站而设计。与传统的 JavaScript 框架不同，Astro 默认不发送任何 JavaScript，只在需要时才为交互组件加载脚本。

为什么选择 Astro？

选择 Astro 有几个令人信服的理由：

• 性能优先 — Astro 在服务器端渲染 HTML，去除不必要的 JavaScript
• 框架无关 — 使用 React、Vue、Svelte 或任何你喜欢的框架
• 内容集合 — 内置内容管理，带有类型安全和验证
• 岛屿架构 — 交互组件仅在需要时才加载 JavaScript

你的第一个 Astro 页面

在 Astro 中创建页面非常简单。src/pages 目录中的每个 .astro 文件都会自动成为一个路由。

---
const greeting = "你好，Astro！";
---

<html>
  <body>
    <h1>{greeting}</h1>
  </body>
</html>

内容集合

Astro 5 引入了内容层 API，让你可以为内容定义类型化的模式：

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    publishDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

下一步

现在你已经了解了基础知识，试着构建你自己的 Astro 项目吧。astro.build 上的文档是探索更多功能的绝佳资源。