mirror of https://github.com/goharbor/harbor.git
update i18 development guide document
This commit is contained in:
Steven Zou
parent
05378cbd85
commit
f87e7475f4
|
|
@ -27,5 +27,5 @@ src/ui_ng/typings/
|
|||
**/node_modules
|
||||
**/ssl/
|
||||
**/proxy.config.json
|
||||
|
||||
**/npm*.log
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue