用 Astro Content Collections 管理中文技术内容

Astro 的内容层(Content Layer)把「一堆 Markdown 文件」变成「有类型约束的数据集」。核心是两个东西:glob loader 负责把目录里的文件读进来,Zod schema 负责校验每篇文章的元数据。

定义集合

在 src/content.config.ts 里:

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

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

export const collections = { blog };

之后任何一篇 front matter 少了 title、或者 pubDate 写成了 2026-13-01,构建阶段就直接失败,而不是等上线后页面渲染出一个空标题。

在页面里取数

列表页用 getCollection('blog') 拿全部文章,排序、切片都是普通数组操作;文章页用动态路由 src/pages/blog/[id].astro,在 getStaticPaths() 里把每篇文章映射成一个静态页面,再用 render(post) 拿到渲染好的组件。

这套流程最大的好处:整站是一次性预渲染的静态 HTML,没有运行时查询,没有客户端水合,中文内容对搜索引擎完全可见。

中文细节

• 文件名用英文 slug(如 astro-content-collections),URL 干净,中文标题放在 front matter 的 title 里;
• pubDate 用 z.coerce.date() 直接吃 2026-09-28 这样的日期字符串,排序时按时间戳比较即可。