mirror of
https://github.com/goharbor/harbor.git
synced 2024-10-31 23:59:32 +01:00
update i18 development guide document
This commit is contained in:
parent
05378cbd85
commit
f87e7475f4
2
.gitignore
vendored
2
.gitignore
vendored
@ -27,5 +27,5 @@ src/ui_ng/typings/
|
|||||||
**/node_modules
|
**/node_modules
|
||||||
**/ssl/
|
**/ssl/
|
||||||
**/proxy.config.json
|
**/proxy.config.json
|
||||||
|
**/npm*.log
|
||||||
|
|
||||||
|
@ -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
|
|
||||||
```
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user