本主题已经安装并配置了 @astrojs/mdx ↗ 集成,相关配置位于 astro.config.ts。如果不需要 MDX,可以从配置文件中移除该集成。
为什么使用 MDX?#
MDX 是 Markdown 的扩展格式,支持嵌入 JavaScript 和 JSX。借助它,可以在 Markdown 内容中组合 JavaScript 与 UI 组件 ↗,实现交互式图表、提示框等内容。
如果已有使用 MDX 编写的内容,这项集成可以简化迁移到 Astro 的过程。
示例#
下面展示如何在 MDX 中导入并使用 UI 组件。 在浏览器中打开页面后,可以看到一个可点击的按钮。
点击我参考资料#
- MDX 语法文档 ↗
- Astro 使用文档 ↗
- 注意: 创建交互式组件仍然需要使用 Client Directives ↗。否则,MDX 中的组件默认会被渲染为不包含 JavaScript 的静态 HTML。