Astro + MDX 初体验：从 Markdown 到组件的桥梁

记录在个人站点中集成 MDX 的过程，包括 Content Collections 配置与代码高亮方案选型。

为什么选择 MDX

在构建个人作品集站点时，我希望博客既能写纯 Markdown，又能在需要时嵌入自定义组件。MDX 恰好提供了这种灵活性。

以下是一段示例代码，展示如何在 Astro 中读取 Content Collection：

// src/pages/blog/index.astro
import { getCollection } from "astro:content";

const posts = await getCollection("posts");
posts.sort((a, b) => 
  new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
);

图片与排版

正文中的图片会通过 prose 样式自动获得合适的间距。配合 prose-img:my-8 可以确保图片上下留白充足，阅读节奏更舒适。

示例图片

小结

Astro 的 Content Collections + MDX 组合非常适合个人博客场景：类型安全、零配置的代码高亮、以及按需嵌入组件的能力，让写作和展示都更加顺畅。