AI Magic 3DDocInternazionalizzazione
Supporta più lingue nella documentazione
Before you get started
Fumadocs non è una libreria i18n completa, gestisce solo i propri componenti e utilità.
Puoi utilizzare altre librerie come next-intl per il resto della tua app. Leggi i documenti Next.js per ulteriori informazioni sull'implementazione di I18n in Next.js.
Configurazione manuale
Definisci le configurazioni dell'i18n in un file, lo importeremo con @/ilb/i18n in questa guida.
Passalo al caricatore di sorgenti.
import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';
export const source = loader({
i18n,
// other options
});E aggiorna le opzioni di layout dell'interfaccia utente di Fumadocs.
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
Creare un middleware che reindirizzi gli utenti alle impostazioni locali appropriate.
{
"file": "../../examples/i18n/middleware.ts",
"codeblock": {
"lang": "ts",
"meta": "title=\"middleware.ts\""
}
}Vedi Middleware per le opzioni personalizzabili.
Nota che questo è facoltativo, puoi anche utilizzare il tuo middleware o quello fornito dalle librerie i18n.
Itinerario
Crea una cartella /app/[lang] e sposta tutti i file (ad esempio page.tsx, layout.tsx) da /app alla cartella.
Avvolgi il provider root all'interno di I18nProvider e forniscigli le lingue e le traduzioni disponibili.
Tieni presente che per impostazione predefinita vengono fornite solo le traduzioni in inglese.
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 Localizzazione
Passa la localizzazione a Fumadocs nelle tue pagine e nei tuoi layout.
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>