How to localize a webpage - html

Question

I am creating a Twitter Tweet Analysis web page. I want to localize the page based on the user selection. On the header I am providing a nav bar : Country which lists different locales. Based on the country selected by the user, the entire webpage should get translated.
Here is my HTML header:
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Twitter Analysis</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="dropdown">
Country
<ul class="dropdown-menu">
<li>United States</li>
<li>China</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
Any idea how I should implement this? Please advice. Thanks

Answer 1

You can use i18n-2 module for this.
First, you need to install i18n-2 using npm
$ npm install --save i18n-2
After that, add these config line into your app.js file. Remember to add it after you have loaded the cookieParser.
var cookieParser = require('cookie-parser');
app.use(cookieParser('your secret here')); // put the config after this line
i18n.expressBind(app, {
// setup some locales - other locales default to vi silently
locales: ['vi', 'en'],
// set the default locale
defaultLocale: 'vi',
// set the cookie name
cookieName: 'locale'
});
// set up the middleware
app.use(function(req, res, next) {
req.i18n.setLocaleFromQuery();
req.i18n.setLocaleFromCookie();
next();
});
The i18n object will now reside within the request object of each request. The above config also allows the locale to be set from query string or from cookie. For example, the mysite.com/?lang=en will automatically set the locale to en. To use the i18n object, simply use the __ function
function handlerFunc1(req, res){
res.render('index', { title: req.i18n.__("hello") });
}
Or if you want to use it in your view, simply use __ again
<h1>
<%= __("hello") %>
</h1>
i18n-2 will then look up the key hello in the locale files (by default located in locales/en.js and locales/vi.js). If the keys or the files is not exist yet, it will then create those files and keys automatically for you so you don’t have to worry about the errors. You can then open those files and edit the values already there or add your new one. The file syntax is just normal JSON syntax.
Note: you cannot use // for comments.
{
"hello": "Hello",
"title": "title",
}
To change the language, you can set it directly using setLocale(locale) function. Beside that, you can set the cookie locale value for the browser to remember the current language for the next access.
function handlerFunc(req, res){
// you can set it directly like this
req.i18n.setLocale('vi');
// or set it via the cookie
res.cookie('locale', 'vi');
req.i18n.setLocaleFromCookie();
// redirect back
res.redirect('back');
};
Source - link