国际化

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

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} 变量动态传入当前环境的语言代码。

在 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。后续我们可能会对重复词条进行检测和限制。

在扩展组件的入口文件（例如 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;

在扩展组件前端开发过程中，使用全局函数 t() 获取词条内容并向变量传入动态值。例如，在 src/App.jsx 文件中编写以下代码：
```
export default function App() {
  return <Wrapper>{t('HELLO_WORLD_DESC', {languageCode: globals.user.lang})}</Wrapper>;
}
```
在 frontend 目录下执行 yarn dev 命令启动前端环境。
访问 http://localhost:8000 并登录，在页面右上角点击当前用户的名称，然后选择用户设置切换语言。
在 English 和简体中文语言环境下点击 Hello World 将分别显示以下文字：