Generación

Generación

Crear un directorio con la estructura mínima.

    
    jekyll new --blank jekyll_multilenguaje
 New jekyll site installed in ~/poblano_rails/jekyll_multilenguaje. 

.

├── _drafts

├── index.html
├── _layouts
└── _posts

➜

_config.yml

Archivo donde se sobrescriben las variables por defecto o se agregan nuevas variables globales.

# Site settings
title: Laboratorio de Emprendimiento y Transformación

description: > #
  Una comunidad activa enfocada en idear, construir e implementar
  nuevas soluciones que transformen la vida de las personas a través de
  innovación social y emprendimiento público en sectores clave.

url: "http://let-emprendimientopublico.mx/"

La varibles definidas en este archivo son accedidas a través de site.

Podemos dar variables por defecto a colecciones de archivos.

defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: "default"
      lang: es
  -
    scope:
      path: "it"
    values:
      layout: "default"
      lang: it

Desarrollo

.
├── css
   └── poblano_rails.scss
├── _drafts
├── img
       └── poblano_rails.png
├── index.html
├── js
   └── poblano_rails.js
├── _layouts
└── _posts

Darle estructura, estilos y la interacción al sitio.

Nativos

Manual

Puedes agregar la siguiente opción para activar la compresión del css.

sass: style: :compressed

Si utilizas @includes coloca estos archivos en el directorio _sass

Liquid procesa todos los filtros y tags que coloques en los assets.

---
---
header {
  margin: 0px;
  background-image: url("{{ t.data.index.img }}");
  padding: 80px;
}

Liquid

Liquid es un motor de templates que fue creado con requerimientos bien específicos

Debe ser no-ejecutable y seguro.

Debe de tener un markup simple y  con resultados hermosos.

Debe ser stateless.

Debe ser posible darle estilo tanto a Emails como a HTML.

Estos producen texto y pueden  ser acompañados por filtros.

Mantienen la lógica, siendo esta condicional, de asignación, inclusión o iterativa.

Hello {{name}}          
Hello {{user.name}}
Hello {{ 'tobi' | size }}

{% if user.name == 'tobi' %}
  Hola tobi
{% elsif user.name == 'bob' %}
  Hola bob
{% endif %}

Tags logicos

Tags de texto

Front Matters

Debe ser el primer elemento en el archivo y tiene la estructura de yaml.

---
layout: post
title: Blogging Like a Hacker
---

Todo archivo que lo contenga debera ser procesado por jekyll como una archivo especial.

Extracción

Vamos a extraer contenido y colocarlo en un archivo {nombrearchivo}.yaml en el directorio _data. 

Solo elementos que permitan crear un esqueleto:

• Texto
• Imágenes
• Enlaces
• Clases, muy especiales

<header class="teal lighten-2">
  <div clas="container">
    <div class="row">
      <div class="center-align"><br>
        <img src="{{ t.header.img.src }}" 
             alt="{{ t.header.img.alt }}"/>
        <p class="white-text">
          {{ t.header.text }}</p>
        <a class="white-text btn-large">
          {{ t.header.button }}</a>
      </div>
    </div>
  </div>
</header>

header:
  frase:  >
    Poblano Rails es una comunidad formada 
    por desarrolladores y emprendedores<br>
    fascinados con "Ruby" y con "Ruby on 
    Rails".
  button: Conoce más
  img:
    src: "https://achievement-images.teamtreehouse.com/badges_SimpleFacebook_Stage1.png"
    

index.html

_data/es/index.html

Obtener el contenido

Usamos assign, la cual es una etiqueta lógica que viene con liquid.

Todos los archivos que se encuentren en _data son accedidos mediante site.data

{% assign t = site.data[page.lang].index %}

Podemos obtener el valor de otra varible usando corchetes.

Nuevos lenguajes

Agrega una carpeta por cada lenguaje, nombralas con sus iniciales y copia el archivo dentro de ésta.

Agrega el lenguaje como una variable en las configuraciones del archivo.

---
title: Poblano rails
lang: it
---

Has lo mismo dentro de _data y traduce su contenido.

Fragmentación

Mueve el contenido de index a _layout/index.html

Separa cada sección del layout y colocalas en _includes.

Agrega las secciones con etiquetas includes en el orden que desees o el que diseñaste.

{% include footer.html logo="img/rails.png" %}

Añade documentación acerca de los parámetros y la estructura para cada include.

Esta estructura nos permite reutilización y uniformidad en el sitio.

Puedes acompañar jekyll con gollum para generar la documentación.