CODEWITHSUNDEEP
htmlnode.jslocalization
Sweet
Sweet

Reputation: 187

How to localize a webpage

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">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Country</a>
          <ul class="dropdown-menu">
            <li><a href="?lang=en">United States</a></li>
            <li><a href="?lang=zh_CN">China</a></li>
          </ul>
        </li>
      </ul>
    </div>
</div>
</header>

Any idea how I should implement this? Please advice. Thanks

Upvotes: 2

Views: 734

Answers (1)

Elvin Valiev
Elvin Valiev

Reputation: 454

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

Upvotes: 1

Related Questions