Astro #
什么是 Astro？ #
Astro 是一款现代化的静态站点生成器，采用创新的 Islands 架构，专注于内容驱动的网站开发。它将性能作为首要目标，默认生成零 JavaScript 的静态 HTML。
Astro 的核心优势 #
| 优势 | 说明 |
|---|---|
| 零JS默认 | 默认不发送 JavaScript 到客户端，极致性能 |
| Islands架构 | 按需水合，只在需要交互的地方加载 JS |
| 框架无关 | 支持 React、Vue、Svelte 等多种 UI 框架 |
| 内容驱动 | 专为博客、文档、作品集等内容网站优化 |
| 开发体验 | 简洁的语法，快速的热更新 |
| SEO友好 | 静态 HTML 输出，搜索引擎友好 |
为什么选择 Astro？ #
性能优先 #
text
传统 SPA：
┌─────────────────────────────────────┐
│ 加载大量 JS → 解析执行 → 渲染页面 │
│ 首屏时间：慢 │
└─────────────────────────────────────┘
Astro 方案：
┌─────────────────────────────────────┐
│ 直接加载 HTML → 快速渲染 │
│ 首屏时间：快 │
│ 按需加载交互组件的 JS │
└─────────────────────────────────────┘
适用场景 #
| 场景 | 适合程度 | 说明 |
|---|---|---|
| 博客网站 | ⭐⭐⭐⭐⭐ | 完美适配，内容驱动 |
| 文档站点 | ⭐⭐⭐⭐⭐ | 内置内容集合支持 |
| 作品集 | ⭐⭐⭐⭐⭐ | 快速加载，展示效果佳 |
| 企业官网 | ⭐⭐⭐⭐⭐ | SEO 友好，性能优秀 |
| 电商展示 | ⭐⭐⭐⭐ | 适合展示型电商 |
| 复杂应用 | ⭐⭐⭐ | 可用但非最佳选择 |
文档结构 #
本指南按以下结构组织，适合初学者按顺序学习：
1. 基础入门 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| Astro简介 | Astro 的历史、特点、应用场景 | astro-intro.md |
| 环境搭建 | 安装 Node.js、创建项目 | installation.md |
| 项目结构 | 目录结构、文件说明 | project-structure.md |
| 第一个项目 | 创建并运行第一个 Astro 项目 | first-project.md |
2. 核心概念 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 组件基础 | Astro 组件的定义与使用 | components.md |
| 页面与路由 | 文件路由、动态路由 | pages-routing.md |
| 布局组件 | 可复用的页面布局 | layouts.md |
| Astro配置 | astro.config.mjs 配置详解 | configuration.md |
3. 模板语法 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 模板基础 | Astro 模板语法入门 | template-basics.md |
| 表达式 | 变量、函数调用 | expressions.md |
| 条件渲染 | if/else 条件判断 | conditional-rendering.md |
| 列表渲染 | map 循环渲染 | list-rendering.md |
| 插槽 | 组件内容分发 | slots.md |
4. 数据获取 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 数据获取基础 | fetch API、静态数据 | data-fetching.md |
| API集成 | 外部 API 数据获取 | api-integration.md |
| 静态数据 | 本地 JSON、Markdown | static-data.md |
| 动态数据 | SSR 模式下的动态数据 | dynamic-data.md |
5. 内容集合 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 集合入门 | 内容集合概念介绍 | introduction.md |
| 定义集合 | 配置内容集合 | defining-collections.md |
| 查询数据 | 获取和过滤内容 | querying-data.md |
| 内容渲染 | 渲染 Markdown 内容 | rendering-content.md |
6. 样式处理 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| CSS样式 | 内联样式、全局样式 | css-styling.md |
| CSS模块 | Scoped CSS | css-modules.md |
| CSS框架集成 | Sass、Less 等 | css-frameworks.md |
| Tailwind CSS | Tailwind 集成使用 | tailwind.md |
7. 集成扩展 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| UI框架集成 | 混合使用多种框架 | ui-frameworks.md |
| React集成 | 在 Astro 中使用 React | react-integration.md |
| Vue集成 | 在 Astro 中使用 Vue | vue-integration.md |
| Svelte集成 | 在 Astro 中使用 Svelte | svelte-integration.md |
8. 高级特性 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 客户端脚本 | client:* 指令详解 | client-scripts.md |
| 岛屿架构 | Islands Architecture 深入 | islands-architecture.md |
| SSR服务端渲染 | 动态服务端渲染 | ssr.md |
| 中间件 | 请求处理中间件 | middleware.md |
| 端点API | API 路由创建 | endpoints.md |
9. 部署发布 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 构建项目 | 构建配置与优化 | building.md |
| 静态部署 | 静态站点部署 | static-deployment.md |
| SSR部署 | SSR 模式部署 | ssr-deployment.md |
| 常见平台 | Vercel、Netlify 等 | platforms.md |
10. 实战案例 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 个人博客 | 博客网站完整实现 | personal-blog.md |
| 文档站点 | 文档网站搭建 | documentation-site.md |
| 作品集网站 | 个人作品展示 | portfolio-site.md |
| 电商网站 | 电商展示站点 | ecommerce-site.md |
学习建议 #
初学者路线 #
text
基础入门 → 核心概念 → 模板语法 → 样式处理
进阶路线 #
text
数据获取 → 内容集合 → 集成扩展 → 高级特性
实战路线 #
text
部署发布 → 实战案例 → 项目实践
学习资源 #
- 官方文档：astro.build
- GitHub仓库：withastro/astro
- 社区资源：Astro Discord 社区
- 推荐模板：Astro 官方主题库
开始学习 #
准备好了吗？让我们从 Astro简介 开始你的 Astro 学习之旅！
最后更新：2026-03-28