Martin Nelbren Cuellar

Martin Nelbren Cuellar

Developer
Frontend
Backend
Database
Mobile
CLI
Network
IoT

Teaching

Geek
Full Stack Developer

Hacer Jekyll multilingüe

¿Qué es esto?

Jekyll tiene un unico procesamiento de lenguage. La idea entonces es, modificar el comportamiento habitual, para que que se manejen dos publicaciones, una en un lenguaje (español) y la correspondiente contraparte en el otro lenguaje (ingles). Al igual que las otras paginas, como ser el indice, las etiquetas, etc.

Sitios consultados:

Personalización requerida:

  • Paso I: Sistema de archivos

    1. Organizar las publicaciones en directorios por lenguaje: 
      cd nelbren.github.io
mkdir -p en/_posts/
mkdir -p es/_posts/

      Ejemplo de estructura de directorios en repositorio de está publicación.

  • Paso II: Publicaciones

    1. Mover las publicaciones al directorio del lenguaje primario: 
      mv _post/* es/_post
    2. Copiar las publicaciones del lenguaje primario al secundario. 
      cp es/_post/* en/_post
    3. Hacer la traducción respectiva del contenido de cada publicación. 
      ...
title: Hacer Jekyll multilingüe
                 |
                 v
title: Make Jekyll multilingual
...
    4. Adicionar la metada ref y lang a cada publicación: 
      ...
ref: referencia-unica-compartida-por-la-publicación
lang: lenguaje
...

      Ejemplo en repositorio de está publicación.

  • Paso III: Páginas

    1. Copiar index.html, aboutme.md y tags.html al directorio del lenguaje secundario. 
      cp index.html aboutme.md tags.html es/
    2. Hacer la traducción respectiva del contenido de cada página. 
      ...
title: About me
       |
       v
title: Sobre mi
...
    3. Modificar en el archivo index.html: formato de fecha y enlace 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. Adicionar la metada ref y lang a cada página: 
      ...
ref: referencia-unica-compartida-por-la-página
lang: lenguaje
...

      Ejemplo de páginas en directorio es en repositorio de está publicación.

  • Paso IV: Diseños

    1. Modificar en el archivo _layouts/post.html: enlace tags, anterior y siguiente 
      ...
       <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 %}
...

      Ejemplo de _layouts/post.html en repositorio de está publicación.

    2. Modificar en el archivo _includes/header.html: el formato de fecha: 
      ...
  <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 %}
...

      Ejemplo de _includes/header.html en repositorio de está publicación.

    3. Modificar en el archivo _includes/nav.html: el enlace de la página: 
        ...
   <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>
  ...

      Ejemplo de _includes/nav.html en repositorio de está publicación.

  • Paso V: Configuración

    1. Crear el archivo _data/navigation.yml con el contenido: 
      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

      Ejemplo de _layouts/post.html en repositorio de está publicación.

    2. Modificar en el archivo _config.yml: 
      ...
url: "http://nelbren.github.io"
                |
                v
url: ""                                     
...

      Ejemplo de _config.yml en repositorio de está publicación.

Podrías ver también