MDX 简介与示例

MDXAstro教程

什么是 MDX？

MDX 是 Markdown 和 JSX 的结合体。简单来说，你可以在 Markdown 文章中直接使用组件。

普通的 Markdown 只能写文字、图片、代码块等静态内容，而 MDX 让你可以在文章中嵌入组件，实现更丰富的排版。

基础用法

MDX 文件使用 .mdx 扩展名，frontmatter 和普通 Markdown 一样：

---
title: '文章标题'
pubDate: 2025-06-17
---

文章内容...

在 MDX 中使用组件

这是 MDX 最强大的特性。你可以在文章顶部导入组件，然后在正文中直接使用。

示例：提示框组件

下面是一个 Note 组件，支持三种类型：

ℹ️ 普通提示

这是一条普通提示信息，用于补充说明。

💡 小技巧

MDX 文件使用 .mdx 扩展名，和 .md 文件放在同一个目录下即可。

⚠️ 注意事项

Astro 组件在 MDX 中是静态渲染的，不会在浏览器端产生交互。 如果需要交互功能，可以使用 React/Vue/Svelte 组件。

在 MDX 中引用组件的代码非常简单：

---
import Note from '../../components/Note.astro';
---

<Note type="tip" title="小技巧">
  这是提示内容。
</Note>

MDX vs 普通 Markdown

特性MarkdownMDX
文字排版✅✅
代码块✅✅
图片✅✅
使用组件❌✅
导入 npm 包❌✅
复杂布局❌✅

什么时候用 MDX？

  • 用 .md：纯文字、技术教程、日记等常规文章
  • 用 .mdx：需要嵌入自定义组件、提示框、卡片等丰富布局的文章

结语

MDX 是 Markdown 的增强版，在你需要的时候随时可以用。Astro 同时支持 .md 和 .mdx，两种文件可以混用，非常灵活。