---
title: "使用 MDX | Go Bali Go"
description: "Lorem ipsum dolor sit amet"
url: "https://gobaligo.id/zh-cn/blog/using-mdx/"
lang: "zh-CN"
published: "2024-06-01T00:00:00.000Z"
modified: "2024-06-01T00:00:00.000Z"
source: gobaligo.id
---

# 使用 MDX

小 [作者：Gobaligo编辑部](https://gobaligo.id/about/) Go Bali Go 内容团队・巴厘岛旅游攻略

2024年6月1日

---

![使用 MDX](https://gobaligo.id/zh-cn/assets/blog-placeholder-5.jpg)

💡 快速解答

Lorem ipsum dolor sit amet

本主题已安装并配置了 [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) 集成，位于 `astro.config.mjs` 配置文件中。如果您不想使用 MDX，可以通过从配置文件中删除该集成来禁用支持。

## 为什么选择 MDX？

MDX 是一种特殊的 Markdown 格式，支持嵌入 JavaScript 和 JSX 语法。这使得您可以在 Markdown 内容中 [混合 JavaScript 和 UI 组件](https://docs.astro.build/en/guides/integrations-guide/mdx/#mdx-in-astro)，例如用于交互式图表或警告。

如果您已有使用 MDX 编写的内容，此集成将有望使迁移到 Astro 变得轻而易举。

## 示例

以下是如何在 MDX 中导入和使用 UI 组件。
当您在浏览器中打开此页面时，您应该会看到下面可点击的按钮。

MDX 中嵌入的组件

## 更多链接

- [MDX 语法文档](https://mdxjs.com/docs/what-is-mdx)

- [Astro 使用文档](https://docs.astro.build/en/basics/astro-pages/#markdownmdx-pages)

- **注意:** [客户端指令](https://docs.astro.build/en/reference/directives-reference/#client-directives) 仍然是创建交互式组件所必需的。否则，你的 MDX 中的所有组件默认将渲染为静态 HTML（没有 JavaScript）。