Astro Web 框架
概述
Astro 是一个为内容丰富的网站设计的 Web 框架——博客、文档、作品集、营销网站和电子商务。其核心创新是孤岛架构：默认情况下，Astro 向浏览器发送零 JavaScript。交互式组件作为孤立的“孤岛”被选择性水合。Astro 支持在同一个项目中同时使用 React、Vue、Svelte、Solid 和其他 UI 框架，让你可以为每个组件选择合适的工具。
何时使用此技能
- 构建博客、文档网站、营销页面或作品集时
- 性能和核心 Web 指标是首要优先级时
- 项目内容包含大量 Markdown 或 MDX 文件时
- 需要 SSG（静态）输出，并且可选 SSR 用于动态路由时
- 用户询问
.astro文件、Astro.props、内容集合或client:指令时
工作原理
第 1 步：项目设置
npm create astro@latest my-site
cd my-site
npm install
npm run dev
根据需要添加集成：
npx astro add tailwind # Tailwind CSS
npx astro add react # React 组件支持
npx astro add mdx # MDX 支持
npx astro add sitemap # 自动生成 sitemap.xml
npx astro add vercel # Vercel SSR 适配器
项目结构：
src/
pages/ ← 基于文件的路由 (.astro, .md, .mdx)
layouts/ ← 可复用的页面外壳
components/ ← UI 组件 (.astro, .tsx, .vue 等)
content/ ← 类型安全的内容集合 (Markdown/MDX)
styles/ ← 全局 CSS
public/ ← 静态资源（原样复制）
astro.config.mjs ← 框架配置
第 2 步：Astro 组件语法
.astro 文件顶部有一个代码围栏（仅在服务器端运行），下方是模板：
---
// src/components/Card.astro
// 此代码块仅在服务器端运行——永远不会在浏览器中执行
interface Props {
title: string;
href: string;
description: string;
}
const { title, href, description } = Astro.props;
---
<article class="card">
<h2><a href={href}>{title}</a></h2>
<p>{description}</p>
</article>
<style>
/* 自动作用域限于此组件 */
.card { border: 1px solid #eee; padding: 1rem; }
</style>
第 3 步：基于文件的页面和路由
src/pages/index.astro → /
src/pages/about.astro → /about
src/pages/blog/[slug].astro → /blog/:slug (动态)
src/pages/blog/[...path].astro → /blog/* (通配)
带 getStaticPaths 的动态路由：
---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(post => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<h1>{post.data.title}</h1>
<Content />
第 4 步：内容集合
内容集合让你类型安全地访问 Markdown 和 MDX 文件：
// src/content/config.ts
import { z, defineCollection } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.coerce.date(),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(false),
}),
});
export const collections = { blog };
---
// src/pages/blog/index.astro
import { getCollection } from 'astro:content';
const posts = (await getCollection('blog'))
.filter(p => !p.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
<time>{post.data.date.toLocaleDateString()}</time>
</li>
))}
</ul>
第 5 步：孤岛——选择性水合
默认情况下，UI 框架组件渲染为静态 HTML，不带任何 JavaScript。使用 client: 指令进行水合：
---
import Counter from '../components/Counter.tsx'; // React 组件
import VideoPlayer from '../components/VideoPlayer.svelte';
---
<!-- 静态 HTML——不向浏览器发送 JavaScript -->
<Counter initialCount={0} />
<!-- 页面加载时立即水合 -->
<Counter initialCount={0} client:load />
<!-- 组件滚动到视口内时水合 -->
<VideoPlayer src="/demo.mp4" client:visible />
<!-- 仅当浏览器空闲时水合 -->
<Analytics client:idle />
<!-- 仅针对特定媒体查询水合 -->
<MobileMenu client:media="(max-width: 768px)" />
第 6 步：布局
---
// src/layouts/BaseLayout.astro
interface Props {
title: string;
description?: string;
}
const { title, description = 'My Astro Site' } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{title}</title>
<meta name="description" content={description} />
</head>
<body>
<nav>...</nav>
<main>
<slot /> <!-- 页面内容在此处渲染 -->
</main>
<footer>...</footer>
</body>
</html>
---
// src/pages/about.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="关于我们">
<h1>关于我们</h1>
<p>欢迎来到我们的公司...</p>
</BaseLayout>
第 7 步：SSR 模式（按需渲染）
通过设置适配器启用 SSR 以处理动态页面：
// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
output: 'hybrid', // 'static' | 'server' | 'hybrid'
adapter: vercel(),
});
通过 export const prerender = false 将单个页面切换为 SSR。
示例
示例 1：带 RSS 订阅的博客
// src/pages/rss.xml.ts
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
export async function GET(context) {
const posts = await getCollection('blog');
return rss({
title: '我的博客',
description: '最新文章',
site: context.site,
items: posts.map(post => ({
title: post.data.title,
pubDate: post.data.date,
link: `/blog/${post.slug}/`,
})),
});
}
示例 2：API 端点（SSR）
// src/pages/api/subscribe.ts
import type { APIRoute } from 'astro';
export const POST: APIRoute = async ({ request }) => {
const { email } = await request.json();
if (!email) {
return new Response(JSON.stringify({ error: '需要邮箱' }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
await addToNewsletter(email);
return new Response(JSON.stringify({ success: true }), { status: 200 });
};
示例 3：作为孤岛的 React 组件
// src/components/SearchBox.tsx
import { useState } from 'react';
export default function SearchBox() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
async function search(e: React.FormEvent) {
e.preventDefault();
const data = await fetch(`/api/search?q=${query}`).then(r => r.json());
setResults(data);
}
return (
<form onSubmit={search}>
<input value={query} onChange={e => setQuery(e.target.value)} />
<button type="submit">搜索</button>
<ul>{results.map(r => <li key={r.id}>{r.title}</li>)}</ul>
</form>
);
}
---
import SearchBox from '../components/SearchBox.tsx';
---
<!-- 立即水合——这个孤岛是可交互的 -->
<SearchBox client:load />
最佳实践
- ✅ 将大多数组件保持为静态的
.astro文件——只水合必须交互的部分 - ✅ 对所有 Markdown/MDX 内容使用内容集合——它提供类型安全和自动验证
- ✅ 对于首屏以下的组件，优先使用
client:visible而非client:load，以减少初始 JavaScript - ✅ 使用
import.meta.env进行环境变量管理——使用PUBLIC_前缀公开公共变量 - ✅ 添加来自
astro:transitions的<ViewTransitions />以实现平滑页面导航，无需完整的 SPA - ❌ 不要在每个组件上都使用
client:load——这会破坏 Astro 的性能优势 - ❌ 不要在面向客户端的模板中使用
.astrofrontmatter 中的秘密信息 - ❌ 在静态模式下不要跳过动态路由的
getStaticPaths——否则构建会失败
安全与注意事项
.astro文件中的 Frontmatter 代码仅在服务器端运行，永远不会暴露给浏览器。- 仅对非敏感值使用
import.meta.env.PUBLIC_*。私有环境变量（无PUBLIC_前缀）永远不会发送到客户端。 - 使用 SSR 模式时，在数据库查询或 API 调用之前，验证所有
Astro.request输入。 - 在使用
set:html渲染之前，对任何用户提供的内容进行消毒——它会绕过自动转义。
常见陷阱
-
问题： React/Vue 组件的 JavaScript 在浏览器中不运行 解决方案： 添加一个
client:指令（client:load、client:visible等）——没有它，组件仅渲染为静态 HTML。 -
问题： 开发过程中内容更新后
getStaticPaths数据已过时 解决方案： Astro 的开发服务器会监视内容文件——如果对content/config.ts的更改未反映，请重启服务器。 -
问题：
Astro.props的类型是any——没有自动补全 解决方案： 在 frontmatter 中定义一个Props接口或类型，Astro 将自动推断它。 -
问题：
.astro组件中的 CSS 泄漏到其他组件 解决方案：.astro<style>标签中的样式会自动作用域化。仅在有意针对子元素时使用:global()。
相关技能
@sveltekit—— 当你需要一个具有响应式 UI 的全栈框架时（相较于 Astro 的内容导向）@nextjs-app-router-patterns—— 当你需要一个以 React 为先的全栈框架时@tailwind-patterns—— 使用 Tailwind CSS 样式化 Astro 网站@progressive-web-app—— 为 Astro 网站添加 PWA 能力
限制
- 仅当任务明确符合上述范围时使用此技能。
- 不要将输出视为针对特定环境的验证、测试或专家审查的替代方案。
- 如果缺少所需的输入、权限、安全边界或成功标准，请停下来请求澄清。