跳至內容
Fumadocs

翻譯

為 UI 加入翻譯

概覽

所有官方 Fumadocs 套件預設皆使用英文，您也可以為其他語言新增翻譯。

本頁主要說明新增 UI 翻譯的細節；若需要完整說明，請參閱國際化指南。

單一 (Singular)

單一 (Singular) 是指只為單一語言新增翻譯：

lib/layout.shared.tsx
import { defineTranslations } from 'fumadocs-core/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';

export const translations = defineTranslations().extend(uiTranslations()).add({
  // [標籤]：[翻譯文字]
  'Search(search trigger)': '搜尋文檔',
});

請務必在所有 .extend() 呼叫完成之後，才呼叫 .add()。

請將翻譯內容傳入 <RootProvider />。

import { RootProvider } from 'fumadocs-ui/provider/<framework>';
import { i18nProvider } from 'fumadocs-ui/i18n';
import { translations } from '@/lib/layout.shared';

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <RootProvider
      i18n={i18nProvider(translations)}
    >
      {children}
    </RootProvider>
  );
}

多語言

為多種語言定義翻譯。此功能需要標準的 i18n 設定。

lib/layout.shared.tsx
import { defineTranslations } from 'fumadocs-core/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import { i18n } from '@/lib/i18n';

export const translations = i18n
  .translations()
  .extend(uiTranslations())
  .add({
    // [語系代碼]：[翻譯]
    cn: {
      // [標籤]：[翻譯]
      'Search(search trigger)': '搜尋文檔',
    },
  });

將翻譯內容傳給 <RootProvider />。

import { RootProvider } from 'fumadocs-ui/provider/<framework>';
import { i18nProvider } from 'fumadocs-ui/i18n';
import { translations } from '@/lib/layout.shared';

export function Layout({ locale, children }: { locale: string; children: React.ReactNode }) {
  return (
    <RootProvider
      i18n={i18nProvider(translations, locale)}
    >
      {children}
    </RootProvider>
  );
}

語言包

語言包為 fumadocs-ui 及 Fumadocs OpenAPI 等多項整合提供翻譯。

npm i @fumadocs/language

若官方語言包中沒有您需要的語言，歡迎到我們的儲存庫貢獻翻譯。

使用 preset() 套用語言包：

import { defineTranslations } from 'fumadocs-core/i18n';
import { openapiTranslations } from 'fumadocs-openapi/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import { zhTW } from '@fumadocs/language/zh-tw';

export const translations = defineTranslations()
  .extend(uiTranslations())
  // 依照您已設定的整合加入對應的擴充功能，例如 Fumadocs OpenAPI：
  .extend(openapiTranslations())
  // 繁體中文
  .preset(zhTW());

自訂語言包

您也可以建立並發布自己的語言包。

例如，zh-TW 語言包的結構如下：

import type {  } from 'fumadocs-core/i18n';
import * as  from 'fumadocs-openapi/i18n';
import * as  from 'fumadocs-ui/i18n';
import * as  from '@fumadocs/story/i18n';

const  = {
  : '繁體中文',
  'Server URL(playground server select)': '伺服器 URL',
  'Variant(story controls)': '變體',
  // ...
} satisfies <. & . & .>;

export function (): <keyof typeof > {
  return {
    : 'zh-TW',
    : ,
  };
}

擴充功能

擴充功能會宣告可供翻譯的標籤，只有已註冊的標籤才會傳送至用戶端酬載。

自訂擴充功能

如果您正在為 Fumadocs 開發社群套件，可以建立擴充功能來註冊您自己的翻譯。

首先，請安裝 Fumadocs 所使用的翻譯工具組：

npm i @fuma-translate/react
import type {  } from 'fumadocs-core/i18n';

const  = [
  // 鍵的格式："your label(additional context)"
  'Hello {user}(welcome screen)',
] as ;

export function (): <(typeof )[number]> {
  return {  };
}

為求簡潔，此處省略相關說明；您可以參閱 Fuma Translate 的文件，了解如何編譯翻譯鍵值 & 型別，而非直接寫死在程式碼中。

使用者可以這樣使用您的擴充功能：

import { defineTranslations } from 'fumadocs-core/i18n';
import { myTranslations } from 'my-package/i18n';

export const translations = defineTranslations()
  .extend(myTranslations())
  .add({
    'Hello {user}(welcome screen)': '你好 {user}',
  });

How is this guide?

最後更新於

本頁目錄

概覽單一 (Singular)多語言語言包自訂語言包擴充功能自訂擴充功能
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep