Astro 框架入门指南#

Astro 是一个现代化的静态站点生成器，它专注于构建快速、内容驱动的网站。本文将为你介绍 Astro 的核心特性和基本使用方法。

🌟 为什么选择 Astro？#

1. 零 JavaScript 运行时#

Astro 默认生成纯静态 HTML，只在需要时才加载 JavaScript，这让网站加载速度极快。

2. 组件岛架构（Islands Architecture）#

你可以在静态页面中嵌入交互式组件，实现部分水合（Partial Hydration）。

3. 多框架支持#

在同一个项目中使用 React、Vue、Svelte 等不同框架的组件。

4. 内置优化#

自动进行代码分割、图片优化、CSS 压缩等性能优化。

🚀 快速开始#

安装 Astro#

1
# 创建新项目
2
npm create astro@latest my-astro-site
3

4
# 进入项目目录
5
cd my-astro-site
6

7
# 安装依赖
8
npm install
9

10
# 启动开发服务器
11
npm run dev

项目结构#

1
my-astro-site/
2
├── public/          # 静态资源
3
├── src/
4
│   ├── components/  # 组件
5
│   ├── layouts/     # 布局
6
│   ├── pages/       # 页面
7
│   └── styles/      # 样式
8
├── astro.config.mjs # 配置文件
9
└── package.json

📝 基本语法#

Astro 组件#

Astro 组件使用 .astro 扩展名，结合了 JavaScript 和类似 JSX 的模板语法：

1
---
2
// 组件脚本（在构建时运行）
3
const title = "Hello, Astro!";
4
const items = ["Apple", "Banana", "Cherry"];
5
---
6

7
<!-- 组件模板 -->
8
<html>
9
  <head>
10
    <title>{title}</title>
11
  </head>
12
  <body>
13
    <h1>{title}</h1>
14
    <ul>
15
      {items.map(item => <li>{item}</li>)}
16
    </ul>
17
  </body>
18
</html>

使用其他框架组件#

1
---
2
// 导入 React 组件
3
import MyReactComponent from '../components/MyReactComponent.jsx';
4
// 导入 Vue 组件
5
import MyVueComponent from '../components/MyVueComponent.vue';
6
---
7

8
<html>
9
  <body>
10
    <!-- 静态渲染 -->
11
    <MyReactComponent />
12

13
    <!-- 客户端水合 -->
14
    <MyVueComponent client:load />
15
  </body>
16
</html>

🎨 样式处理#

作用域样式#

1
---
2
// 组件脚本
3
---
4

5
<style>
6
  /* 自动作用域到当前组件 */
7
  h1 {
8
    color: blue;
9
  }
10
</style>
11

12
<h1>这个标题是蓝色的</h1>

全局样式#

1
<style is:global>
2
  /* 全局样式 */
3
  body {
4
    font-family: sans-serif;
5
  }
6
</style>

📄 内容管理#

Astro 内置了强大的内容管理功能，支持 Markdown 和 MDX：

1
import { defineCollection, z } from 'astro:content';
2

3
const blog = defineCollection({
4
  type: 'content',
5
  schema: z.object({
6
    title: z.string(),
7
    description: z.string(),
8
    publishDate: z.date(),
9
    tags: z.array(z.string()).optional(),
10
  }),
11
});
12

13
export const collections = { blog };

🔧 配置和集成#

astro.config.mjs#

1
import { defineConfig } from 'astro/config';
2
import tailwind from '@astrojs/tailwind';
3
import react from '@astrojs/react';
4

5
export default defineConfig({
6
  integrations: [tailwind(), react()],
7
  site: 'https://my-site.com',
8
});

📈 性能优势#

更小的包体积：只加载必要的 JavaScript
更快的首屏加载：静态 HTML 立即可见
更好的 SEO：完全的服务端渲染
渐进式增强：按需添加交互性

🎯 适用场景#

Astro 特别适合：

📝 博客和文档网站
🛍️ 营销和展示网站
📊 仪表板和管理界面
🎨 作品集网站

总结#

Astro 是一个优秀的现代化静态站点生成器，它结合了传统静态网站的性能优势和现代前端框架的开发体验。如果你正在寻找一个快速、灵活且易于使用的解决方案来构建内容驱动的网站，Astro 绝对值得一试！

想了解更多？访问 Astro 官方文档获取详细信息。

Jielumoon's Blog

Astro 框架入门指南