国际化

本节介绍如何实现扩展组件前端页面的国际化。

KubeSphere Core 集成了 i18next 作为国际化组件,支持通过自定义语言包实现扩展组件前端多语言显示。

语言包

扩展组件前端模块中的 src/locales 目录用于存放扩展组件的语言包。默认情况下,它包括英文语言包 en 和简体中文语言包 zh,还可以根据需要手动创建其他语言包。前端界面的词条通常保存在 JSON 文件中,支持在每个语言包中创建多个 JSON 文件。

kubesphere-extensions
└── frontend
    └── extensions
        └── hello-world
            └── src
                └── locales
                    ├── en
                    │   ├── base.json
                    │   └── index.js
                    ├── index.js
                    └── zh
                        ├── base.json
                        └── index.js

开发步骤

下面以 Hello World 扩展组件为例,演示如何在扩展组件前端分别显示英文词条 Hello World! The current language code is {languageCode}. 和中文词条你好世界!当前的语言代码为 {languageCode}。,并向 {languageCode} 变量动态传入当前环境的语言代码。

  1. src/locales/en/base.json 文件和 src/locales/zh/base.json 文件中分别添加以下词条:

    // src/locales/en/base.json
    {
      "HELLO_WORLD_DESC": "Hello World! The current language code is {languageCode}."
    }
    
    // src/locales/zh/base.json
    {
      "HELLO_WORLD_DESC": "你好世界!当前的语言代码为 {languageCode}。"
    }
    

为了避免 core 和各扩展组件的词条 key 重复,建议在词条前加上扩展组件 name 的前缀,例如 HELLO_WORLD.HELLO_WORLD_DESC。后续我们可能会对重复词条进行检测和限制。

  1. 在扩展组件的入口文件(例如 src/index.js )中引入语言包:

    import routes from './routes';
    import locales from './locales';  // 引入语言包
    
    const menus = [
     {
       parent: 'topbar',
       name: 'hello-world',
       link: '/hello-world',
       title: 'HELLO_WORLD',
       icon: 'cluster',
       order: 0,
       desc: 'HELLO_WORLD_DESC',
       skipAuth: true,
    }
    ];
    
    const extensionConfig = {
      routes,
      menus,
      locales,
    };
    
    extensionConfig default extensionConfig;
    
  2. 在扩展组件前端开发过程中,使用全局函数 t() 获取词条内容并向变量传入动态值。例如,在 src/App.jsx 文件中编写以下代码:

    export default function App() {
      return <Wrapper>{t('HELLO_WORLD_DESC', {languageCode: globals.user.lang})}</Wrapper>;
    }
    
  3. frontend 目录下执行 yarn dev 命令启动前端环境。

  4. 访问 http://localhost:8000 并登录,在页面右上角点击当前用户的名称,然后选择用户设置切换语言。

    English简体中文语言环境下点击 Hello World 将分别显示以下文字: