The paradox of choice (TED) left me without a working website for years…

In a new attempt to finally have and keep a personal website I’m trying Jekyll.

Bilingual Jekyll

Despite I have tried to “keep it simple” I was in need of a website with support for English and Spanish, so I tried some plugins, some were too complex and other were obsolete.

I then tried to have both languages working without plugins, is possible but you lose the pagination.

Here I will share some of the tricks I’m using on liquid (templating language) and a link to the pagination plugin I wrote to have pagination for multiple languages with category support.

Add the language to any page/post

This is the way of knowing the “current language”, it will be used to filter the pages/posts on menus and lists.

---
layout: page
title: Some page
language: en
---
Phasellus gravida semper nisi. Nunc nonummy metus.

Filter pages to build a menu

Because all pages will have the previously added language, you can then loop over the pages and create a dynamic menu.

<!-- get the pages (no the posts) -->
{% assign pages_list = site.pages %}

<!-- loop over the pages -->
{% for node in pages_list %}
  <!-- only add the pages that are using the "page" layout  -->
  {% if node.layout == "page" %}
    <!-- only include a link to the page if the language matches the language of the current page -->
    {% if node.language == page.language %}
      <a href="{{ node.url }}">
        {{ node.title }}
      </a>
    {% endif %}
  {% endif %}
{% endfor %}

Add links between translated posts/pages

Some times you will have pages/posts written in both languages, and is good to have a link between the two versions.

The trick I’m using (of course I saw this around), is to have the link to the translated post as a tag and use it when available.

Example 2016-03-01-here_we_go_again.md

---
layout: post
title: Here we go again
permalink: /entries/here_we_go_again.html
translated: /entradas/aqui_vamos_de_nuevo.html
language: en
---
English version...

Example post 2016-03-01-aqui_vamos_de_nuevo.md

---
layout: post
title: Aquí vamos de nuevo
permalink: /entradas/aqui_vamos_de_nuevo.html
translated: /entries/here_we_go_again.html
language: es
---
Version en Español...

As you can see, both articles contains a translated tag pointing to the other one.

You can then add a little piece of liquid code to show the link when is available.

{% if page.translated %}
	{% if page.language == 'es' %}
		<a href="{{ page.translated }}">Read in English</a>
	{% else %}
		<a href="{{ page.translated }}">Ver en Español</a>
	{% endif %}
{% endif %}

Filtering posts by language

For the home page were I want to show some items I’m filtering the languages with something like this:

---
layout: default
title: Entries
language: en
---
{% assign posts = site.posts | where: "language", page.language %}
<ul>
{% for post in posts limit:3 %}
  <Ol>{{ post.title }}</ol>
{% endfor %}
</ul>

Pagination

For some hours I was obsessed to find a way to do the pagination without using a plugin, silly me..

Only when accepted how Jekyll works, I took the decision to give a try to ruby and write a plugin. And you should do the same :)

Feel free to fork mine and play around:

GitHub: Jekyll Language and categories pagination

conclusion

This looks promising, maybe I will finally have an updated website.

Exporting the website into plain html and the use of Markdown are a big thing, I totally understand why this became so popular among developers but I would not use it for end clients that require direct control over their content of course.

I’m trying stackedit.io to write the Markdown, works offline and you can manage multiple documents. Good stuff