A multi-language website, there are many ways to do it, but today I would like to introduce a jquery i18n plugin to support multilingual development for your website as well as your app.
After the jQuery i18n
project has been completed, I would like to share some experiences I have learned
- Plugin easy to use, easy to install
To install if the website project uses normal html, css, we just need to add these 2 tools to the footer file.
1 2 3 | 1. https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.7/jquery.i18n.min.js 2. https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.7/jquery.i18n.messagestore.min.js |
- The features are quite small and useful
You imagine we often have some dynamic parameters in the text, how we pass those dynamic parameters into the text.
With jquery i18n it’s as easy as candy, jquery i18n provides me with a feature called Message format
For example, we have the text Chào Cường
, can we imagine what the problem is here?
when we chào
someone, then someone is a cave that can be transmitted inward, so how do we get jquery i18n
?
It’s simple Placeholders
will handle it very neatly. We just need to declare the structure as follows
1 2 3 | var message = "Chào, $1"; $.i18n(message, 'Cường'); ==> đầu ra sẽ là Chào Cường |
Very useful, isn’t it
Or in English or have other types of singular plural by the letter s
, then this tool also gives us very interesting approach called Plurals
1 2 3 4 | var message = "Found $1 {{PLURAL:$1|result|results}}"; $.i18n(message, 1); // This gives "Found 1 result" $.i18n(message, 4); // This gives "Found 4 results" |
Very good, isn’t it
In addition, handling for Gender
also very useful with the following simple declaration
1 2 3 4 | var message = "$1 changed {{GENDER:$2|his|her}} profile picture"; $.i18n(message, 'Alice', 'female' ); // This gives "Alice changed her profile picture" $.i18n(message, 'Bob', 'male' ); // This gives "Bob changed his profile picture" |
- Note the translation of the translation
.json
from the server Load the translation file from the server, I have a lot of time to fixbug for this tool.
What is the problem, let’s analyze later
when i declare i18n
initialization
1 2 3 4 5 6 7 8 | $.i18n({ locale: document.documentElement.lang, }) .load({ 'en': '/i18n/message/message_en.json', 'jp': '/i18n/message/message_jp.json' }) |
I didn’t see it wrong, but I encountered a bitter result that there was no problem on the local test until deploying on the server all my translation could not be displayed. So bitter, isn’t it.
At that time, I was just searching for its document, then I discovered a very important detail
The library should expose an API to load an object containing key-value pair of messages. Example: $ .i18n.load (data). This will return a jQuery.Promise.
What does it mean =)), she handled asynchronously and returned 1 promise, oh man. So on the local it loads quickly without delay so it will play immediately. If you go on the server, you will be hurt immediately
Again rummaging around to fix google, finally split it’s key here
1 2 3 4 5 6 7 8 9 10 11 | $.i18n({ locale: document.documentElement.lang, }) .load({ 'en': '/i18n/message/message_en.json', 'jp': '/i18n/message/message_jp.json' }) .done( ()=>{ // doing something here }) |
Want to call the type $.i18n(message, 1);
then please put that tool into done
, to ensure that the translation file is finished loading from the server, then use it after using it.
Well, there’s a good tip I met in the project, can anyone see this line of code?
document.documentElement.lang
Do not think it’s simple, this will take the lang value in your html file from creating the following example
1 2 | <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> |
I have encountered a case of $.i18n.locale is empty
then I checked the lang in the HTML
file is not transmitted. So his value of $.i18n.locale is empty
is correct.
- Conclude
With the experience I have learned when working with jQuery i18n
hope that when you work with that tool, I will be more confident and avoid the errors that I have mentioned above. To make the project work more smoothly.