Skip to main content
Version: 3.0

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
elementpropslocale subKey
Form.Itemlabelform.itemLabel
Form.Itemrules.requiredform.itemRulesRequiredMessage
Form.Itemrules.patternform.itemRulesPatternMessage
Form.Itemextraform.itemExtraMessage

Example:

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

Example:

'page.route.input.placeholder.parameterNameHttpHeader': '请求头键名,例如:HOST',
  • Button
elementpropslocale subKey
Buttonnullbutton

Example:

'page.route.button.returnList': '返回路由列表',
  • Steps
elementpropslocale subKey
Steps.steptitlesteps.stepTitle

Example:

'page.route.steps.stepTitle.defineApiRequest': '设置路由信息',
  • Select
elementpropslocale subKey
Select.Optionnullselect.option

Example:

'page.route.select.option.enableHttps': '启用 HTTPS',
  • Radio
elementpropslocale subKey
Radionullradio

Example:

'page.route.radio.staySame': '保持原样',
  • ProTable
elementpropslocale subKey
ProTablecolumns.titleproTable.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.