使用 MDX
演示如何在 Astro 中编写和使用 MDX 内容
2022年7月2日 周六置顶
250 字 · 1 分钟
文档未分配标签
本主题已在 astro.config.mjs 配置文件中安装并配置了 @astrojs/mdx↗ 集成。如果你不想使用 MDX，可以从配置文件中移除该集成来关闭支持。
为什么用 MDX？
MDX 是 Markdown 的一种特殊形式，支持内嵌 JavaScript 与 JSX 语法。这让你可以在 Markdown 内容中混用 JavaScript 和 UI 组件↗，例如做交互式图表或提示框。
如果你已经有现成的 MDX 内容，这个集成应该能让迁移到 Astro 变得很轻松。
示例
下面演示如何在 MDX 中导入并使用一个 UI 组件。
在浏览器中打开本页时，你应该能看到下方那个可点击的按钮。
更多链接
- MDX 语法文档↗
- Astro 使用文档↗
- 注意： 想要做出可交互的组件，仍然需要使用客户端指令↗。否则 MDX 里的所有组件默认都只会渲染成静态 HTML（不带 JavaScript）。
感谢阅读！