添加新的约定

文档的一些更改。

Back

mdx-component.tsx

有时，新手会困惑于在哪里添加 MDX 组件。 虽然它只是简单地位于 page.tsx 中，不应该难找，但我认为某种约定可能会有帮助，所以我决定添加回 mdx-components.tsx。

我喜欢文件越少越好，但考虑到 create-fumadocs-app 也应该作为新手不熟悉 MDX 的起点，提供它作为默认选项会更有帮助。

现有项目

这个约定是可选的（仅用于使学习曲线更平滑）。 对于现有用户，您可能已经知道如何传递 MDX 组件，无需进一步更改。

但您仍然可以创建一个：

mdx-components.tsx
import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    ...components,
  };
}

并在您的 MDX 组件中使用它。

page.tsx
import { getMDXComponents } from '@/mdx-components';

<MDXContent
  components={getMDXComponents({
    // extend it
  })}
/>;

弃用 <I18nProvider />

我们现在更倾向于使用单一的 <RootProvider /> 来处理一切，用 i18n 属性替换了对 <I18nProvider /> 的需求。

<RootProvider
  i18n={
    // i18n provider props
  }
>
  {children}
</RootProvider>

这允许 Root Provider 正确处理层次结构，而不会暴露过多复杂性，例如，正确的顺序应该是：

<FrameworkProvider>
  <ThemesProvider>
    <I18nProvider>
      <SidebarProvider>
        <SearchProvider>{children}</SearchProvider>
      </SidebarProvider>
    </I18nProvider>
  </ThemesProvider>
</FrameworkProvider>

更改不同提供者的层次结构可能会导致问题，因为它们实际上相互依赖，现在一切都集成到 <RootProvider /> 中，包括 I18n 配置。

新的国际化指南需要 Fumadocs 15.2.3 或更高版本。

Written by

Fuma Nama

At

Tue Apr 08 2025