2
0

I18N_USER_GUIDE.md 4.7 KB


title: i18n User Guide

The Apache APISIX Dashboard uses @umijs/plugin-locale to solve the i18n issues, in order to make the i18n more clear and reasonable, we would recommend to obey the following rules

Location of locale configuration

  • Please put the global locales under src/locales.
  • Please put each page's locale file under src/pages/$PAGE/locales folder.
  • Please put the Component's locale file under src/components/$COMPONENT/locales folder, and we MUST import them manually

How to name the key for each locale filed

the key can be like this : [basicModule].[moduleName].[elementName].[...desc]

  • what's the first tow levels? e.g: app.pwa, page.consumer, component.actionBar

  • The subkeys are divided into $element + $description style e.g: app.pwa.message.offline, component.actionBar.button.nextStep

    • If the the text is the part of a element, we can use [elementNameProps] e.g: page.consumer.proTableColumns.username.
    • If there are two or more same level part locales of a element, we can add number suffix e.g: page.route.form.itemRulesExtraMessage1.path, page.route.form.itemRulesExtraMessage2.path.
  • common texts, we should not repeat in other part, and the common locale key omit [elementName] would be better.

    • If the text is used in two or more places inside the module, we would recommend sharing the text in the module, e.g:page.route.parameterPosition.
    • If the text is used in two or more places between modules, we would recommend sharing the text globally, and addglobalas the moduleName,git e.g:component.global.confirm.

Global locale keys

we have already defined many global keys, before you do i18n, you can refer to those.

Recommended subkey naming

  • Form
element props locale subKey
Form.Item label form.itemLabel
Form.Item rules.required form.itemRulesRequiredMessage
Form.Item rules.pattern form.itemRulesPatternMessage
Form.Item extra form.itemExtraMessage

Example:

'page.route.form.itemRulesExtraMessage.parameterName': '仅支持字母和数字,且只能以字母开头',
'page.route.form.itemRulesPatternMessage.apiNameRule': '最大长度应小于100',
  • Input
element props locale subKey
Input placeholder input.placeholder

Example:

'page.route.input.placeholder.parameterNameHttpHeader': '请求头键名,例如:HOST',
  • Button
element props locale subKey
Button null button

Example:

'page.route.button.returnList': '返回路由列表',
  • Steps
element props locale subKey
Steps.step title steps.stepTitle

Example:

'page.route.steps.stepTitle.defineApiRequest': '设置路由信息',
  • Select
element props locale subKey
Select.Option null select.option

Example:

'page.route.select.option.enableHttps': '启用 HTTPS',
  • Radio
element props locale subKey
Radio null radio

Example:

'page.route.radio.staySame': '保持原样',
  • ProTable
element props locale subKey
ProTable columns.title proTable.columnsTitle

ProTable usually appears in conjunction with forms, and columns title are same with form item label, so we recommend these title keys to be the common key in modules.