diff options
Diffstat (limited to 'docs/guide/guidelines/internationalization.md')
| -rw-r--r-- | docs/guide/guidelines/internationalization.md | 42 |
1 files changed, 24 insertions, 18 deletions
diff --git a/docs/guide/guidelines/internationalization.md b/docs/guide/guidelines/internationalization.md index 6ff17d76..7afc4598 100644 --- a/docs/guide/guidelines/internationalization.md +++ b/docs/guide/guidelines/internationalization.md @@ -1,41 +1,48 @@ # Internationalization + The OpenBMC Web UI implements internationalization and separates the language- -specific parts of the interface from the rest of the code, so they can be -easily replaced. The OpenBMC Web UI uses the following library for +specific parts of the interface from the rest of the code, so they can be easily +replaced. The OpenBMC Web UI uses the following library for internationalization: + - [Vue I18n](https://kazupon.github.io/vue-i18n/introduction.html) ## Key naming convention + The OpenBMC Web UI follows the following key naming conventions: - Page specific labels should be nested in an object with a key prefixed `page` -followed by the page title. Formatting in this manner provides a systematic -structure and improves readability of the language file. - - e.g. `pageLocalUserManagement.editUser` + followed by the page title. Formatting in this manner provides a systematic + structure and improves readability of the language file. + - e.g. `pageLocalUserManagement.editUser` - Any 'major' child components should be nested inside page specific objects -(ex. table, modal) - - e.g. `pageEventLogs.table.eventType` + (ex. table, modal) + - e.g. `pageEventLogs.table.eventType` - Avoid any complex linked locale messages. - Alphabetize object keys. This helps in locating the keys. - We use the `$t()` function in markup and `this.$t` in scripts (which Vue I18n -provides to our components) for outputting translation messages. + provides to our components) for outputting translation messages. ## Using the Vue I18n plugin -- A new `src/i18n.js` file is added and it registers Vue I18n as a plugin to -our Vue instance via the `Vue.use()` function. + +- A new `src/i18n.js` file is added and it registers Vue I18n as a plugin to our + Vue instance via the `Vue.use()` function. - The CLI creates a `src/locales/en-US.json` file, which contains our default -translation messages. + translation messages. - The keys are placed in the `src/locales/en-US.json` file and then the `$t()` -function is used to output the translation messages. + function is used to output the translation messages. - After adding or removing calls to `$t` please run this to ensure consistent -English translation (note: using variable expansion in key names is not -handled automatically, you need to manually check them): + English translation (note: using variable expansion in key names is not + handled automatically, you need to manually check them): + ```bash node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue)' -l 'src/locales/en-US.json' ``` + - If you're working on updating a translation for another language (e.g. -Russian), run this to see the omissions (as well as cruft) and add the -necessary keys automatically: + Russian), run this to see the omissions (as well as cruft) and add the + necessary keys automatically: + ```bash node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue)' -l 'src/locales/ru-RU.json' -a ``` @@ -51,8 +58,7 @@ node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue ``` - Vue I18n’s `$tc()` function can help with displaying plurals. -[Learn more about -pluralization.](https://kazupon.github.io/vue-i18n/guide/pluralization.html) + [Learn more about pluralization.](https://kazupon.github.io/vue-i18n/guide/pluralization.html) ```json "modal": { |