用 Astro 内容集合搭建可 Markdown 编辑的博客

本博依靠 Astro 的**内容集合（Content Collections）**实现：每一篇 .md 就是一篇文章，构建时自动变成独立的静态页面。

核心配置

集合定义在 src/content.config.ts，用 zod 声明文章的字段与类型：

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string().optional(),
    date: z.coerce.date(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { blog };

文章就是从文件来

只要在 src/content/blog/ 下新建一个 .md，顶部的 frontmatter 带上 title 和 date，正文写 Markdown，列表页和详情页就会自动出现它。

列表页与详情页

• 列表页：getCollection('blog') 取出所有文章，按日期倒序展示卡片。
• 详情页：用 getStaticPaths() 把每篇转成 /blog/xxx/ 路由，render() 把 Markdown 渲染成正文。

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

为什么不用后端

评论区、站点统计这类才需要联网能力；纯文章浏览在构建时就全部渲染成 HTML，部署后是纯静态站，快且省资源。这也是拆掉”从服务器拉取”这条路的根本原因。