MDX 远程

介绍

🌐 Introduction

Fumadocs 提供 MDX Remote 套件，它是一个用于将 Markdown/MDX 内容源与 Fumadocs 集成的辅助工具。你可以把它看作是一个带有 Fumadocs 内置插件的 next-mdx-remote。

🌐 Fumadocs offers the MDX Remote package, it is a helper to integrate Markdown/MDX content sources with Fumadocs. You can think it as a next-mdx-remote with built-in plugins for Fumadocs.

小心

传递的 MDX 内容必须被信任，因为它默认允许执行代码。

🌐 The Passed MDX content must be trusted as it allows code execution by default.

安装

🌐 Setup

npm install @fumadocs/mdx-remote

它提供的主要功能是 MDX 编译器，可以将 MDX 内容编译为 JSX 节点。由于它不使用打包工具，因此有一些限制：

🌐 The main feature it offers is the MDX Compiler, it can compile MDX content to JSX nodes. Since it doesn't use a bundler, there's some limitations:

MDX 文件中不能有导入和导出。

它与服务器组件兼容。例如：

🌐 It's compatible with Server Components. For example:

import { createCompiler } from '@fumadocs/mdx-remote';
import { getPage } from './my-content-source';
import { DocsBody, DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { getMDXComponents } from '@/mdx-components';

const compiler = createCompiler({
  // options
});

export default async function Page({ params }: { params: { slug?: string[] } }) {
  const page = getPage(params.slug);
  const compiled = await compiler.compile({
    source: page.content,
  });

  const MdxContent = compiled.body;

  return (
    <DocsPage toc={compiled.toc}>
      <DocsBody>
        <MdxContent components={getMDXComponents()} />
      </DocsBody>
    </DocsPage>
  );
}

图片

🌐 Images

在像 Vercel 这样的无服务器平台上，原始的 public 文件夹（包括图片等静态资源）将在生产构建后被删除。MDX 编译器可能无法再访问 public 中的本地图片。

🌐 On serverless platforms like Vercel, the original public folder (including static assets like images) will be removed after production build. The MDX compiler might no longer be able to access local images in public.

在引用图片时，请确保使用 URL。

🌐 When referencing images, make sure to use a URL.

介绍

安装

图片

On this page