← 返回博客
/前端

Astro 内容集合完全指南

3 分钟阅读
Astro 内容集合完全指南

Astro 内容集合完全指南

Astro Content Collections 让 Markdown 内容拥有类型安全的管理方式:每个文档的 frontmatter 都会经过 zod schema 校验,并在编辑器与构建期获得完整的类型提示。

定义集合 Schema

src/content.config.ts 中声明集合及其字段:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    tags: z.array(z.string()).default([]),
    cover: z.string().optional(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

字段写错、类型不符时,构建会直接报错并指出是哪一篇文章——这正是集合存在的意义。

查询内容

import { getCollection } from 'astro:content';

// 过滤草稿,按日期倒序
const posts = (await getCollection('blog', ({ data }) => !data.draft)).sort(
  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
);

渲染文章

详情页通过 getStaticPaths 生成路由,用 render() 得到内容组件:

export async function getStaticPaths() {
  return posts.map((post) => ({
    params: { id: post.slug },
    props: { post },
  }));
}

const { Content } = await render(post);

小结

内容集合是 Astro 内容型站点的基础设施。配合子目录 slug、分页与草稿机制,可以构建出结构清晰、可维护的博客系统——本主题的博客、系列、标签、归档全部建立在这套机制之上。

加载中…