國際化

開始之前

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

手動設置

中間件

路由

傳遞區域設置

搜尋

編寫文檔

導航

目錄

國際化

手動設置

中間件

路由

傳遞區域設置

搜尋

編寫文檔

導航

目錄