Astro 入门教程Astro 入门教程本教程将指导你创建一个基本的 Astro 网站，包括主页和关于页面。项目结构

Astro 入门教程

本教程将指导你创建一个基本的 Astro 网站，包括主页和关于页面。

项目结构

astro-learn01/
├── src/
│   ├── components/    # 可复用的组件
│   │   └── Navigation.astro
│   └── pages/        # 页面文件
│       ├── index.astro
│       └── about.astro
├── public/          # 静态资源
│   └── favicon.svg
├── astro.config.mjs # Astro 配置文件
├── package.json     # 项目依赖配置
└── tsconfig.json    # TypeScript 配置

创建步骤

1. 初始化项目

使用 npm 创建新的 Astro 项目：

npm create astro@latest . -- --yes --no-git --template minimal

这个命令会：

创建一个新的 Astro 项目
使用最小化模板
不初始化 git 仓库
自动安装依赖

2. 创建导航组件

在 src/components/Navigation.astro 中创建导航组件：

---
---
<nav>
    <div class="nav-links">
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </div>
</nav>

<style>
    nav {
        background: #f4f4f4;
        padding: 1rem;
    }
    .nav-links {
        display: flex;
        gap: 1rem;
    }
    a {
        color: #333;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        transition: background-color 0.3s;
    }
    a:hover {
        background-color: #e0e0e0;
    }
</style>

这个组件：

提供了网站的主要导航
包含到首页和关于页面的链接
使用 CSS 添加了基本样式

3. 创建主页

修改 src/pages/index.astro：

---
import Navigation from '../components/Navigation.astro';
---

<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>我的 Astro 网站</title>
    </head>
    <body>
        <Navigation />
        <main>
            <h1>欢迎来到我的 Astro 网站</h1>
            <p>这是一个使用 Astro 构建的简单示例网站。</p>
        </main>
    </body>
</html>

主页特点：

导入并使用 Navigation 组件
设置基本的 HTML 结构
添加简单的欢迎内容

4. 创建关于页面

在 src/pages/about.astro 中创建关于页面：

---
import Navigation from '../components/Navigation.astro';
---

<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>关于 - 我的 Astro 网站</title>
    </head>
    <body>
        <Navigation />
        <main>
            <h1>关于我们</h1>
            <p>这是一个使用 Astro 构建的示例网站的关于页面。</p>
            <p>Astro 是一个现代的静态站点生成器，它允许我们使用我们喜欢的组件框架来构建更快的网站。</p>
        </main>
    </body>
</html>

关于页面特点：

复用相同的导航组件
保持一致的页面结构
添加关于 Astro 的说明内容

程序流程说明

路由系统
- Astro 使用基于文件的路由系统
- src/pages 目录中的文件自动成为路由
- index.astro 对应根路由 "/"
- about.astro 对应 "/about" 路由
组件系统
- 组件存放在 src/components 目录
- 使用 import 语句导入组件
- 组件可以包含前端脚本（在 --- 之间）
- 组件可以包含 HTML 模板和样式
样式处理
- 可以在组件内使用 <style> 标签
- 样式默认是组件作用域的
- 支持常见的 CSS 功能
项目配置
- astro.config.mjs 包含 Astro 的配置选项
- package.json 管理项目依赖
- public 目录存放静态资源

运行项目

使用以下命令启动开发服务器：

npm run dev

访问 http://localhost:4321 查看网站。

下一步

你可以：

添加更多页面
创建更多可复用组件
添加样式框架（如 Tailwind CSS）
集成其他前端框架（如 React、Vue）
添加动态功能
部署到托管平台