Comment on page
Internationalization
Nectar is multi-lingual. It supports Internationalization (i18n) and Right-to-Left languages such as Arabic, Hebrew etc.
The translation files in JSON format are present inside
/assets/custom/i18n/
folder.By default, Internationalization (i18n) is enabled in Nectar.
The configuration variables for i18n are present in
/assets/custom/js/config.js
file, inside window.config.i18n
object.window.config.i18n = {
enabled: true, // If your app uses multiple languages, then set to true.
languages: { // List of languages your app supports, this is used to load translations and populate language selector widgets.
en: {
name: 'English',
slug: 'english',
code: 'en',
locale: 'en-UK',
dir: 'ltr',
flag: 'https://flagcdn.com/gb.svg'
},
hi: {
name: 'Hindi',
slug: 'hindi',
code: 'hi',
locale: 'hi-IN',
dir: 'ltr',
flag: 'https://flagcdn.com/in.svg'
},
ar: {
name: 'Arabic',
slug: 'arabic',
code: 'ar',
locale: 'ar-AE',
dir: 'rtl',
flag: 'https://flagcdn.com/ae.svg'
}
},
defaultLanguage: 'en', // This is the default or primary language of your app.
fallbackLanguage: 'en', // In case, if translations are not present in JSON files, then the string is translated into fallback language.
namespaces: ['common'] // These are the i18n JSON translation files without the suffix .json
}
By default, the primary language for Nectar is set to
English (en)
To change the primary language from English to any other language (suppose French), follow these steps:
- 1.Open
index.html
and set<html lang="fr" dir="ltr">
- 2.In case, your primary language is RTL (suppose Arabic), then set
<html lang="ar" dir="rtl">
Additionally, change:<link class="f7" rel="stylesheet" href="assets/vendor/framework7/framework7-bundle.min.css" />
to<link class="f7" rel="stylesheet" href="assets/vendor/framework7/framework7-bundle-rtl.min.css" />
- 3.Now, open
/assets/custom/js/config.js
file. - 4.Inside
window.config.i18n = {
changedefaultLanguage
fromen
tofr
- 5.Go to
/assets/custom/i18n/
and create a new folderfr
- 6.Inside
/assets/custom/i18n/fr/
, create a filecommon.json
and add translation strings.
This way, you can set your Primary Language.
When your app is multi-lingual, you might want to provide a way for your users to switch languages. We have implemented one, and it is located at
/partials/select-language.html
The list of available languages is populated from
window.config.i18n.languages
The code which manages i18n in Nectar is present in
/assets/custom/js/init.js
inside app.i18n = {
object.This code initializes the i18n library.
Using this, you can get the current language of the app.
Using this, you can change the current language of the app. For example,
app.i18n.changeLanguage('hi');
This code looks for all the data-i18n attributes in HTML elements and translate them. This is useful when you dynamically add elements in DOM.
This is used to translate string present in JSON translation files. For example,
app.i18n.translate('app-title', 'Nectar', //i18next options);
If the current language is Hindi, then this will output
'
नेक्टर'
. If app-title
key is not present, then the translation will fallback to 'Nectar'
.Whenever the current language of the app is changed,
languageChanged
event is emitted by the app, which you can listen to and perform required actions. For example,app.on('languageChanged', function(language) {
});
Last modified 9mo ago