Astro 入门指南

什么是 Astro？

Astro 是一个现代化的静态站点生成器，专为内容驱动的网站设计。它的核心理念是：默认零 JavaScript。

快速开始

创建一个新的 Astro 项目非常简单：

npm create astro@latest my-site
cd my-site
npm install
npm run dev

项目结构

一个典型的 Astro 项目结构如下：

my-site/
├── src/
│   ├── components/    # 可复用组件
│   ├── content/       # Markdown 内容
│   ├── layouts/       # 页面布局
│   └── pages/         # 页面路由
├── public/            # 静态资源
└── astro.config.mjs   # 配置文件

Content Collections

Astro 的 Content Collections 是管理 Markdown 内容的最佳方式：

import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

组件语法

Astro 组件使用 .astro 文件格式，结合了 HTML 和 JavaScript：

---
const { title } = Astro.props;
---

<h1>{title}</h1>
<slot />

总结

Astro 是构建内容网站的理想选择。它简单、快速，而且非常灵活。无论你是构建博客、文档站点还是个人网站，Astro 都能满足你的需求。