Because of the work needs, recently researched the website language internationalization question, according to the current project structure, seeks a better solution.
First of all, we summarize the following ways of implementing language switching in the project:
1, a language set of pages, such as: index_cn.html,index_tn.html,index_en.html
The corresponding page is displayed according to the language currently used by the user.
This method is more commonly used, but also more ideal, good performance, but the development of the use of more time, each page to do a few more times.
2, background define variables, return the corresponding language information according to the current language
This way is not so troublesome, the page all static display text at the need to define variables, read from the background.
Background variables can be defined according to the language of different properties files, such as Message_cn.properties,message_tn.properties,message_en.properties
Note: This method is not suitable for processing the static text of the page, but can be combined with the 1th way, here specifically to deal with the page dynamic information tips.
3,JS defines language variables, full-text replacements, such as:
var dbi = Document.body.innerHTML; var Tolan = eval (LAN); for (var n=0;n<cn.length;n++) { dbi= dbi.replace (eval ("/" +cn[n]+ "/g"), Tolan[n]); } = DBI;This method is not recommended, processing performance is low, if the page has event binding and other content, but also cause a lot of problems.
4, using I18next page layer frame, JS frame address: http://i18next.com/;
The principle of i18next is to bind the content of the language resource file and render the result page according to the variables declared in the tag.
page Source:
<!DOCTYPE HTML><HTML> <Head> <Scripttype= "Text/javascript"src= "[Path]/jquery.js"></Script> <Scripttype= "Text/javascript"src= "[Path]/i18next.js"></Script> </Head> <Body> <ulclass= "NAV"> <Li><ahref="#"data-i18n= "Nav.home"></a></Li> <Li><ahref="#"data-i18n= "Nav.page1"></a></Li> <Li><ahref="#"data-i18n= "Nav.page2"></a></Li> </ul> </Body></HTML>
Loaded resource file (Locales/en/translation.json):
{" app": { "name": "I18next" }, "Nav": { "home": "Home", " Page1 ":" Page One "," Page2 ":" Page One " }} JavaScript code:
I18n.init (function(err, t) { // Translate nav $ (". Nav") . i18n (); // programatical Access var appName = t ("App.name");});i18next-page layer Language Internationalization JS Framework Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
