Astro 入门指南

· 1 分钟
#Astro #前端 #教程

什么是 Astro

Astro 是一个现代的 Web 框架，专注于构建内容驱动的网站。它的核心理念是「零 JS 除非你需要」。

核心特性

Islands 架构

Astro 使用 Islands 架构，只在需要交互的组件上加载 JavaScript：

---
import Counter from '../components/Counter.tsx';
---

<h1>静态内容，无 JS</h1>
<Counter client:load />

内容集合

Astro 提供了类型安全的内容集合 API：

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

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/data/blog' }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
  }),
});

View Transitions

内置页面过渡动画，无需额外 JavaScript：

---
import { ClientRouter } from 'astro:transitions';
---
<head>
  <ClientRouter />
</head>

总结

Astro 非常适合博客、文档站点和内容营销网站。它的性能优势和开发体验都很出色。