国际化
初始化
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>
}