Internationalization ​

He3 supports 11 major international languages, and tool internationalization is optional. It is divided into two types:

• Tool metadata internationalization
• Business prompt internationalization

Tool meta information internationalization ​

He3 supports the generation of internationalized meta information for tools, that is, generating meta.locale.json files; used for base rendering and using internationalized information.

1. Modify tool meta information in package.json ​

{
  ...,
  "he3": {
    ...,
    // tool name
    "name": "test name",
    // Introduction
    "description": "test description",
    // keywords
    "keywords": [
      "test"
    ]
  },
}

2. Executing npm run i18n ​

After executing this command, a meta locale json file will be generated based on the data in package.json and used for debugging (npm run dev) and release version (npm run publish) .

meta.locale.json file:

{
  "en": {
    "$name": "test name",
    "$description": "test description",
    "$keywords": [
      "test"
    ]
  },
  "zh-cn": {
    "$name": "测试名",
    "$description": "测试简介",
    "$keywords": [
      "测试"
    ]
  },
  "ru": {
    ...
  },
  "zh-tw": {
    ...
  },
  "pt": {
    ...
  },
  "fr": {
    ...
  },
  "it": {
    ...
  },
  "ja": {
    ...
  },
  "ko": {
    ...
  },
  "de": {
    ...
  },
  "es": {
    ...
  }
}

You can manually modify the meta.locale.json file to update the tool name and tool details rendered by the dock. > Tools without a meta.locale/json file will automatically use the meta information in the package.json.

Business prompt internationalization ​

Business prompt internationalization refers to buttons, input box prompts, pop-up prompts, etc., used in the business. You need to manually create a lang.json file in the tool src directory.

{
  "zh": {
    "key": "值"
  },
  "en": {
    "key": "value"
  },
  "de": {
    ...
  },
  "es": {
    ...
  },
  "fr": {
    ...
  },
  "it": {
    ...
  },
  "ja": {
    ...
  },
  "ko": {
    ...
  },
  "pt": {
    ...
  },
  "ru": {
    ...
  },
  "zh-tw": {
    ...
  }
}

For more information, please refer to the lang.json file of the sample application.

After the lang.json file is created, you can access them in the vue file through the built-in variable $t('key'). He3 will display the corresponding internationalized information according to the user's selected language.

<div>
  <h-multiline-input
    v-model="input"
    auto-select
    :title="$t('input')"
    @change="encode" />
</div>

For more information, please refer to the index.vue file of the sample application.