跳到主要内容

国际化

初始化

Tushan 内置了部分语言系统国际化支持, 使用方式非常简单.

import { TushanContextProps } from 'tushan';
import { i18nEnTranslation } from 'tushan/client/i18n/resources/en';
import { i18nZhTranslation } from 'tushan/client/i18n/resources/zh';

const i18n: TushanContextProps['i18n'] = {
languages: [
{
key: 'en',
label: 'English',
translation: i18nEnTranslation,
},
{
key: 'zh',
label: '简体中文',
translation: i18nZhTranslation,
},
],
};

赋值到 Tushan 组件中进行初始化

<Tushan
i18n={i18n}
>
{...}
</Tushan>

languages 排序中的第一语言将会作为你的默认语言

单语言支持

如果你仅需要支持单语言,不需要支持国际化,你也可以通过仅指定一项语言来让Tushan默认翻译切换成你想要的语言

语言切换按钮

当指定了多国语言,右上角会出现语言切换按钮

资源文案

除了系统内置的文案之外,你还可以自定义一部分文案。

对于resource相关的表现, tushan有特殊的处理机制

如:

const i18n: TushanContextProps['i18n'] = {
languages: [
{
key: 'en',
label: 'English',
translation: {
...i18nEnTranslation,
resources: {
users: {
name: 'User',
fields: {
id: 'ID',
email: 'Email',
avatar: 'Avatar',
},
},
},
},
},
],
};

系统会自动加载对应资源路径的翻译而无需手动指定字段的label配置

自定义文案

对于自定义文案的使用,一般如下:

import { useTranslation } from 'tushan';

function Foo() {
const { t } = useTranslation();

return <div>{t('some.path')}</div>
}