X (Twitter)

开始之前

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

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

手动设置

在一个文件中定义 i18n 配置，我们将在本指南中使用 @/ilb/i18n 导入它。

将其传递给源加载器。

lib/source.ts

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

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

并更新 Fumadocs UI 布局选项。

app/layout.config.tsx

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 中，并向其提供可用语言和翻译。请注意，默认情况下只提供英文翻译。

app/[lang]/layout.tsx

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）： 它们通常官方支持多语言。

编写文档

手动设置

在一个文件中定义 i18n 配置，我们将在本指南中使用 @/ilb/i18n 导入它。

将其传递给源加载器。

lib/source.ts

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

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

并更新 Fumadocs UI 布局选项。

app/layout.config.tsx

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 中，并向其提供可用语言和翻译。请注意，默认情况下只提供英文翻译。

app/[lang]/layout.tsx

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）： 它们通常官方支持多语言。

国际化

手动设置

中间件

路由

传递区域设置

搜索

编写文档

导航

目录

国际化

手动设置

中间件

路由

传递区域设置

搜索

编写文档

导航

目录