如何在Astro布局中预定义组件供MDX文件无需导入直接使用？

你可以通过两种方式实现MDX页面直接调用组件而无需手动导入：

方法一：通过MDX布局注入组件 #

这是针对特定布局的方案，适合只希望使用该布局的MDX页面能调用组件的场景：

修改你的/src/layouts/MdxLayout.astro，将组件通过astro:mdx提供的MDX组件的components属性注入到MDX上下文：

---
import BaseLayout from './BaseLayout.astro';
import Button from '../components/Button.astro';
import Link from '../components/Link.astro';
import { MDX } from 'astro:mdx';
---

<BaseLayout>
  <MDX components={{ Button, Link }}>
    <slot />
  </MDX>
</BaseLayout>

之后，使用该布局的mdx.mdx文件就能直接写<Button>Click me</Button>，无需额外导入。

方法二：全局配置MDX组件 #

如果希望所有MDX页面都能直接使用这些组件，可在项目配置文件中全局注册：

修改astro.config.mjs，在MDX集成中配置全局组件：

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

export default defineConfig({
  integrations: [
    mdx({
      components: {
        Button: () => import('./src/components/Button.astro'),
        Link: () => import('./src/components/Link.astro'),
      },
    }),
  ],
});

配置完成后，所有MDX文件无需依赖布局，可直接调用注册的组件。

为什么你之前的方法失效？ #

你之前仅将组件传递给BaseLayout，但未将组件注入MDX的渲染上下文——MDX无法识别布局中传递的组件，因此抛出未定义的错误。

内容的提问来源于stack exchange，提问作者Dirk J. Faber