Localization with Jekyll

This post assumes familiarity with static site generators and Jekyll.

I recently made a localized website in Jekyll. Localization is a great application for a generator since it allows you to define pages once and have the generator create one version for each language.

I defined the localization data in the _data folder in a file called localization.yml. Opting for only one localization file makes it easy to work with the variables and also to see both versions of the data at the same time.

Here is my _data/localization.yml file:

localization'

Next I defined an HTML file for each language. These can be arranged in different ways. Because of relative path values (ie: for css includes) it’s easier to have them at the same directory level. It’s also possible the have them at different levels. This later option let’s us use a structure like http://www.notanactualsitename.com/fr where fr is the language name. The downside is that you’ve got to control the paths with variables.

Here is the English version of my index page (index.html):


layout: default
title: Consulting and Development
language: en
englishActive: class=”active”

{% assign locale = site.data.localization[page.language] %}

{% include main.html %}

And here is the French version (index-fr.html):


layout: default
title: Consultation et développement
language: fr
frenchActive: class=”active”

{% assign locale = site.data.localization[page.language] %}

{% include main.html %}

As you can see, the pages only function is to define a language variable and use it to assign a locale from the collection data.

The page then includes main.html which is where the actual HTML content is.

And here is a sample of main.html (link to original file):

<div class="info">
  <div class="action-box left">
    <h3><i class="fa fa-question fa-3x"></i> {{ locale.action1 }}</h3>
    {{ locale.actiontext1 }}
  </div>
  <div class="action-box right">
    <h3><i class="fa fa-road fa-3x"></i> {{ locale.action2 }}</h3>
    {{ locale.actiontext2 }}
  </div>
  <div class="action-box left last">
    <h3><i class="fa fa-desktop fa-3x"></i> {{ locale.action3 }}</h3>
    {{ locale.actiontext3 }}
  </div>
</div>

This file only contains the html structure of the page and the template instructions. All of the copy material is obtained from the collection which was already set to the correct language in the index page.

It’s not more complicated than that!

 

 

2 thoughts on “Localization with Jekyll

  1. I do not determine the language automatically. In the website where I used this technique, I included a link to switch the language between English and French.

    You could determine the language using information passed by the browser but since this is a static site with no back end you would have to find a way to then redirect the user to the correct site using JavaScript.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s