5分钟配置 MDX 环境

配置 MDX 超简单，三步搞定。

第一步：安装集成包

打开终端，在你的 Astro 项目里运行：

npx astro add mdx

Astro CLI 会自动帮你安装 @astrojs/mdx 并更新配置文件。这个命令会问你几个问题（要不要更新配置、要不要安装依赖），全部选 Yes 就行。

第二步：验证配置

装完后，打开 astro.config.mjs，应该能看到这样的代码：

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()],
});

如果没有自动添加，手动加上就行。

测试 MDX 是否生效

在 src/pages/ 或 src/content/ 目录下创建一个 test.mdx 文件：

---
title: 测试MDX
---

# 这是 MDX 测试

普通的 Markdown 文本。

export const greeting = "你好";

现在可以用变量了：{greeting}！

<div style="padding: 1rem; background: #f0f0f0;">
  这是一个 JSX 元素
</div>

运行 npm run dev，访问对应页面，如果能看到变量和 JSX 元素正常显示，说明 MDX 已经配置成功了。

关于 .md 和 .mdx 文件的共存

装了 MDX 集成后，你的 .md 文件还是正常工作的。Astro 会根据文件扩展名自动选择处理方式：

.md 文件：按标准 Markdown 处理 .mdx 文件：按 MDX 处理，支持组件和 JSX 我的建议是：普通文章用 .md，需要用组件的文章用 .mdx。