A jQuery plugin that give you a eazy way, yet efficient to translate you static website easily.
npm i jquery.l10n
bower install jquery.l10n --save
Thaught you can clone it:
git clone git@github.com:karim88/jquery.l10n.git
or download it from here
To translate your static website, you only need to import the plugin.
<script src="jquery.l10n.js"></script>
Create a dictionary variable, then initialize the plugin
const words = {
ar: {
"Hello world!": "مرحبا بالعالم",
...
},
en: {
"Hello world!": "Hello world!",
...
},
fr: {
"Hello world!": "Bonjour monde",
...
},
jp: {
"Hello world!": "こんにちは世界",
...
}
};
const l10n = $('.gettext').l10n({
lang: 'jp',
dictList: words
});
The last thing is to mark text to be translated
<p class="gettext">Hello World!</p>
That's it, no more complexity.
you can also use it via javascript code
const hello_word = l10n.getText('Hello World!');
// hello_world = 'こんにちは世界'
$(selector).l10n({
lang: 'en',
dictList: words
});
-
The
selector
can be any CSS selector.class
,#id
,[attribute]
, But not recommended to use CSSelements
or:pseudo-classes
-
lang: Code for the language to be translated to.
default:en
lang will be used in the first run or when localStorage is empty.
- dictList: The set of dictionaries of words and sentence to be used in the plugin.
This function gets your desired text and translates it, if it's translation exist in the dictionary.
- text: A string to be translated
const licence = l10n.getText('Your text');
// licence = 'your translated text'
Note that 'l10n' is the variable we stored in our initialized plugin, so it can be named as you wish.
This function is needed so that you can change your language via you JS script.
- lang: A string with you desired language code.
l10n.setLanguage('ar');