Multi Language Setup in Jekyll

How to make Jekyll Multilingual

It’s extremely easy to install multilingual support in Jekyll without any plugin. All credits goes to Sylvain Durand post about making Jekyll multilingual, check it out. Here is my setup:

Setting up multilingual in FrontMatter

Simply add ref as a unique identifier to connect pages or posts with different languages and lang to set language code. Only use the ISO 639-1 format as language code.

---
layout: post
lang: en
ref: sitemap
---

Hreflang

Let’s add hreflang as a HTML link element in the header. This ensures that search engines serve the correct language in the search results. Under “_includes” - add the following code to “head.html”:

<head>
...
{% assign posts=site.posts | where:"ref", page.ref | sort: 'lang' %}
{% for post in posts %}
  <link rel="alternate" hreflang="{{ post.lang }}" href="{{ post.url }}" />
{% endfor %}
{% assign pages=site.pages | where:"ref", page.ref | sort: 'lang' %}
{% for page in pages %}
  <link rel="alternate" hreflang="{{ page.lang }}" href="{{ page.url }}" />
{% endfor %}
...
</head>

Language selector

A must for a multi language is to have a language switcher. Under “_includes” - add the following code to “header.html”:

<nav>
...
{% assign posts=site.posts | where:"ref", page.ref | sort: 'lang' %}
{% for post in posts %}
 <a href="{{ post.url }}">{{ post.lang }}</a>
{% endfor %}

{% assign pages=site.pages | where:"ref", page.ref | sort: 'lang' %}
{% for page in pages %}
 <a href="{{ page.url }}">{{ page.lang }}</a>
{% endfor %}
</nav>
...

Display posts on homepage

First, under “_layouts” - add the following code to “home.html”:

{% assign posts=site.posts | where:"lang", page.lang %}
<div class="post-listing">
{% for post in posts %}
  <a href="{{ post.url | relative_url }}">
	<h1>{{ post.heading | escape }}</h1>
  </a>
{% endfor %}
</div>

Then add ref and lang to “index.md”

---
layout: home
lang: en
ref: index
---

Create new .md files for each language and place in root.

Dela på Facebook