SKILL.md
readonly只读
name
astro
description
使用 Astro 网页框架进行构建的技能。帮助创建 Astro 组件和页面、配置 SSR 适配器、设置内容集合、部署静态站点以及管理项目结构和 CLI 命令。当用户需要使用 Astro、提及 .astro 文件、询问静态站点生成（SSG）、岛屿架构、内容集合或部署 Astro 项目时使用。
Astro 使用指南
始终查阅 docs.astro.build 获取代码示例和最新 API。
Astro 是用于内容驱动型网站的网页框架。
快速参考
文件位置
CLI 会在 ./ 中查找 astro.config.js、astro.config.mjs、astro.config.cjs 和 astro.config.ts。使用 --config 指定自定义路径。
CLI 命令
npx astro dev- 启动开发服务器。npx astro build- 构建项目并写入磁盘。npx astro check- 检查项目中的错误。npx astro add- 添加集成。npx astro sync- 为所有 Astro 模块生成 TypeScript 类型。
添加或更改插件后重新运行。
项目结构
参考项目结构文档。
src/*- 项目源代码（组件、页面、样式、图片等）src/pages- 必需。 定义所有页面和路由。src/components- 组件（约定，非必需）。src/layouts- 布局组件（约定，非必需）。src/styles- CSS/Sass 文件（约定，非必需）。public/*- 非代码、未处理的资源（字体、图标等）；原样复制到构建输出。package.json- 项目清单。astro.config.{js,mjs,cjs,ts}- Astro 配置文件。（推荐）tsconfig.json- TypeScript 配置文件。（推荐）
核心配置选项
| 选项 | 说明 |
|---|---|
site |
最终部署的 URL。用于生成站点地图和规范 URL。 |
示例 astro.config.ts
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://example.com',
});
常见工作流程
创建基本页面
在 src/pages/ 中添加文件——文件名即路由：
---
// src/pages/index.astro
const title = '你好，Astro！';
---
<html>
<head><title>{title}</title></head>
<body>
<h1>{title}</h1>
</body>
</html>
创建组件
---
// src/components/Card.astro
const { title, body } = Astro.props;
---
<div class="card">
<h2>{title}</h2>
<p>{body}</p>
</div>
使用适配器部署
- 添加适配器：
npx astro add vercel --yes（或node、cloudflare、netlify） - 运行
npx astro check以在构建前捕获类型和配置错误。 - 运行
npx astro build生成部署产物。 - 验证构建输出目录（例如
dist/）存在且非空，然后再继续。 - 根据适配器的文档部署输出。
适配器
使用构建适配器部署到您喜欢的服务器、无服务器或边缘主机。使用适配器在 Astro 项目中启用按需渲染。
使用 astro add 添加 Node.js 适配器：
npx astro add node --yes
使用 astro add 添加 Cloudflare 适配器：
npx astro add cloudflare --yes
使用 astro add 添加 Netlify 适配器：
npx astro add netlify --yes
使用 astro add 添加 Vercel 适配器：
npx astro add vercel --yes
