MDX 基本可以理解为 Markdown 的扩展版本，它允许你直接引入 .astro、 .jsx、.tsx 或其他已经接入的组件。

这让内容页面拥有了更强的表达能力，也能加入一些轻量交互。

这篇示例会简单说明 MDX 的基本用法，并给出几个演示。

示例 1

从 /components 目录引入一个组件。

这个组件接收一个 JavaScript 日期对象，并把它格式化成字符串。

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

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

示例 2

从当前内容目录的相对路径引入组件。

这个组件会在点击按钮时触发一个提示。

import RelativeComponent from "./component.astro";

<RelativeComponent />

Nano 是一个非常轻量的主题，本身不依赖 React、Vue、Solid 之类的框架。 如果你后续接入这些框架，也依然可以在 MDX 里直接使用对应组件。

如果你希望组件真正具备交互能力，不要忘了加上 client 指令。

<ReactComponent client:load />

继续阅读

• MDX 语法文档
• Astro 集成指南
• Astro Markdown / MDX 文档
• 注意： 如果需要交互，仍然要使用 Client Directives，否则组件默认只会渲染成静态 HTML。