Requirement: 3 jquery library
1. jquery3.0.0.js or latest
2. i18next-1.6.3.min.js or latest
3. localizeit.js (customize scripts code)
localizeit.js Content:
//starts
window.i18n = require('./js/i18next-1.6.3.min.js');
var resources = {
"pt": {
"translation": {
"title": "Título",
"put":"colocar",
"language":"português"
}
},
"fr": {
"translation": {
"title": "Titre",
"put":"mettre",
"language":"français"
}
},
"hi": {
"translation": {
"title": "नाम",
"put":"पुट",
"language":"हिन्दी"
}
},
"en": {
"translation": {
"title": "title of the page",
"put": "Put",
"language":"English"
}
}
};
//for default language
$(document).ready(function () {
i18n.init({
"lng": 'hi',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
//ends
index.html Content
<!doctype html>
<html>
<head>
<meta charset="UTF-8"><!--mandatory-->
<!--In Electron way-->
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/i18next-1.6.3.min.js"></script>
<script src="./js/localize.js"></script>
</head>
<body>
<div data-i18n="title"></div>
<div data-i18n="put"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="hi">Hindi</button>
<button class="lang" data-lang="fr">français</button>
<button class="lang" data-lang="pt">Portuguese</button>
</body>
</html>
this is a basic implementation, language resources can be read from external json file.(Best practice). Visit i18next for more implementation details.
Once your above code execute without error, you may just provide link to above 3 scripts in any .html page, and it will localize it, dont forget to declare the key declaration in resource variable.
Use Google Input tool to translate Language
Happy Coding!
1. jquery3.0.0.js or latest
2. i18next-1.6.3.min.js or latest
3. localizeit.js (customize scripts code)
localizeit.js Content:
//starts
window.i18n = require('./js/i18next-1.6.3.min.js');
var resources = {
"pt": {
"translation": {
"title": "Título",
"put":"colocar",
"language":"português"
}
},
"fr": {
"translation": {
"title": "Titre",
"put":"mettre",
"language":"français"
}
},
"hi": {
"translation": {
"title": "नाम",
"put":"पुट",
"language":"हिन्दी"
}
},
"en": {
"translation": {
"title": "title of the page",
"put": "Put",
"language":"English"
}
}
};
//for default language
$(document).ready(function () {
i18n.init({
"lng": 'hi',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
//ends
index.html Content
<!doctype html>
<html>
<head>
<meta charset="UTF-8"><!--mandatory-->
<!--In Electron way-->
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/i18next-1.6.3.min.js"></script>
<script src="./js/localize.js"></script>
</head>
<body>
<div data-i18n="title"></div>
<div data-i18n="put"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="hi">Hindi</button>
<button class="lang" data-lang="fr">français</button>
<button class="lang" data-lang="pt">Portuguese</button>
</body>
</html>
this is a basic implementation, language resources can be read from external json file.(Best practice). Visit i18next for more implementation details.
Once your above code execute without error, you may just provide link to above 3 scripts in any .html page, and it will localize it, dont forget to declare the key declaration in resource variable.
Use Google Input tool to translate Language
Happy Coding!
To make localization project management easier, I recommend using the app localization platform POEditor. This online platform is perfect for collaborative translation and for workflow automation. It can be used to localize apps into any language.
ReplyDelete