六维教程

Astro 综合实战

我们要做什么

把前面学到的知识串起来，从零搭一个最简博客站，具备：首页列表、文章页、布局外壳、内容集合管理文章，这是一个能真实使用的骨架。

第一步 初始化

npm create astro@latest my-blog -- --template empty
cd my-blog
npm install

第二步 定义内容集合

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
  }),
});

export const collections = { blog };

新建两篇文章：

---
title: 第一篇文章
date: 2026-08-26
---

这是正文。
---
title: 第二篇文章
date: 2026-08-25
---

这是另一篇。

第三步 写布局

---
// src/layouts/BaseLayout.astro
import '../styles/global.css';
const { title } = Astro.props; // 接收页面传入的标题
---
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <header><a href="/">我的博客</a></header>
    <main><slot /></main>
  </body>
</html>

第四步 首页列出文章

---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

// 读取文章并按日期倒序
const posts = (await getCollection('blog'))
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
<BaseLayout title="首页">
  <h1>文章列表</h1>
  <ul>
    {posts.map((post) => (
      <li><a href={`/blog/${post.id}`}>{post.data.title}</a></li>
    ))}
  </ul>
</BaseLayout>

第五步 文章页

---
// src/pages/blog/[id].astro
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

// getStaticPaths 返回要生成的每个文章页：params 是网址参数，props 是数据
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render(); // render() 返回 { Content } 组件，渲染 Markdown 正文
---
<BaseLayout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <!-- toISOString().slice(0,10) 把日期格式化成 YYYY-MM-DD -->
    <time>{post.data.date.toISOString().slice(0, 10)}</time>
    <Content />
  </article>
</BaseLayout>

第六步 本地验证

npm run dev

打开首页能看到两篇文章链接，点进去能看到正文，说明骨架跑通了。

接下来可以加什么

  • 文章分类与标签页
  • 分页，文章变多时分批展示
  • 搜索功能（客户端脚本或集成）
  • 评论系统（如 Giscus）
  • 部署上线（参考 Astro 部署）
上一篇
Astro 部署