.. | ||
lang | ||
client.ts | ||
i18next-config.ts | ||
i18next-serverside-config.ts | ||
index.ts | ||
README_CN.md | ||
README_EN.md | ||
server.ts |
Frontend i18n modification
Backend i18n modification
api/libs/helper.py:117
Add corresponding language support. Such as:
def supported_language(lang):
if lang in ['en-US', 'zh-Hans', 'de', 'de-AT']:
return lang
Adding multiple language files
Add multilingual files for different modules under web/i18n/lang. The file name is Module name.{LANG}.ts. Please refer LANG for details.
Introducing a newly added multilingual file
Introduce the newly added multilingual file in the resources object in web/i18n/i18next-config.ts. For example:
const resources = {
'en': {...},
'zh-Hans': {...},
_// Introduce the newly added language_
'new LANG': {
translation: {
common: commonNewLan,
layout: layoutNewLan,
...
}
}
}
Changes in the translation process
Multi-language processing of date formatting
Currently, two files are involved in date formatting in multiple languages:
1. web/app/components/header/account-setting/members-page/index.tsx
_// Line 78_
{dayjs(Number((account.last_login_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}
2. web/app/components/develop/secret-key/secret-key-modal.tsx
_// Line 82_
const formatDate = (timestamp: any) => {
if (locale === 'en') {
return new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format((+timestamp) * 1000)
} else {
return new Intl.DateTimeFormat('fr-CA', { year: 'numeric', month: '2-digit', day: '2-digit' }).format((+timestamp) * 1000)
}
}
Make corresponding changes based on requirements.
Handling translation content with variables
There will be variables in the translation, and the value of the variables will be replaced at runtime. Variables in translation will be wrapped in {{ and }}. When translating content with variables:
- Do not change the variable name. That is: the variable name does not need to be translated.
- Ensure that the statement remains smooth after the variable is filled. Find all translations with variables: search for {{ under ./web/i18n/lang.
Translation content is too long to destroy UI
If a certain translation content is much longer than other languages, check if it will destroy the UI.
Help documentation
The current logic for adjusting the help documentation is: Chinese jumps to Chinese, other languages jump to English. If the help documentation is also multilingual, changes need to be made in this area.
Verification
It is recommended to verify the newly added language pack through local deployment of the latest code. For reference: https://docs.dify.ai/getting-started/install-self-hosted/local-source-code Verification points:
- Whether the initial installation has new language drop-down options, and whether the new language can be used for initialization
- Whether there is a new language drop-down option in personal settings, and whether the new language can be selected and saved
- Whether the text in the interface is displayed in the new language, and whether the text destroys the UI
- Whether the content created from the template is all in the new language
- (CLOUD version) After logging in through OAuth authorization, whether the current browser language is set directly as the interface language