React Router
在您的 React Router + Fumadocs 应用中支持 i18n 路由。
设置
在文件中定义 i18n 配置，在本指南中我们将使用 @/lib/i18n 导入它。
import { defineI18n } from 'fumadocs-core/i18n';
export const i18n = defineI18n({
defaultLanguage: 'en',
languages: ['cn', 'en'],
});有关 i18n 配置的可用选项，请参阅。
路由
为所有页面添加 :lang 前缀。
import { route, type RouteConfig } from '@react-router/dev/routes';
export default [
route(':lang', 'routes/home.tsx'),
route(':lang/docs/*', 'docs/page.tsx'),
route('api/search', 'docs/search.ts'),
] satisfies RouteConfig;使语言环境可选
您也可以使用 :lang? 前缀，并更新 i18n 配置：
import { defineI18n } from 'fumadocs-core/i18n';
export const i18n = defineI18n({
defaultLanguage: 'en',
languages: ['cn', 'en'],
hideLocale: 'default-locale',
});页面
向 <RootProvider /> 提供 UI 翻译和其他配置，英语翻译用作回退。
import {
Links,
Meta,
Scripts,
ScrollRestoration,
useParams,
} from 'react-router';
import { RootProvider } from 'fumadocs-ui/provider/base';
import { ReactRouterProvider } from 'fumadocs-core/framework/react-router';
import { defineI18nUI } from 'fumadocs-ui/i18n';
import { i18n } from '@/lib/i18n';
import './app.css';
const { provider } = defineI18nUI(i18n, {
translations: {
en: {
displayName: 'English',
},
cn: {
displayName: 'Chinese',
search: '搜尋文檔',
},
},
});
export function Layout({ children }: { children: React.ReactNode }) {
const { lang = i18n.defaultLanguage } = useParams();
return (
<html lang="en" suppressHydrationWarning>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body className="flex flex-col min-h-screen">
<ReactRouterProvider>
<RootProvider
i18n={provider(lang)}
>
{children}
</RootProvider>
</ReactRouterProvider>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}传递语言环境
将 locale 参数添加到 baseOptions() 中，并将 i18n 包含在 props 中：
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`
};
}在您的页面和布局中将语言环境传递给 Fumadocs。
import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';
export const source = loader({
i18n,
// other options
});搜索
在您的搜索解决方案上配置 i18n。
- 内置搜索 (Orama)： 请参阅国际化。
- 云解决方案（例如 Algolia）： 它们通常官方支持多语言。
编写文档
请参阅i18n 路由以了解如何为特定语言环境创建页面。
导航
Fumadocs 仅处理其自身布局的导航（例如侧边栏）。
对于其他位置，您可以使用 useParams 钩子从 URL 中获取语言环境。
import { Link, useParams } from 'react-router';
const { lang } = useParams();
<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?
Last updated on