博客文章越来越多以后，光有 Markdown 文件还不够。我们需要确保每篇文章都有标题、简介和有效日期，这正是 Content Collections 的工作。

定义文章结构

这个项目在 src/content.config.ts 中定义了 blog 集合：

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

如果文章缺少必填字段，或者日期格式有问题，Astro 会在构建时提示错误。这比等到网站上线以后才发现问题可靠得多。

在页面中读取文章

const posts = (await getCollection('blog')).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);

这里先读取所有文章，再按照发布时间从新到旧排序。首页使用同样的方式，并通过 slice(0, 3) 只展示最近三篇。

内容和界面分离

Markdown 负责“写什么”，Astro 页面负责“怎样展示”。这种分工让我们可以专心写文章，而不用为每篇文章重复复制 HTML。