2025/03/15

国际化

在您的文档中支持多种语言

开始之前

Fumadocs 不是一个功能齐全的 i18n 库，它只管理自己的组件和工具。

您可以使用其他库，如 next-intl，用于应用程序的其余部分。阅读 Next.js 文档，了解更多关于在 Next.js 中实现 I18n 的信息。

手动设置

在一个文件中定义 i18n 配置，我们将在本指南中使用

@/ilb/i18n

导入它。

将其传递给源加载器。


import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  i18n, 
  // other options
});

并更新 Fumadocs UI 布局选项。


import { i18n } from '@/lib/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    i18n,
    // different props based on `locale`
  };
}

中间件

创建一个将用户重定向到适当语言环境的中间件。


{
  "file": "../../examples/i18n/middleware.ts",
  "codeblock": {
    "lang": "ts",
    "meta": "title=\"middleware.ts\""
  }
}

查看中间件了解可自定义选项。

请注意，这是可选的，您也可以使用自己的中间件或 i18n 库提供的中间件。

路由

创建一个

/app/[lang]

文件夹，并将所有文件（例如

page.tsx

、

layout.tsx

）从

/app

移动到该文件夹。

将根提供程序包装在

I18nProvider

中，并向其提供可用语言和翻译。请注意，默认情况下只提供英文翻译。


import { RootProvider } from 'fumadocs-ui/provider';
import { I18nProvider, type Translations } from 'fumadocs-ui/i18n';

const cn: Partial<Translations> = {
  search: 'Translated Content',
  // other translations
};

// available languages that will be displayed on UI
// make sure `locale` is consistent with your i18n config
const locales = [
  {
    name: 'English',
    locale: 'en',
  },
  {
    name: 'Chinese',
    locale: 'cn',
  },
];

export default async function RootLayout({
  params,
  children,
}: {
  params: Promise<{ lang: string }>;
  children: React.ReactNode;
}) {
  const lang = (await params).lang;

  return (
    <html lang={lang}>
      <body>
        <I18nProvider
          locale={lang}
          locales={locales}
          translations={{ cn }[lang]}
        >
          <RootProvider>{children}</RootProvider>
        </I18nProvider>
      </body>
    </html>
  );
}

传递区域设置

在您的页面和布局中将区域设置传递给 Fumadocs。

搜索

在您的搜索解决方案上配置 i18n。

内置搜索 (Orama)： 对于支持的语言，无需进一步更改。

否则，需要额外配置（例如中文和日语）。请参阅特殊语言。
云解决方案（例如 Algolia）： 它们通常官方支持多语言。

编写文档

作者

MkSaaS模板

分类

手动设置中间件路由传递区域设置搜索编写文档导航

国际化

在您的文档中支持多种语言

开始之前

Fumadocs 不是一个功能齐全的 i18n 库，它只管理自己的组件和工具。

您可以使用其他库，如 next-intl，用于应用程序的其余部分。阅读 Next.js 文档，了解更多关于在 Next.js 中实现 I18n 的信息。

手动设置

在一个文件中定义 i18n 配置，我们将在本指南中使用

@/ilb/i18n

导入它。

将其传递给源加载器。


import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  i18n, 
  // other options
});

并更新 Fumadocs UI 布局选项。


import { i18n } from '@/lib/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    i18n,
    // different props based on `locale`
  };
}

中间件

创建一个将用户重定向到适当语言环境的中间件。


{
  "file": "../../examples/i18n/middleware.ts",
  "codeblock": {
    "lang": "ts",
    "meta": "title=\"middleware.ts\""
  }
}

查看中间件了解可自定义选项。

请注意，这是可选的，您也可以使用自己的中间件或 i18n 库提供的中间件。

路由

创建一个

/app/[lang]

文件夹，并将所有文件（例如

page.tsx

、

layout.tsx

）从

/app

移动到该文件夹。

将根提供程序包装在

I18nProvider

中，并向其提供可用语言和翻译。请注意，默认情况下只提供英文翻译。


import { RootProvider } from 'fumadocs-ui/provider';
import { I18nProvider, type Translations } from 'fumadocs-ui/i18n';

const cn: Partial<Translations> = {
  search: 'Translated Content',
  // other translations
};

// available languages that will be displayed on UI
// make sure `locale` is consistent with your i18n config
const locales = [
  {
    name: 'English',
    locale: 'en',
  },
  {
    name: 'Chinese',
    locale: 'cn',
  },
];

export default async function RootLayout({
  params,
  children,
}: {
  params: Promise<{ lang: string }>;
  children: React.ReactNode;
}) {
  const lang = (await params).lang;

  return (
    <html lang={lang}>
      <body>
        <I18nProvider
          locale={lang}
          locales={locales}
          translations={{ cn }[lang]}
        >
          <RootProvider>{children}</RootProvider>
        </I18nProvider>
      </body>
    </html>
  );
}

传递区域设置

在您的页面和布局中将区域设置传递给 Fumadocs。

搜索

在您的搜索解决方案上配置 i18n。

内置搜索 (Orama)： 对于支持的语言，无需进一步更改。

否则，需要额外配置（例如中文和日语）。请参阅特殊语言。
云解决方案（例如 Algolia）： 它们通常官方支持多语言。

编写文档

作者

MkSaaS模板

分类

手动设置中间件路由传递区域设置搜索编写文档导航

国际化

手动设置

中间件

路由

传递区域设置

搜索

编写文档

导航

作者

分类

更多文章

测试专用付费文章

Markdown

搜索

国际化

手动设置

中间件

路由

传递区域设置

搜索

编写文档

导航

作者

分类

更多文章

测试专用付费文章

Markdown

搜索