Добавление нового языка в DC CMS
Добавление языка
Чтобы добавить новый язык в DC CMS:
- Добавьте язык в API
get-available-languages. - В пользовательском интерфейсе CMS Studio добавьте ваши новые файлы локализации в
ui/app/src/translations. Вы можете начать процесс с копированияes.jsonи перевода его содержимого на желаемый язык. - Перейдите в
ui/app/src/utils/i18n.tsи добавьте код локали в условный операторcreateIntlInstanceи добавьте регистр оператора switch вfetchLocale. - Включите файл/ы перевода для легаси форм и редактора типов контента в
studio-ui/static-assets/components/cstudio-common/resources/**/base.js, где ** - код языка, который нужно добавить. - Обновите шаблоны, чтобы включить импорт для нового языка.
Подробнее о каждом из этих действий можно узнать ниже.
Для начала нужно определить двухбуквенный код нужного языка, используя языковые коды ISO 639. Например, если добавляется японский, следует использовать код ja.
Шаг 1: Добавление языка в get-available-languages API
Чтобы добавить новый язык в API get-available-languages (/studio/api/1/services/api/1/server/get-available-languages.json), в вашем studio коде перейдите в studio/src/main/webapp/default-site/scripts/rest/api/1/server и откройте файл get-available-languages.get.groovy.
Добавьте новый язык в файл:
def result = []
result[0] = [:]
result[0].id = "en"
result[0].label = "English"
result[1] = [:]
result[1].id = "es"
result[1].label = "español"
result[2] = [:]
result[2].id = "ko"
result[2].label = "한국어"
result[3] = [:]
result[3].id = "de"
result[3].label = "Deutsch"
result[4] = [:]
result[4].id = "ja"
result[4].label = "日本語"
return result
Шаг 2: Добавление языка в менеджер переводов React (React Translations Manager)
Откройте файл ui/app/src/utils/i18n.ts и добавьте код локали в условный оператор createIntlInstance, а также добавьте регистр оператора switch в fetchLocale.
async function fetchLocale(locale: string): Promise<LookupTable<string>> {
let translations;
switch (locale) {
case 'de':
translations = await import('../translations/de.json');
break;
case 'es':
translations = await import('../translations/es.json');
break;
case 'ko':
translations = await import('../translations/ko.json');
break;
case 'ja':
translations = await import('../translations/ja.json');
break;
default:
translations = Promise.resolve({});
break;
}
return translations;
}
async function createIntlInstance(localeCode: string): Promise<IntlShape> {
localeCode = localeCode.replace('kr', 'ko');
if (
!fetchedLocales[localeCode] &&
// Nothing to fetch point if we don't have the locale
['de', 'es', 'kr', 'ja'].includes(localeCode)
) {
let fetchedTranslations = await fetchLocale(localeCode as BundledLocaleCodes);
...
Шаг 3: Добавление языковых файлов в ui/app/src/translations
В вашем studio-ui коде добавьте новые языковые файлы в ui/app/src/translations. Вы можете начать с копирования es.json и перевода его на ваш целевой язык.
{
"+E4CL4": "プロジェクト全体が公開されました",
"/A7dEh": "最後の投稿はエラーで完了しました、詳細についてはログを参照してください。",
...
"about.versionNumber": "バージョン番号",
"aboutView.attribution": "DCCMS 他の人のおかげでそれは可能です <a>オープンソースソフトウェアプロジェクト</a>.",
"accountManagement.changeHelperText": "パスワードが正常に更新されると、再度ログインするように求められます.",
"accountManagement.changeLanguage": "言語の変更",
"accountManagement.changePassword": "パスワードを変更する",
...
}
Шаг 4: Обновление шаблонов, чтобы добавить импорт нового языка
Теперь нужно изменить шаблоны, чтобы включить новые импорты языка с помощью элементов script[src]. Для этого, перейдите к коду studio-ui по пути studio-ui/templates/web/. Следующие шаблоны требуют обновления:
form.ftllegacy-site-config.ftl
Добавьте новый импорт языка <script src="/studio/static-assets/components/cstudio-common/resources/ja/base.js"></script> в файлы, перечисленные выше:
-
studio-ui/templates/web/form.ftl
<#include "/templates/web/common/page-fragments/head.ftl" />
<#include "/templates/web/common/page-fragments/studio-context.ftl" />
<script src="/studio/static-assets/components/cstudio-common/resources/en/base.js"></script>
<script src="/studio/static-assets/components/cstudio-common/resources/kr/base.js"></script>
<script src="/studio/static-assets/components/cstudio-common/resources/es/base.js"></script>
<script src="/studio/static-assets/components/cstudio-common/resources/de/base.js"></script>
<script src="/studio/static-assets/components/cstudio-common/resources/ja/base.js"></script>
studio-ui/templates/web/legacy-site-config.ftl
<script type="text/javascript" src="/studio/static-assets/components/cstudio-common/resources/en/base.js"></script>
<script type="text/javascript" src="/studio/static-assets/components/cstudio-common/resources/kr/base.js"></script>
<script type="text/javascript" src="/studio/static-assets/components/cstudio-common/resources/es/base.js"></script>
<script type="text/javascript" src="/studio/static-assets/components/cstudio-common/resources/de/base.js"></script>
<script type="text/javascript" src="/studio/static-assets/components/cstudio-common/resources/ja/base.js"></script>
Шаг 5: Добавление файла перевода для легаси-форм и типов контента
Для включения файла перевода для легаси-форм и типов контента выполните следующие шаги в вашем коде studio-ui:
- Перейдите в папку
studio-ui/static-assets/components/cstudio-common/resources/и создайте в ней папку, используя двухбуквенный языковой код для нового добавляемого языка, например:studio-ui/static-assets/components/cstudio-common/resources/ja. - Скопируйте файл
studio-ui/static-assets/components/cstudio-common/resources/en/base.jsи вставьте его в созданную ранее папку. - Начните переводить содержимое в файле
studio-ui/static-assets/components/cstudio-common/resources/ja/base.js, а затем сохраните ваши изменения.
CStudioAuthoring.Messages.registerBundle("siteDashboard", "ja", {
dashboardTitle: "ダッシュボード",
dashboardCollapseAll: "すべて折りたたむ",
...
Не забудьте изменить языковой код во всех вызовах registerBundle в файле base.js.
CStudioAuthoring.Messages.registerBundle("dialogs", "ja", {
Для тестирования ваших изменений перейдите на экран входа в DC CMS и нажмите на выпадающее меню выбора языка. Там вы должны увидеть новый язык, который был только что добавлен.