Navegación Dinámica con Jekyll

Cuando empeće a planear la functionalidad de este blog, queria que la navegación del sitio cambiara de acuerdo al idioma en qual el usuario eliga, ingles o español, con la opción de cambier de un idioma al otro facilmente. Para lograr esa functionalidad, creé la navegación personalizado usando Jekyll, un creador de sitio’s estaticos de web. Dentro de Jekyll’s data files, comúnmente usado para almacenar datos y information para crear sitio’s web con funcionalidad personalizada, pude programar la navegacion bilingüe.

En mi caso, quería dos navegaciones separadas que alterarían de acuerdo con el idioma (page.lang) en la qual el usuario actualmente esta. Así que, para empezar cree navigation.yml interior de _data.

├── _data
│   └── navigation.yml

En navigation.yml he creado dos juegos para la navigacion del sitio- en Inglés (en) y uno en español (es). “Title” es lo que aparecerá en la barra de navegación, con su correspondiente “url ” debajo de él. Una cosa de tener en cuenta aquí- YAML, como el lenguaje Python, es específico acerca de su espacio blanco, así que asegúrese de usar la barra espaciadora en lugar de TAB.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
en:
  posts:
    title: "Posts"
    url: "/index/"
  projects:
    title: "Projects"
    url: "/projects/"
  about:
    title: "About"
    url: "/about/"

es:
  entradas: 
    title: "Entradas"
    url: "/entradas/"
  proyectos:
    title: "Proyectos"
    url: "/proyectos/"
  acerca:
    title: "Acerca De"
    url: "/acerca-de/"

Para completar la funcionalidad dinámica en la navegación, en default.html, bucle mediante navigation.yml de acuerdo a la corriente idioma, determinado por [page.lang]. Este código permite al usuario naveger el resto del sitio en esa misma idioma.

1
2
3
4
5
6
7
8
            
<ul class="nav navbar-nav pull-right">
    {% for menu in site.data.navigation[page.lang] %}
    <li class="list-inline">
        <a href="{{ menu[1].url }}">{{ menu[1].title }}</a>
    </li>
    {% endfor %}
</ul>

También quería la capacidad de pasar de un idioma al otro en la barra de navegación, pero sólo quería que el enlace del idioma contraparte sea visible. Por ejemplo, si el usuario estaba en un puesto de Inglés, no mas el enlace “Español” es visible y lo contrario para un puesto/pagina en Español. Elegí esto por dos razones. En primer lugar, no quería que la barra de navegación este llena de enlaces y segundo es innecesarios, no hay necesidad de vincular a la página en la cual el usuario ya esta en.

Para empezar, en las líneas 1 y 2 tuve que crear el variable para poder recorrer los puestos. El ‘where: “name”’ filtro atraviesa a través de los mensajes para busca de su poste/página contraparte. Despues tuve que “capturar” el idioma de la página. Línea 4 representa la captura que es una etiqueta que captura el texto y lo converte a un variable. A continuación, utilizar ese variable para determinar el resultado de la siguiente declaración if/else. Ese variable pasa por la declaracion if/else, que determina qual enlace mostrar- Inglés o Español. Cuando el idioma ha sido determinado, utilicé un filtroLiquid, línea 7, para sustituir “en” (el variable utilizado para diferenciar entre los dos idiomas) con la palabra “English” y elimine “es” (para Español), ya que el usuario ya está leyendo esa página en Español. Y viceversa en la línea 11, cuando el usuario se encuentra en una página en Inglés.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    {% assign posts=site.posts | where:"name", page.name | sort: 'path' %} 
    {% for post in posts %}
    <li class="lang">
        {% capture language %}{{page.lang}}{% endcapture %} 
        {% if language == "es" %}
            <a href="{{ post.url }}" class="{{ post.lang }}">
                {{ post.lang | where: "post.lang", "en" | replace: "en", "English" | remove: "es" }}
            </a> 
        {% else %}
            <a href="{{ post.url }}" class="{{ post.lang }}">
                {{ post.lang | where: "post.lang", "es" | replace: "es", "Español" | remove: "en" }}
            </a> 
        {% endif %}
    </li>
    {% endfor %}
</ul>

Luego utiliza el mismo formato en las plantillas para proyectos y mensajes.