MDX 本质上是 Markdown 的一种扩展，它具备导入 .astro、 .jsx、.tsx 以及你已集成的其他框架组件的能力。

这一特性为创建交互式内容开启了无限可能。

本指南将涵盖 MDX 语法的基本知识、使用方法，并提供几个示例供参考。

示例 1

从 /components 目录导入组件。

该组件接收一个 JavaScript Date 对象，并将其格式化为字符串。

import DateComp from "../../../components/FormattedDate.astro";

<DateComp date={new Date()} />

示例 2

从相对于当前内容的相对路径导入组件。

当你点击按钮时，该组件将显示一条提示信息（Alert）。

import RelativeComponent from "./component.astro";

<RelativeComponent />

Nano 是一个极其轻量级的主题，不依赖任何框架；因此，这里没有提供 React、Vue、Solid 等框架的示例。 你可以参考下方的指南来集成这些框架，进而在你的 MDX 文件中使用相应的组件。

请别忘了使用 client 指令，以确保这些组件具备交互功能。

<ReactComponent client:load />

更多链接

• MDX 语法文档
• Astro 框架集成
• Astro 使用文档
• 注意： 若要创建交互式组件，仍需使用 客户端指令。否则，默认情况下，MDX 中的所有组件都将渲染为静态 HTML（不包含 JavaScript）。