国際化
Wakuのドキュメントを多言語に対応させます。
Fumadocs CLI
npx @fumadocs/cli init --i18n を実行すると、i18n に対応した新しいドキュメントをセットアップできます。手動で設定する場合は、以下の手順に従ってください。
概要
Waku と Fumadocs の両方で i18n ルーティングを設定します。
Fumadocs が担当するのは、ドキュメントのコンテンツとサイドバーの i18n です。アプリのその他の部分は、独自の i18n 設定で国際化してください。
セットアップ
i18n の設定をファイルに定義します。このガイドでは、@/lib/i18n としてインポートします。
import { defineI18n } from 'fumadocs-core/i18n';
export const i18n = defineI18n({
defaultLanguage: 'en',
languages: ['cn', 'en'],
});i18n の設定で使用できるオプションについては、こちらを参照してください。
ルーティング
すべてのページに [lang] プレフィックスを追加します。
翻訳
翻訳は lib/layout.shared.tsx で定義します。公式の言語パックなど、詳しくは翻訳を参照してください。
また、baseOptions() に locale パラメーターを追加すると、ロケールごとにレイアウトオプションを切り替えられます。
import { i18n } from '@/lib/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const translations = i18n
.translations()
.extend(uiTranslations())
.add({
en: {
displayName: 'English',
},
cn: {
displayName: 'Chinese',
},
});
export function baseOptions(): BaseLayoutProps {
export function baseOptions(locale: string): BaseLayoutProps {
return {
nav: {
title: 'My App',
url: `/${locale}`,
},
};
}翻訳を <RootProvider /> に渡します。
'use client';
import type { ReactNode } from 'react';
import { RootProvider } from 'fumadocs-ui/provider/waku';
import { i18nProvider } from 'fumadocs-ui/i18n';
import { useRouter } from 'waku/router/client';
import { i18n } from '@/lib/i18n';
import { translations } from '@/lib/layout.shared';
export function Provider({ children }: { children: ReactNode }) {
// パスの最初のセグメント
const lang = useRouter().path.split('/')[1] || i18n.defaultLanguage;
return <RootProvider>{children}</RootProvider>;
return <RootProvider i18n={i18nProvider(translations, lang)}>{children}</RootProvider>;
}ロケールを渡す
ページとレイアウトで、ロケールを Fumadocs に渡します。[lang] 配下のレイアウトとページは、ロケールを prop として受け取ります。
import { i18n } from '@/lib/i18n';
export const source = loader({
source: docs.toFumadocsSource(),
baseUrl: '/docs',
i18n,
});export default function Layout({ children }: { children: ReactNode }) {
export default function Layout({ lang, children }: { lang: string; children: ReactNode }) {
return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
return <HomeLayout {...baseOptions(lang)}>{children}</HomeLayout>;
}検索
使用している検索ソリューションで i18n を設定してください。
- 組み込み検索: 国際化を参照してください。
- クラウドソリューション(Algolia など): 多くの場合、多言語対応が公式にサポートされています。
ドキュメントの作成
特定のロケール向けのページを作成する方法については、i18n ルーティングを参照してください。
ナビゲーション
Fumadocs がナビゲーションを処理するのは、Fumadocs 自身のレイアウト(サイドバーなど)のみです。
それ以外の場所では、パスからロケールを取り出し、リンクの先頭に付加してください。
import { Link, useRouter } from 'waku/router/client';
const router = useRouter();
const lang = router.path.split('/')[1];
<Link to={`/${lang}/about`}>About Us</Link>;fumadocs-core/dynamic-link コンポーネントは動的な href に対応しているため、Markdown/MDX コンテンツ内でロケールのプレフィックスを付加する際に利用できます。
import { DynamicLink } from 'fumadocs-core/dynamic-link';
<DynamicLink href="/[lang]/another-page">This is a link</DynamicLink>How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep