跳到主要内容

国际化

初始化​

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>
}