Given i made such a fuss about waiting for localisation to be put into the new backoffice. I suppose we should take a look at how you can localize you umbraco package in v14.
umb-localize Tag
you can use the <umb-localize>
tag in your html, just as you might have used <localize>
in Umbraco previously.
<umb-localize key="general_close"></umb-localize>
LocalizeController
if your elements are extending UmbElementMixin
you can use the localizeController which is included. (you can use it in non UmbElementMixin, you first need to initialize it)
this.localize.term('general_close');
Adding your own translations.
To add your own translations to the front end you now need to define them in a language file, and then add a manifest to include it in Umbraco.
Language file.
the format of the language file is 'section' 'key. So if you wanted a name and a description for your dashboard, you might have the following in a en-us.ts
file.
export default {
time: {
name: 'Time Dashboard',
description: 'what time the server thinks it is'
}
};
language manifest
In order to include this in the backoffice you do need to reference it in a manifest and include that.
const localizations: Array<ManifestLocalization> = [
{
type: 'localization',
alias: 'time.lang.enus',
name: 'English (US)',
weight: 0,
meta: {
culture: 'en-us'
},
js: () => import('./files/en-us')
},
{
type: 'localization',
alias: 'time.lang.engb',
name: 'English (UK)',
weight: 0,
meta: {
culture: 'en-gb'
},
js: () => import('./files/en-us')
},
]
What i found was my back office was running in en(gb) and there is currently no fallback, so i did have to define the language file twice once for en-us and once for en-uk.
Referencing the languages
now these are loaded you can get them with either <umb-element>
or this.localize.term
e.g
<uui-box headline="${this.localize.term('time_name')}">
<div slot="header">
<umb-localize key="time_description"></umb-localize>
</div>
</uui-box>
Top comments (0)