KubeSphere Extension Development Guide > Custom Features > Internationalization

Internationalization

This section describes how to internationalize frontend extensions.

KubeSphere Core integrates i18next as an internationalization component. You can use custom language packages to enable multi-language extensions.

Language packages

KubeSphere provides language packages for frontend extensions in the directory src/locales. By default, language packages en and zh are created. You can also create other language packages as needed. The UI text for each language is stored in JSON files. You can create multiple JSON files in language packages.

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

Development process

The following takes the Hello World extension as an example to demonstrate how to display Hello World! The current language code is {languageCode}. and 你好世界！当前的语言代码为 {languageCode}。Also, this example shows how to replace {languageCode} with the language code of a local environment.

In src/locales/en/base.json and src/locales/zh/base.json, add the following text:

// 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}。"
}

Import the language package in src/index.js:

import routes from './routes';
import locales from './locales';  // Import the language package

onst menu = {
  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: [menu],
  locales,
};

globals.context.registerExtension(extensionConfig);

In the development of the frontend extension, use the global function t() to obtain the text content and pass the value to the variable. For example, use the following code in the src/App.jsx file:
```
export default function App() {
  return <Wrapper>{t('HELLO_WORLD_DESC', {languageCode: globals.user.lang})}</Wrapper>;
}
```
Run the yarn dev command in the frontend directory to launch the frontend environment.
Visit and log in to http://localhost:8000, click the current user’s name in the upper right corner of the page, and then select User Settings to switch the language.
Clicking Hello World in the English and Simplified Chinese language environments will display the following text respectively: