AI Magic 3DDocsInternationalisierung
Unterstützen Sie mehrere Sprachen in Ihrer Dokumentation
Before you get started
Fumadocs ist keine vollwertige i18n-Bibliothek, es verwaltet nur seine eigenen Komponenten und Dienstprogramme.
Sie können für den Rest Ihrer App andere Bibliotheken wie next-intl verwenden. Lesen Sie die Next.js-Dokumente, um mehr über die Implementierung von I18n in Next.js zu erfahren.
Manuelle Einrichtung
Definieren Sie die i18n-Konfigurationen in einer Datei. Wir werden sie in dieser Anleitung mit @/ilb/i18n importieren.
Übergeben Sie es an den Quelllader.
import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';
export const source = loader({
i18n,
// other options
});Und aktualisieren Sie die Layoutoptionen der Fumadocs-Benutzeroberfläche.
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`
};
}Middleware
Erstellen Sie eine Middleware, die Benutzer zum entsprechenden Gebietsschema umleitet.
{
"file": "../../examples/i18n/middleware.ts",
"codeblock": {
"lang": "ts",
"meta": "title=\"middleware.ts\""
}
}Anpassbare Optionen finden Sie unter Middleware.
Beachten Sie, dass dies optional ist. Sie können auch Ihre eigene Middleware oder die von i18n-Bibliotheken bereitgestellte verwenden.
Routing
Erstellen Sie einen /app/[lang]-Ordner und verschieben Sie alle Dateien (z. B. page.tsx, layout.tsx) von /app in den Ordner.
Wickeln Sie den Stammanbieter in I18nProvider ein und stellen Sie ihm verfügbare Sprachen und Übersetzungen zur Verfügung.
Beachten Sie, dass standardmäßig nur englische Übersetzungen bereitgestellt werden.
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>
);
}Pass-Gebietsschema
Übergeben Sie das Gebietsschema in Ihren Seiten und Layouts an Fumadocs.
Search
Configure i18n on your search solution.
-
Built-in Search (Orama): For Supported Languages, no further changes are needed.
Otherwise, additional config is required (e.g. Chinese & Japanese). See Special Languages.
-
Cloud Solutions (e.g. Algolia): They usually have official support for multilingual.
Writing Documents
Navigation
Fumadocs only handles navigation for its own layouts (e.g. sidebar).
For other places, you can use the useParams hook to get the locale from url, and attend it to href.
import Link from 'next/link';
import { useParams } from 'next/navigation';
const { lang } = useParams();
return <Link href={`/${lang}/another-page`}>This is a link</Link>;In addition, the fumadocs-core/dynamic-link component supports dynamic hrefs, you can use it to attend the locale prefix.
It is useful for Markdown/MDX content.
import { DynamicLink } from 'fumadocs-core/dynamic-link';
<DynamicLink href="/[lang]/another-page">This is a link</DynamicLink>