Diccionari.cat
Optimot, consultes lingüístiques

caHome github-jekyll-multilingüe

Crear un blog multilingüe (Github / Jekyll)

Si rellegim la guia d’instal·lació de Jekyll i github-pages que vaig publicar fa uns dies, a la Part3 explicava l’estructura d’aquest blog. Allà hi veureu que dins del directori _posts hi havia totes les entrades del blog. Per aconseguir de manera fàcil un blog on sigui possible seleccionar la llengua desitjada sense haver d’utilitzar plugins adicionals, s’han de fer uns canvis tant d’estructura com de codi.

1- Modificar l’estructura: Dins del directori _posts crearem tantes carpetes com llengües desitgem tal i com podem veure a continuació. Dins de cadascuna, hi posarem els fitxers dels posts en el seu corresponent llenguatge. Com veureu, no és obligatori tenir un post en totes les llengües. En el meu cas, tot està publicat en català i si veig que pot tenir un cert interés global, aleshores preparo una traducció a l’anglès.

.
├── _config.yml
├── _images
|   ├── test1.png
|   └── test2.jpg
├── _includes
|   ├── footer.html
|   ├── header.html
|   └── sidebar.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── ca
|   |    ├── 2016-03-25-HD_tacho_Part1.md
|   |    ├── 2016-04-01-HD_tacho_Part2.md
|   |    ├── 2016-04-15-Els_vehicles.md
|   |    └── ...
|   └── en
|        ├── 2016-03-25-HD_tacho_Part1.md
|        ├── 2016-04-01-HD_tacho_Part2.md
|        ├── 2016-05-04-Capacitors_summary.md
|        └── ...
├── _public
|   └── hyde.css
├── _site
├── blog1.xml
├── README.md
├── 404.html
└── index.html

2- Afegir els tags corresponents: Si heu anat investigant els fitxers dels repositoris de github (repositoris destinats a webs o blogs), haureu vist que a la part superior dels posts, entre gions “- - -“, hi ha unes etiquetes (o tags). Aquesta secció amb tags està escrita en llenguatge YAML, acrònim de “YAML Ain’t Markup Language” (YAML no és un llenguatge de marcatge), i serveix per afegir metadata al fitxer que després ens servirà per aplicar filtres. En el cas d’aquest blog, el tag “lang” podrà tenir el valor de ca (per català) o en (per anglès).

---
type: posts
layout: post
lang: ca
comments: true
title: Tacòmetre Digital per a Harley Davidson Sportster (Part 3 - Harley Davidson i SAE J1850 VPW)
name: HD-tacho-part3
permalink: HD-tacho-part3
category: tacho
keywords: HD, harley, davidson, tachometer, tacho, rpm, J1850, SAE, VPW, especificacions
---

La manera curta i millor d'entendre aquest protocol és llegint aquest document (en anglès). La manera llarga és llegint directament la SAE J1850. De totes maneres, tot seguit resumiré els punts bàsics que s'han d'entendre per a poder programar un codi per rebre i interpretar els missatges de l'ECU motor.
---
type: posts
layout: post
lang: en
comments: true
title: Digital Tachometer for Harley Davidson Sportster (Part 3 - Harley Davidson and SAE J1850 VPW)
name: HD-tacho-part3
permalink: en/HD-tacho-part3
category: ENtacho
keywords: HD, harley, davidson, tachometer, tacho, rpm, J1850, SAE, VPW, specification
---

The best and shortest way to understand this protocol is to read this document. The longest way is to read directly the SAE J1850 documentation. Nevertheless, in this post I will try to summarize the most relevant concepts of this protocol in order to be able to write the proper code to receive and interpret the ECM messages.

3- Filtres: Necessitem incloure com a mínim dos filtres per poder navegar amb comoditat pel blog i canviar de llengua quan volguem.
3.1 - Sidebar: Si us fixeu, a la part superior esquerra just a sobre del títol d’aquest blog (Momex) hi ha l’opció d’escollir el llenguatge. Si només hi ha la possibilitat de català, llavors només tindrem “ca” (també es podria programar per no ensenyar res si només hi ha una opció), si existeix una versió en un altre idioma, per exemple l’anglès, aleshores al costat apareixerà “en”.
Per tant, cada vegada que es carregui la barra lateral (sidebar), mirarem si pel post que estem carregant existeix una versió en un altre idioma. Com? Un dels requisits és que el tag “name” ha de portar el mateix nom en tots els posts que siguin el mateix. Per exemple, a dalt en el punt 2, el tag “name” era “HD-tacho-part3” en totes dues versions, però el tag “lang” era diferent. El següent codi permet generar tants enllaços com llengües diferents hi hagi d’un mateix post.

{% assign posts=site.posts | where:"name", page.name | sort: 'path' %}    <--A
{% for post in posts %}       <--B
   <a href="{{ post.url }}" {% if page.lang == post.lang %} class="{{ post.lang }} active {% endif %} ">{{ post.lang }}</a>  <----C
{% endfor %}

Explicat ràpid:
A. Creem un filtre per obtenir un conjunt anomenat “posts” que contingui tots els posts del nostre web que es diguin igual (where:”name”) que la pàgina que estem carregant (page.name). Adicionalment ho ordena per l’URL.
B. Fem un loop per recorrer tots els post que hi ha dins del conjunt acabat de crear.
C. Creem un enllaç ( <a href=”{{ post.url}}>) per cadascun dels post dins del conjunt “posts”. Adicionalment, amb l’ajuda d’un condicional (if), si la llengua actual correspon a la llengua del post dins de “posts”, ho indicarem negreta. Finalment, el text a clicar serà el contingut del tag “lang”.

3.2 - List: Un altre lloc on importarà el llenguatge seleccionat serà el fitxer “list.html” dins del directori _includes. Aquest fitxer és l’encarregat de crear la llista dels últims posts a la pàgina principal del blog. El contingut d’aquest llistat canviarà en funció de la llengua seleccionada.

{% assign posts=site.posts | where: "lang", page.lang | where:"type", "posts" %}   <--A
  {% for post in posts limit: 8 %}  <--B
  <div class="post">
    <h1 class="post-title">
      <a href="{{ post.url }}">     <--C
        {{ post.title }}            <--D
      </a>
    </h1>
    <span class="post-date">{{ post.date | date_to_string }} </font>   <--G
    </span>
  </div>
  {% endfor %}

Explicat ràpid:
A. Com abans, creem un filtre per obtenir un conjunt anomenat “posts” que contingui tots els posts del nostre web que tinguin el mateix tag “lang” i tinguin el tag “type: posts”
B. Fem un loop per recorrer els post que hi ha dins del conjunt creat al punt A. En aquest cas, limitarem el nombre de post a 8.
C. Creem l’enllaç al post.
D. Creem el text a clicar. Aquest serà el títol del post (post.title). Si us hi fixeu bé, “title” és un altre tag.

keywords: Jekyll, github, github-pages, web, estàtic, Multilingüe