Martin Nelbren Cuellar

Martin Nelbren Cuellar

Developer
Frontend
Backend
Database
Mobile
CLI
Network
IoT

Teaching

Geek
Full Stack Developer

Make Jekyll multilingual

What is this?

Jekyll has a unique language processing. So the idea is, modifying the habitual behavior, so that two publications are handled, one in language (spanish) and the corresponding counterpart in the other language (english). Just as the other pages, as the index, the tags, etc.

Consulted sites:

Customization required:

  • Step I: File System

    1. Organize publications in directories by language: 
      cd nelbren.github.io
mkdir -p en/_posts/
mkdir -p es/_posts/

      Example of structure of directories in repository of this publication.

  • Step II: Publications

    1. Move the publications to the primary language directory: 
      mv _post/* es/_post
    2. Copy the publicationsfrom the primary language to the secondary. 
      cp es/_post/* en/_post
    3. Make the respective translation of the content of each publication. 
      ...
title: Hacer Jekyll multilingüe
                 |
                 v
title: Make Jekyll multilingual
...
    4. Add ref and lang to each publication: 
      ...
ref: unique-reference-shared-by-the-publication
lang: language
...

      Example in repository of this publication.

  • Step III: Pages

    1. Copy index.html, aboutme.md and tags.html to the secondary language directory. 
      cp index.html aboutme.md tags.html es/
    2. Make the respective translation of the content of each page. 
      ...
title: About me
       |
       v
title: Sobre mi
...
    3. Modify the file index.html the format of date and link a tags.html 
      ...
  Posted on {{ post.date | date: "%B %-d, %Y" }}     
                 |
                 v
  Publicado el
  {% assign w = post.date | date: "%-w" %}
  {% case w %}
 {% when '0' %}Domingo
 {% when '1' %}Lunes
 {% when '2' %}Martes
 {% when '3' %}Miercoles
 {% when '4' %}Jueves
 {% when '5' %}Viernes
 {% when '6' %}Sabado
  {% endcase %}
  {% assign m = post.date | date: "%-m" %}
  {{ post.date | date: "%-d" }}
  {% case m %}
 {% when '1' %}Enero
 {% when '2' %}Febrero
 {% when '3' %}Marzo
 {% when '4' %}Abril
 {% when '5' %}Mayo
 {% when '6' %}Junio
 {% when '7' %}Julio
 {% when '8' %}Agosto
 {% when '9' %}Septiembre
 {% when '10' %}Octubre
 {% when '11' %}Noviembre
 {% when '12' %}Diciembre
  {% endcase %}
  del
  {{ post.date | date: "%Y" }}
...
   <a href="{{ site.baseurl }}/tags#{{- tag -}}">{{- tag -}}</a>
                                 |
                                 v
   <a href="{{ site.baseurl }}/es/tags#{{- tag -}}">{{- tag -}}</a>
...
    4. Add metadata ref and lang to each page: 
      ...
ref: unique-reference-shared-by-the-page
lang: language
...

      Example of pages in directory es in repository of this publication.

  • Step IV: Designs

    1. Modify in the file _layouts/post.html: link tags, preview y next 
      ...
       <a href="{{ site.baseurl }}/tags#{{- tag -}}">{{- tag -}}</a>
                                    |
                                    v
       <a href="{{ site.baseurl }}/{% if page.lang == 'es' %}es/{% endif %}tags#{{- tag -}}">{{- tag -}}</a>
...
   <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
                 |
                 v
   {% for post in site.posts %}
     {% if post.lang == page.lang %}
       {% if prev %}
         <a href="{{ post.url }}" data-toggle="tooltip" data-placement="top" title="{{ post.url.title }}">&larr; {% if page.lang == 'en' %} Previous Post {% else %} Publicación Anterior {% endif %}</a>
       {% endif %}
       {% assign prev = false %}
       {% if post.id == page.id %}
         {% assign prev = true %}
       {% endif %}
     {% endif %}
   {% endfor %}
...
   <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
                                 |
                                 v
   {% for post in site.posts reversed %}
     {% if post.lang == page.lang %}
       {% if next %}
         <a href="{{ post.url }}" data-toggle="tooltip" data-placement="top" title="{{post.url.title}}">{% if page.lang == 'en' %} Next Post {% else %} Publicación Siguiente {% endif %} &rarr;</a>
         {% break %}
       {% endif %}
       {% assign next = false %}
       {% if post.id == page.id %}
         {% assign next = true %}
       {% endif %}
     {% endif %}
   {% endfor %}
...

      Example of _layouts/post.html in repository of this publication.

    2. Modify in the file _includes/header.html: the format of date: 
      ...
  <span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
                               |
                               v
 {% if page.lang == 'en' %}
 <span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
 {% else %}
   <span class="post-meta">Publicado el 
   {% assign w = page.date | date: "%-w" %}
   {% case w %}
     {% when '0' %}Domingo
     {% when '1' %}Lunes
     {% when '2' %}Martes
     {% when '3' %}Miercoles
     {% when '4' %}Jueves
     {% when '5' %}Viernes
     {% when '6' %}Sabado
   {% endcase %}
   {% assign m = page.date | date: "%-m" %}
   {{ page.date | date: "%-d" }}
   {% case m %}
     {% when '1' %}Enero
     {% when '2' %}Febrero
     {% when '3' %}Marzo
     {% when '4' %}Abril
     {% when '5' %}Mayo
     {% when '6' %}Junio
     {% when '7' %}Julio
     {% when '8' %}Agosto
     {% when '9' %}Septiembre
     {% when '10' %}Octubre
     {% when '11' %}Noviembre
     {% when '12' %}Diciembre
   {% endcase %}
   del
   {{ page.date | date: "%Y" }}
 </span>
 {% endif %}
...
  <span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>    
                               |
                               v
 {% if page.lang == 'en' %}
 <span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
 {% else %}
 <span class="post-meta">Publicado el 
   {% assign w = page.date | date: "%-w" %}
   {% case w %}
     {% when '0' %}Domingo
     {% when '1' %}Lunes
     {% when '2' %}Martes
     {% when '3' %}Miercoles
     {% when '4' %}Jueves
     {% when '5' %}Viernes
     {% when '6' %}Sabado
   {% endcase %}              
   {% assign m = page.date | date: "%-m" %}
   {{ page.date | date: "%-d" }}
   {% case m %}
     {% when '1' %}Enero
     {% when '2' %}Febrero
     {% when '3' %}Marzo
     {% when '4' %}Abril
     {% when '5' %}Mayo
     {% when '6' %}Junio
     {% when '7' %}Julio
     {% when '8' %}Agosto
     {% when '9' %}Septiembre
     {% when '10' %}Octubre
     {% when '11' %}Noviembre
     {% when '12' %}Diciembre
   {% endcase %}
   del
   {{ page.date | date: "%Y" }}
 </span>
 {% endif %}
...

      Example of _includes/header.html in repository of this publication.

    3. Modify in the file _includes/nav.html: the link of the page: 
        ...
   <a class="navbar-brand" href="{{ site.url }}">{{ site.title }}</a>
                                 |
                                 v
   {% if page.lang == 'en' %}
   <a class="navbar-brand" href="{{ site.url }}/">{{ site.title }}</a>
   {% else %}
   <a class="navbar-brand" href="{{ site.url }}/es">{{ site.title }}</a>
   {% endif %}
  ...
 <ul class="nav navbar-nav navbar-right">
                                 |
                                 v
 <ul class="nav navbar-nav navbar-right">
 {% for item in site.data.navigation.languages %}
   {% if item.language == page.lang %}
     {% for link in item.links %}
       {% if link[1] contains "http" %}
         {% assign url = link[1] %}
       {% else %}
         {% assign url = link[1] | relative_url %}
       {% endif %}

       {% if link[1].first %}
       <li class="navlinks-container">
         <a class="navlinks-parent" href="javascript:void(0)"></a>
         <div class="navlinks-children">
           {% for childlink in link[1] %}
             {% for linkparts in childlink %}
               {% include navbarlink.html link=linkparts %}
             {% endfor %}
           {% endfor %}
         </div>
       </li>
       {% else %}
         <li>
           {% include navbarlink.html link=link %}
         </li>
       {% endif %}
          
     {% endfor %}
   {% endif %}
 {% endfor %}

 <li>
   {% assign pages=site.pages | where: "ref", page.ref %}
   {% assign n_pages=pages | size %}
   {% if n_pages > 0 %}
     {% for page2 in pages %}
       {% if page2.lang != page.lang %}
       <a href="">{% if page2.lang == 'en' %}<i class="fa fa-language" aria-hidden="true"></i> English{% else %}<i class="fa fa-language" aria-hidden="true"></i> Español{% endif %}</a>
       {% break %}
       {% endif %}
     {% endfor %}
   {% else %}
     {% assign posts=site.posts | where: "ref", page.ref %}
     {% for post2 in posts %}
       {% if post2.lang != page.lang %}
         <a href="">{% if post2.lang == 'en' %}<i class="fa fa-language" aria-hidden="true"></i> English{% else %}<i class="fa fa-language" aria-hidden="true"></i> Español{% endif %}</a>
       {% endif %}
     {% endfor %}
   {% endif %}
 </li>
  ...

      Example of _includes/nav.html in repository of this publication.

  • Step V: Configuration

    1. Create the file _data/navigation.yml with the content: 
      languages:
  - language: "en"
 links:
   About me: aboutme
   projects:
     - Nagios Check Status (NCS): en/nagios/2018/05/10/NCS_nagios_check_status
  - language: "es"
 links:
   Sobre mi: es/aboutme
   proyectos:
     - Estado de comprobación de Nagios (NCS): es/nagios/2018/05/10/NCS_nagios_check_status

      Example of _layouts/post.html in repository of this publication.

    2. Modify the file _config.yml: 
      ...
url: "http://nelbren.github.io"
                |
                v
url: ""                                     
...

      Example of _config.yml in repository of this publication.

You may also enjoy