harbor/docs/developer_guide_i18n.md

59 lines
2.4 KiB
Markdown
Raw Normal View History

2016-07-12 10:21:22 +02:00
## Developer's Guide for Internationalization (i18n)
*NOTE: All the files you created should use UTF-8 encoding.*
### Steps to localize the UI in your language
2017-04-18 05:36:29 +02:00
1. In the folder `src/ui_ng/src/i18n/lang`, copy json file `en-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",
2017-04-18 05:36:29 +02:00
"HARBOR": "Harbor",
...
},
...
}
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
In the file `<language>-<locale>-lang.json`, translate all the values into your language. Do not change any keys.
2016-07-12 10:21:22 +02:00
2017-04-18 05:36:29 +02:00
2. After creating your language file, you should add it to the language supporting list.
2016-07-12 10:21:22 +02:00
2017-04-18 05:36:29 +02:00
Locate the file `src/ui_ng/src/app/shared/shared.const.ts`.
Append `<language>-<locale>` to the language supporting list:
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
export const supportedLangs = ['en-us', 'zh-cn', '<language>-<locale>'];
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
Define the language display name and append it to the name list:
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
export const languageNames = {
"en-us": "English",
"zh-cn": "中文简体",
"<language>-<locale>": "<DISPLAY_NAME>"
};
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
**NOTE: Don't miss the comma before the new key-value item you've added.**
2016-07-12 10:21:22 +02:00
2017-04-18 05:36:29 +02:00
3. Enable the new language in the view.
2016-07-12 10:21:22 +02:00
2017-04-18 05:36:29 +02:00
Locate the file `src/ui_ng/src/app/base/navigator/navigator.component.html` and then find the following code piece:
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
<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>
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
Add new menu item for your language:
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
<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>
2016-07-12 10:21:22 +02:00
```
2017-04-18 05:36:29 +02:00
4. Next, please refer [compile guideline](compile_guide.md) to rebuild and restart Harbor.