PixUI 项目国际化方案

index.html 中下面元素为不同语言设置不同的 class

html

<div id="container" class="pixui-page lang-zh"></div>

动态设置：

function addClassLang() {
  const dom = document.querySelector('#container');
  if (!dom) return;

  // 模拟逻辑，非真实判断
  dom.classList.add('lang-en');
  dom.classList.remove('lang-zh');
}

样式文件中注意用 :global 包裹选择器

less

.index-page {
  height: 100%;
}

:global(.lang-zh) {
  .index-page {
    // 仅在中文环境下生效
    height: 50%;
  }
}

tsx 中（逻辑不变）

tsx

class Home extends Component {
  render() {
    return (
      <div
        className={styles['index-page']}
      >
      </div>
    );
  }
}

效果展示

翻译

一共 17 种语言

export const LANG_CDN_MAP = {
  en: 'en',
  ru: 'ru',

  pt: 'pt-BR',
  th: 'th',
  vi: 'vi',

  zh: 'zh',
  HK: 'zh-HK',
  TW: 'zh-TW',

  de: 'de',
  id: 'id',
  fr: 'fr',

  es: 'es',
  tr: 'tr',
  ar: 'ar',

  ms: 'ms',
  uz: 'uz',
  ur: 'ur',
};

涉及两个仓库

业务
press-pix 中相关组件

PixUI 项目国际化方案 ​

翻译 ​

PixUI 项目国际化方案

翻译