Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-21 17:55:30 +01:00
Code Issues Projects Releases Wiki Activity

update i18 development guide document

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

78
docs/developer_guide_i18n.md
View File

@ -4,57 +4,55 @@
### 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',
'sign_up': 'Sign Up',
...
};
{
"APP_TITLE": {
"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" }}
<script src="/static/resources/js/services/i18n/locale_messages_zh-CN.js"></script>
{{ else if eq .Lang "en-US"}}
<script src="/static/resources/js/services/i18n/locale_messages_en-US.js"></script>
{{ else if eq .Lang "<language>-<locale>"}}
<script src="/static/resources/js/services/i18n/locale_messages_<language>-<locale>.js"></script>
{{ end }}
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>"
};
```
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.**
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.
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.
Locate the file `src/ui_ng/src/app/base/navigator/navigator.component.html` and then find the following code piece:
```
[lang]
types = en-US|zh-CN|<language>-<locale>
names = en-US|zh-CN|<language>-<locale>
<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 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:
```
docker-compose down
docker-compose up --build -d
```
4. Next, please refer [compile guideline](compile_guide.md) to rebuild and restart Harbor.