MDX 使用示例

Astro 内置了对 MDX 的支持，让你可以在 Markdown 里直接嵌入组件。

为什么要用 MDX

MDX 是 Markdown 的超集，支持在内容中嵌入 JSX 语法。这意味着你可以在文章里直接引用组件——比如互动图表、警告框、自定义卡片等。

示例

在 MDX 中导入并使用组件：

import BlogPostCard from "@/components/BlogPostCard.astro";

下面是在文章中嵌入一个卡片组件的效果：

注意事项

• 你需要 Client Directives 来创建可交互的组件。否则所有组件默认渲染为静态 HTML。
• Astro 组件（.astro）可以直接在 MDX 中导入，不需要客户端指令——它们本身就是静态模板。