Sitios multi lenguaje con Jekyll

Jekyll es una poderosa herramienta que permite adaptarla fácilmente a nuestras necesidades.

Transcript

1. Miguel Angel Gordián @ilcapitanozoek Sitios multilenguaje Esta no es una guía desde cero!
2. Generación Generación Desarrollo Extraer información Fragmentar Deployment
3. 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 ➜
4. _config.yml _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/"
5. 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
6. Desarrollo 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.
7. Nativos Manual
8. 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; }
9. Text Liquid 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.
10. Estos producen texto y pueden ser acompañados por filtros. 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 Mantienen la lógica, siendo esta condicional, de asignación, inclusión o iterativa.
11. Front Matters 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.
12. Extracción 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/badg index.html _data/es/index.html
13. Obtener el contenido 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.
14. Nuevos lenguajes 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.
15. Fragmentación 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" %}
16. 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.
17. Deployment Deployment Solo sube a github tu contenido a la rama gh-pages o directamente a master si el nombre del repositorio es de la siguiente forma: {usuario}.github.io git push origin master:gh-pages
18. Recursos Recursos Repositorio de la charla Haml en jekyll Manten tus claves a salvo CI para jekyll Livereload con jekyll Genera tus comandos