translations.ts
The tranlations.ts
file defines text translations for labels added across the template project. Text labels are used independently in two places:
- Text labels explain content and design settings to users in the IS Editor. Settings inside
content.ts
anddesign.ts
files have thelabel
field. Thetranlations.ts
file adds text values for these labels in one or several languages. - Text labels in showcase files like
1.ts
are used to display section previews in several languages.
Users will see texts defined in tranlations.ts
files in the matching language in the Instant Site Editor. If the language is not available, they'll see the English translation.
Therefore, translations.ts
files have the following requirements:
- The
en
translations are required for all section texts. - Each section requires two
translation.ts
files in thesettings
andshowcases
folders. - All labels defined in files in the
settings
andshowcases
folders must have text values, in all languages defined in thetranslation.ts
file.
To create a translations.ts
file, declare object named with a language code (ISO 639-1) for every translation you want to add and put '$label': 'text'
pairs inside.
Code example:
en: {
'$label.inputbox_1_name': 'Title',
'$label.inputbox_1_desc': 'Description',
'$label.color_picker_name': 'Select color for the navigation arrows',
},
es: {
...
},
nl: {
...
}
Check out the example section from the crane
tool. It has working 'translations.ts' files for both "settings" and "showcases" folders.
Updated about 2 months ago