← 返回文章列表

Astro 内容集合:让 Markdown 变成页面

用一个小例子理解 Astro 如何读取 Markdown、校验 Front Matter,并生成文章路由。

这篇文章本身就是一个示例:它位于 src/content/blog/astro-content-guide.md,但最终会被 Astro 生成到 /blog/astro-content-guide/

一篇文章的三个部分

每篇 Markdown 文件通常包含三部分:

  1. 文件名:决定文章的 slug,例如 astro-content-guide.md
  2. Front Matter:开头两个 --- 之间的 YAML 数据,例如标题、日期和标签。
  3. 正文:使用 Markdown 写标题、列表、链接和代码。
title: "文章标题"
description: "首页摘要"
pubDate: 2026-09-07
category: "技术"
tags: ["Astro"]
draft: false

Astro 在背后做了什么

src/content.config.ts 用 Zod 定义字段规则。首页调用 getCollection('blog') 读取所有文章,详情页通过 getStaticPaths() 为每篇文章生成静态页面。

如果 Front Matter 缺少必填字段,构建时会直接报错。这是好事:文章不会悄悄带着错误上线。

你可以马上试试

复制这篇文章,改文件名和 Front Matter,然后运行 npm run dev。保存后刷新首页,就能看到新文章。