mirror of
https://github.com/goharbor/harbor.git
synced 2025-01-12 10:50:44 +01:00
commit
4f1960a6eb
60
docs/developer_guide_i18n.md
Normal file
60
docs/developer_guide_i18n.md
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
## 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
|
||||||
|
|
||||||
|
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` .
|
||||||
|
|
||||||
|
The file contains a JSON object named `locale_messages`, which consists of key-value pairs of UI strings:
|
||||||
|
```
|
||||||
|
var local_messages = {
|
||||||
|
'sign_in': 'Sign In',
|
||||||
|
'sign_up': 'Sign Up',
|
||||||
|
...
|
||||||
|
};
|
||||||
|
```
|
||||||
|
In the file `locale_messages_<language>_<locale>.js`, 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.
|
||||||
|
|
||||||
|
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:
|
||||||
|
```
|
||||||
|
{{ 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 }}
|
||||||
|
```
|
||||||
|
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.**
|
||||||
|
|
||||||
|
|
||||||
|
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 `Deploy/config/ui/app.conf`, append a new item to the configuration section.
|
||||||
|
```
|
||||||
|
[lang]
|
||||||
|
types = en-US|zh-CN|<language>-<locale>
|
||||||
|
names = en-US|zh-CN|<language>-<locale>
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Next, change to `Deploy/` directory, rebuild and restart the Harbor by the below command:
|
||||||
|
```
|
||||||
|
docker-compose down
|
||||||
|
docker-compose up --build -d
|
||||||
|
```
|
||||||
|
|
@ -1,55 +0,0 @@
|
|||||||
# Developer's guide for internationalization
|
|
||||||
|
|
||||||
*NOTE: All the files you created should be in UTF-8 encoding.*
|
|
||||||
|
|
||||||
>**For the front-end i18n works,**
|
|
||||||
|
|
||||||
1. You need to create a JavaScript i18n source file under the diretory `/static/resources/js/services/i18n`, it should be named as `locale_messages_<language>_<locale>.js` with your localized translations.
|
|
||||||
|
|
||||||
This file contains a JSON object named `locale_messages`, and the sample pattern should be like below,
|
|
||||||
```
|
|
||||||
var local_messages = {
|
|
||||||
'sign_in': 'Sign In'
|
|
||||||
};
|
|
||||||
```
|
|
||||||
**NOTE: Please refer the keys which already exist in other i18n files to make your corresponding translations as your locale.**
|
|
||||||
|
|
||||||
2. After creating this locale file, you should include it into the HTML page header template.
|
|
||||||
|
|
||||||
In the file, `/views/sections/header-include.htm`. This template would be rendered by the back-end controller, with checking the current language (`.Lang`) value from the request scope, at each time there is only one script tag would be rendered at front-end page.
|
|
||||||
```
|
|
||||||
{{ 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 }}
|
|
||||||
```
|
|
||||||
3. Add the new coming language to the `I18nService` module.
|
|
||||||
|
|
||||||
In the file, `/static/resources/js/services/i18n/services.i18n.js`, append new key-value item to the `supportLanguages` object.
|
|
||||||
```
|
|
||||||
var supportLanguages = {
|
|
||||||
'en-US': 'English',
|
|
||||||
'zh-CN': '中文',
|
|
||||||
'<language>-<locale>': '<language_name>'
|
|
||||||
};
|
|
||||||
```
|
|
||||||
**NOTE: Don't miss to add a comma ahead of the new key-value item you've added.**
|
|
||||||
|
|
||||||
>**For the back-end i18n works,**
|
|
||||||
|
|
||||||
1. Create a file under the directory `/static/i18n/`, named as `locale_<language>-<locale>.ini`.
|
|
||||||
|
|
||||||
**NOTE: Please refer the keys which already exist in other i18n files to make your corresponding translations as your locale.**
|
|
||||||
|
|
||||||
2. Add the new comming language to the `app.conf` file.
|
|
||||||
|
|
||||||
In the file, `/Deploy/config/ui/app.conf`, append new item to the configuration section.
|
|
||||||
```
|
|
||||||
[lang]
|
|
||||||
types = en-US|zh-CN|<language>-<locale>
|
|
||||||
names = en-US|zh-CN|<language>-<locale>
|
|
||||||
```
|
|
||||||
>**Rebuild and start the Harbor project by using 'docker-compose' command.**
|
|
Loading…
Reference in New Issue
Block a user