MDX 用法:在文章里获得组件能力

Markdown 负责”写”,MDX 在 Markdown 之上允许 import 并使用组件。需要交互 Demo、自定义布局的文章,把文件后缀改成 .mdx 即可。

普通 Markdown 就够的场景

纯文本 + 代码 + 图片 + callout,.md 足够:

Important

标题与摘要(frontmatter)别偷懒——它们决定首页列表、搜索与分享卡片的效果。

代码块

主题内置 shiki 高亮与文件名显示,支持绝大多数语言:

// 防抖
export function debounce(fn, ms = 300) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Agent Research.");
    }
}

Tip

代码高亮是构建期完成的,页面不加载任何高亮脚本——这也是静态博客加载快的原因之一。

MDX 的增量:组件

.mdx 文章可以这样写:

import MyComponent from "@/components/MyComponent.astro";

<MyComponent prop="value" />

组件在构建时渲染成 HTML,不是浏览器里跑 JS,静态博客也能拥有”组件能力”。

约定

能用 Markdown 讲清的,别为炫技上组件
需要交互演示时再上 .mdx,给读者提供”可运行”的价值