Signed-off-by: lucperkins <lucperkins@gmail.com>
2.5 KiB
title |
---|
Developing for Internationalization |
{{< note >}} All the files you created should use UTF-8 encoding. {{< /note >}}
Steps to localize the UI in your language
-
In the folder
src/portal/src/i18n/lang
, copy json fileen-us-lang.json
to a new file and rename it to<language>-<locale>-lang.json
.The file contains a JSON object including all the key-value pairs of UI strings:
{ "APP_TITLE": { "VMW_HARBOR": "Harbor", "HARBOR": "Harbor", // ... }, // ... }
In the file
<language>-<locale>-lang.json
, translate all the values into your language. Do not change any keys. -
After creating your language file, you should add it to the language supporting list.
Locate the file
src/portal/src/app/shared/shared.const.ts
.Append
<language>-<locale>
to the language supporting list:export const supportedLangs = ['en-us', 'zh-cn', '<language>-<locale>'];
Define the language display name and append it to the name list:
export const languageNames = { "en-us": "English", "zh-cn": "中文简体", "<language>-<locale>": "<DISPLAY_NAME>" };
{{< note >}} Don't miss the comma before the new key-value item you've added. {{< /note >}}
-
Enable the new language in the view.
Locate the file
src/portal/src/app/base/navigator/navigator.component.html
and then find the following code piece:<div class="dropdown-menu"> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en-us")' [class.lang-selected]='matchLang("en-us")'>English</a> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("zh-cn")' [class.lang-selected]='matchLang("zh-cn")'>中文简体</a> </div>
Add a new menu item for your language:
<div class="dropdown-menu"> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en-us")' [class.lang-selected]='matchLang("en-us")'>English</a> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("zh-cn")' [class.lang-selected]='matchLang("zh-cn")'>中文简体</a> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("<language>-<locale>")' [class.lang-selected]='matchLang("<language>-<locale>")'>DISPLAY_NAME</a> </div>
-
Next, please refer compile guideline to rebuild and restart Harbor.