Astro框架指南
Astro 组件
---
// Frontmatter — 在构建/请求时运行
import Layout from '../layouts/Layout.astro';
const { title } = Astro.props;
const posts = await fetch('/api/posts').then(r => r.json());
---
<Layout title={title}>
<h1>{title}</h1>
<ul>
{posts.map(p => <li><a href={p.url}>{p.title}</a></li>)}
</ul>
</Layout>
岛屿架构（局部水化）
<!-- 水化指令 -->
<ReactCounter client:load /> <!-- 立即水化 -->
<ReactCounter client:idle /> <!-- 空闲时水化 -->
<ReactCounter client:visible /> <!-- 进入视口时水化 -->
<ReactCounter client:media="(max-width: 768px)" />
<ReactCounter client:only="react" /> <!-- 跳过SSR -->
内容集合
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()).optional(),
}),
});
export const collections = { blog };
// 在页面中使用
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
const sorted = posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
路由
src/pages/
├── index.astro # /
├── about.astro # /about
├── blog/
│ ├── index.astro # /blog
│ └── [slug].astro # /blog/:slug (动态)
└── api/
└── users.ts # /api/users (API端点)
# 动态路由
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(p => ({ params: { slug: p.slug } }));
}