Multilingual Page

Step 1

Add a new language entry

languages:
  - locale: 'en'
    flag: 'static/img/flags/United-States.png'
  - locale: '<language_locale>'
    flag: '<language_flag_url>'

Step 2

Add a new json (static/locales/<language_locale>.json) file that contains the translations for the new locale.

Example en.json

{
  "website":{
    "title": "Jalpc"
  },
  "nav":{
    "home": "Home",
    "about_me": "About",
    "skills": "Skills",
    "career": "Career",
    "blog": "Blog",
    "contact": "Contact"
  }
}

Step 3

Next you need to add html indicators in all place you want to use i18n.(_includes/sections/*.html and index.html)

Example:

<a class="navbar-brand" href="#page-top" id="i18_title"><span data-i18n="website.title">{{ site.title }}</span></a>

Step 4

Next you need to initialise the i18next plugin(index.html):

$.i18n.init(
    resGetPath: 'locales/__lng__.json',
    load: 'unspecific',
    fallbackLng: false,
    lng: 'en'
}, function (t)
    $('#i18_title').i18n();
});