Written by

Fuma Nama

At

Tue Apr 08 2025

添加新条约

文档上的一些更改。

Back

mdx-component.tsx

有时候初学者会对在哪里添加 MDX 组件感到困惑,提出一些问题。虽然它只是简单地位于 page.tsx,不应该难以找到,但我认为某种约定可能会有所帮助,所以我决定重新添加 mdx-components.tsx

🌐 Sometimes there are questions raised by beginners confused about where to add MDX components. Although it's simply located in page.tsx, which shouldn't be difficult to find, I think some kind of conventions may help, so I decided to add back mdx-components.tsx.

我喜欢文件尽可能少,但考虑到 create-fumadocs-app 也应该作为不熟悉 MDX 的初学者的起点,默认提供它会更有帮助。

🌐 I love to have fewer files, but considering create-fumadocs-app should also act as a starting point for beginners who may not be familiar with MDX, it's much more helpful to provide it by default.

现有项目

🌐 Existing Projects

这个约定是可选的(只是为了让学习曲线更平滑)。 对于现有用户,你们可能已经知道如何传递 MDX 组件,并且不需要做进一步的更改。

🌐 The convention is optional (only to make the learning curve smoother). For existing users, you probably knew how to pass MDX components, and no further change is needed.

但你仍然可以做一个:

🌐 But you can still make one:

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 组件中使用它。

🌐 And use it in your MDX component.

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

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

弃用 <I18nProvider />

🌐 Deprecating <I18nProvider />

我们现在更倾向于用一个 <RootProvider /> 来处理所有事情,用 i18n 属性取代 <I18nProvider /> 的需求。

🌐 We now prefer a single <RootProvider /> for everything, replacing the need for <I18nProvider /> with a i18n prop.

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

这允许根提供者正确处理层级,而不会暴露过多的复杂性,例如,正确的顺序应该是:

🌐 This allows Root Provider to handle the hierarchy correctly without revealing too much complexity, for example, the correct order should be:

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

更改不同提供者的层级可能会导致问题,因为它们实际上相互依赖,现在所有内容都已整合到 <RootProvider /> 中,包括 I18n 配置。

🌐 Changing the hierarchy of different providers may result in problems since they actually rely on each other, now it is all integrated into <RootProvider />, including I18n configuration.

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

🌐 The new Internationalization guide requires Fumadocs 15.2.3 or above.