コンテンツへスキップ
Fumadocs

翻訳

UI に翻訳を追加する

概要

Fumadocs の公式パッケージはすべてデフォルトで英語を使用しますが、他の言語の翻訳を追加することもできます。

このページでは主に UI の翻訳を追加する方法について詳しく説明します。国際化の全体像については、国際化ガイドを参照してください。

単一言語

単一言語(Singular)とは、1つの言語のみの翻訳を追加する方法を指します。

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)': '搜尋文檔',
});

.add() は、すべての .extend() の呼び出しが完了した後に呼び出してください。

翻訳を <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?

最終更新日

このページの内容

概要単一言語多言語対応言語パックカスタムパック拡張機能カスタム拡張機能
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep