update i18 development guide document

This commit is contained in:
Steven Zou 2017-04-18 11:36:29 +08:00
parent 05378cbd85
commit f87e7475f4
2 changed files with 39 additions and 41 deletions

2
.gitignore vendored
View File

@ -27,5 +27,5 @@ src/ui_ng/typings/
**/node_modules **/node_modules
**/ssl/ **/ssl/
**/proxy.config.json **/proxy.config.json
**/npm*.log

View File

@ -4,57 +4,55 @@
### Steps to localize the UI in your language ### Steps to localize the UI in your language
1. Copy the file `static/resources/js/services/i18n/locale_messages_en-US.js` to a new file in the same directory named `locale_messages_<language>_<locale>.js` . 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 named `locale_messages`, which consists of key-value pairs of UI strings: The file contains a JSON object including all the key-value pairs of UI strings:
``` ```
var local_messages = { {
'sign_in': 'Sign In', "APP_TITLE": {
'sign_up': 'Sign Up', "VMW_HARBOR": "VMware Harbor",
... "HARBOR": "Harbor",
}; ...
},
...
}
``` ```
In the file `locale_messages_<language>_<locale>.js`, translate all the values into your language. Do not change any keys. In the file `<language>-<locale>-lang.json`, translate all the values into your language. Do not change any keys.
2. After creating your locale file, you should include it from the HTML page header template. 2. After creating your language file, you should add it to the language supporting list.
In the file `views/sections/header-include.htm`, look for a `if` statement which switch langauges based on the current language (`.Lang`) value. Add in a `else if` statement for your language: Locate the file `src/ui_ng/src/app/shared/shared.const.ts`.
Append `<language>-<locale>` to the language supporting list:
``` ```
{{ if eq .Lang "zh-CN" }} export const supportedLangs = ['en-us', 'zh-cn', '<language>-<locale>'];
<script src="/static/resources/js/services/i18n/locale_messages_zh-CN.js"></script> ```
{{ else if eq .Lang "en-US"}} Define the language display name and append it to the name list:
<script src="/static/resources/js/services/i18n/locale_messages_en-US.js"></script> ```
{{ else if eq .Lang "<language>-<locale>"}} export const languageNames = {
<script src="/static/resources/js/services/i18n/locale_messages_<language>-<locale>.js"></script> "en-us": "English",
{{ end }} "zh-cn": "中文简体",
"<language>-<locale>": "<DISPLAY_NAME>"
};
``` ```
3. Add the new language to the `I18nService` module.
In the file `static/resources/js/services/i18n/services.i18n.js`, append a new key-value item to the `supportLanguages` object. This value will be displayed in the language dropdown list in the UI.
```
var supportLanguages = {
'en-US': 'English',
'zh-CN': '中文',
'<language>-<locale>': '<language_name>'
};
```
**NOTE: Don't miss the comma before the new key-value item you've added.** **NOTE: Don't miss the comma before the new key-value item you've added.**
3. Enable the new language in the view.
4. In the directory `static/i18n/`, copy the file `locale_en-US.ini` to a new file named `locale_<language>-<locale>.ini`. In this file, translate all the values on the right hand side into your language. Do not change any keys. Locate the file `src/ui_ng/src/app/base/navigator/navigator.component.html` and then find the following code piece:
5. Add the new language to the `app.conf` file.
In the file `make/common/templates/ui/app.conf`, append a new item to the configuration section.
``` ```
[lang] <div class="dropdown-menu">
types = en-US|zh-CN|<language>-<locale> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en-us")' [class.lang-selected]='matchLang("en-us")'>English</a>
names = en-US|zh-CN|<language>-<locale> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("zh-cn")' [class.lang-selected]='matchLang("zh-cn")'>中文简体</a>
</div>
```
Add 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>
``` ```
6. Next, change to `make/` directory, rebuild and restart the Harbor by the below command: 4. Next, please refer [compile guideline](compile_guide.md) to rebuild and restart Harbor.
```
docker-compose down
docker-compose up --build -d
```