Jade es un motor de plantillas que simplifica la sintaxis de html, agiliza y facilita el proceso de desarrollo de plantillas html.
Para poder trabajar con Jade, necesitas tener instalado Nodejs y después podrás instalarlo mediante npm. Esto es lo primero que haremos.
Instalación de NodeJS y jade
Instalar Nodejs: Para instalar Nodejs no puede ser más fácil. Tan solo tenemos que entrar en su página de descargas y elegir la versión que queramos para nuestro equipo y sistema operativo. Una vez descargado, tan solo tenemos que ejecutar el instalador y esperar a que finalice la instalación. Actualmente NodeJs ya trae consigo instalado npm, lo que nos facilitará mucho el proceso de instalación.
Instalar jade: Para instalar jade en nuestro equipo, tenemos que abrir una terminal o consola de nuestro sistema operativo. En windows, la puedes abrir buscando la palabra cmd en el cuadro de búsqueda de inicio o bien pulsando ctrl+r y escribiendo cmd. En MacOS busca la terminal y si estás usando Linux, no creo que sea necesario explicarlo.
Una vez abierta la consola, escribimos:
npm install jade --global
Simplificación de las etiquetas html
No necesitas hacer uso de las etiquetas (<tag>) de html. Tan solo poniendo el nombre de la etiqueta y un espacio, jade te genera la apertura y cierre de dicha etiqueta.
Por ejemplo, esta línea de código en jade:
a(href="http://blog.alejandromolero.com", target="_blank") ir al Blog
genera:
<a href="http://blog.alejandromolero.com" target="_blank">ir al Blog</a>
Como ves, abre y cierra la etiqueta automáticamente.
añadir atributos: Para poder añadir los atributos de las etiquetas, como en este caso href y target de la etiqueta a, se ponen entre paréntesis () separados por comas.
Asignar ids y clases: Para asignar ids y clases se puede usar el sistema anterior, pero Jade tiene su propio método. Si conoces Emmet, no deberías tener ningún problema en saber hacerlo:
//- Declaración de un id div#portada //- Declaración de una clase div.wrap //- Declaración de ambos con mas de una clase div#portada.wrap.white
Anidación de elementos mediante indentación
Si quieres anidar un elemento dentro de otro, Jade lo hará por nosotros mediante la indentación (tabulaciones). Ya no tendrás que preocuparte de si has cerrado o no las etiquetas de los elementos anidados. El dejar una etiqueta sin cerrar o mal cerrada dentro de otra, provoca en muchos casos problemas con los estilos CSS y/o de maquetación.
Mejor vemos cómo funciona mediante un ejemplo:
article
h1 Título de la noticia
figure
img(src="image/foto.jpg", alt="primera imagen", title="Primera foto")
figcaption pie de foto
p cuerpo de la noticia
esto generará la siguiente estructura html:
<article>
<h1>Título de la noticia</h1>
<figure><img src="image/foto.jpg" alt="primera imagen" title="Primera foto"/>
<figcaption>pie de foto</figcaption>
</figure>
<p>cuerpo de la noticia</p>
</article>
Comentarios
Jade te permite opciones para insertar comentarios en las plantillas. Puedes elegir si quieres que se muestren o no en el html:
// Comentario que si se mostrará en el html
p foo
p bar
//- comentario que no es mostrará en el html
head
//
Esto es un bloque
de comentarios que si se mostrará en el html
body
//-
Esto es un bloque
de comentarios que no se mostrará en el html
footer
esto genera:
<!-- Comentario que si se mostrará en el html--> <p>foo</p> <p>bar</p> <head></head> <!-- Esto es un bloque de comentarios que si se mostrará en el html --> <body></body> <footer></footer>
Variables, listas y objetos
Jade también cuenta con algo tan básico para cualquier lenguaje de programación como son las variables, las listas (arrays) y objetos.
Para declarar una variable, lista u objeto, hay que poner delante un guión (-). También se puede declarar o concatenar una variable con el valor de otra como se muestra en la declaración de la variable saludo del siguiente ejemplo.
//- Declaración de variables
- var titulo = "Titulo de la página"
- var saludo = "Hola! bienvenido a " + titulo
//- Declaración de una lista
- hijos = ["Lucía", "Rubén", "Laura"]
//- Declaración de un objeto
-
persona =
{
"nombre": "Alejandro",
"pais": "España",
"ciudad": "Madrid"
}
Si intentas compilar esto a html, no se mostrará nada. Una vez declarada la variable, tienes que hacer la llamada a dicho elemento para que sea mostrado. Hay varias maneras de mostrar las variables:
- La etiqueta acompañada del símbolo = (igual). Sin espacios.
- Mediante el uso de la sintaxis #{variable}.
Si usas el primer método y deseas acompañarlo de algún texto, tendrás que usar las comillas y concatenando los elementos con el símbolo +:
h1= variable + ", qué tal estas?"
Se verá mejor en el siguiente ejemplo:
//- Declaración de variables
- var titulo = "Titulo de la página"
- var saludo = "Hola! bienvenido a " + titulo
//- Declaración de una lista
- hijos = ["Lucía", "Rubén", "Laura"]
//- Declaración de un objeto
-
persona =
{
"nombre": "Alejandro",
"pais": "España",
"ciudad": "Madrid"
}
//- Inicio del contenido
section
h1= saludo
p #{persona.nombre} de #{persona.pais}
img(src="image/foto.jpg", alt="foto noticia", title="foto de la noticia")
p Tienes #{hijos.length} hijos
ul
each val, index in hijos
li= index + ': ' + val
En el ejemplo anterior, en la etiqueta <h1> se mostrará ‘Hola! bienvenido a Titulo de la página’.
En la etiqueta <p> se mostrará tanto el nombre como el país de origen de la persona que previamente se ha declarado en el objeto de persona. Para acceder a su valor, hemos usado la sintaxis #{variable}. Esto es válido para los tres tipos de elementos.
Condicionales
Si tienes bloques o partes del html que son condicionales, es decir, que dependen de otro valor, con Jade puedes hacerlo.
- Mediante if: Al igual que en muchos otros lenguajes, en jade puedes hacer uso de if, else if y else.
- var tieneHijos = true
- hijos = ["Lucía", "Rubén", "Laura"]
#persona
if tieneHijos
h2 Description
p.hijos tienes #{hijos.length} hijos!
else if hijos.length > 2
p.muchos Tienes mas de 2 hijos!
else
p.ninguno no tienes hijos!
Resultado:
<div id="persona"> <h2>Description</h2> <p class="hijos">tienes 3 hijos!</p> </div>
- Mediante switch case: Si la condición a evaluar tiene más de un posible valor, debes usar switch case.
- var hijos = 3
case hijos
when 0
p No tienes ningún hijo 🙁
when 1
p tienes un hij@!
when 2
p tienes dos hijos. no está mal!
when 3
p ¿en serio tienes 3 hijos?
default
p Tienes #{hijos} hijos
el resultado es:
<p>¿en serio tienes 3 hijos?</p>
Bucles
Si alguna vez has programado en javascript, php o algún otro lengua de programación, ya conoces los bucles como for, while o each.
Bucles for: Se repite n veces indicadas al declarar dicho bucle:
- var cantidad = 5
p números del 1 al #{cantidad}
ul
- for (var x = 0; x < cantidad; x++)
li #{x+1}
Una vez compilado, se verá asi:
<p>números del 1 al 5</p> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
Bucles while: Se repetirá n veces hasta que se cumpla la condición:
- var n = 5
p números del 5 al 0
ul
while n >= 0
li= n--
El resultado es:
<p>números del 5 al 0</p> <ul> <li>5</li> <li>4</li> <li>3</li> <li>2</li> <li>1</li> <li>0</li> </ul>
bucles each: Recorre n veces según los números de elementos de una lista que se le indique:
- hijos = ["Lucía", "Rubén", "Laura"]
p.nombres Los nombres de tus hijos son:
ul
each hijo,index in hijos
li Tu hijo número #{index} se llama #{hijo}
El código anterior equivale a:
<p class="nombres">Los nombres de tus hijos son:</p> <ul> <li>Tu hijo número 0 se llama Lucía</li> <li>Tu hijo número 1 se llama Rubén</li> <li>Tu hijo número 2 se llama Laura</li> </ul>
Hacer uso de includes
Cuando haces un sitio web, hay muchos elementos que se repiten; como puede ser la cabecera, el menú o el footer. Jade permite hacer uso de include, una función que tienen la mayoría de lenguajes de programación. Incluso Apache permite hacer includes mediante SSI (Server Side Includes]). Hacer un include es. básicamente añadir un fichero dentro de otro.
Tenemos tres ficheros: header.jade, home.jade y footer.jade.
nav
h1 título de menú
ul
li
a(href="enlace") menu 1
li
a(href="enlace") menu 2
li
a(href="enlace") menu 3
section
h1 titulo del sitio
p breve descripcion
img(src="image/foto.jpg", alt="foto noticia", title="foto de la noticia")
footer
nav
h1 Menú del footer
ul
li
a(href="enlace") menu footer 1
li
a(href="enlace") menu footer 2
Para unir todo y generar una única plantilla (index.html), se hace de la siguiente manera:
doctype html
html(lang='es')
head
meta(charset='UTF-8')
title Página home
body
include header.jade
include home.jade
include footer.jade
El código anterior, generará un archivo html con la siguiente estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página home</title>
</head>
<body>
<nav>
<h1>título de menú</h1>
<ul>
<li><a href="enlace">menu 1</a></li>
<li><a href="enlace">menu 2</a></li>
<li><a href="enlace">menu 3</a></li>
</ul>
</nav>
<section>
<h1>titulo del sitio</h1>
<p>breve descripcion</p><img src="image/foto.jpg" alt="foto noticia" title="foto de la noticia">
</section>
<footer>
<nav>
<h1>Menú del footer</h1>
<ul>
<li><a href="enlace">menu footer 1</a></li>
<li><a href="enlace">menu footer 2</a></li>
</ul>
</nav>
</footer>
</body>
</html>
En este post no he explicado el sistema de herencias y los mixins que ofrece Jade. No lo he hecho porque quiero dedicarle un post completo a esta funcionalidad, ya que dicha funcionalidad es la más compleja y a su vez la más potente que ofrece este lenguaje. Una vez creado el post, añadiré el enlace.
Me he saltado algunas funciones, ya que no quería hacer demasiado extenso el post o porque quiero hacer un artículo dedicado a cada uno de ellos.
Otras de las que no he hablado son:
Para aprender lo básico de jade, te recomiendo visitar la página oficialde jade-lang. En su portada podrás realizar pruebas en tiempo real. Para aprender a compilar y crear los archivos html de plantillas .jade, visita el siguiente artículo: Compilar plantillas jade.
Páginas de referencia, ayuda y otros ejemplos
Dejo un listado de enlaces por si necesitas más información, ayuda o más ejemplos:
- Página oficial: Aquí encontrarás toda las referencias sobre el motor, líneas de comandos, API. En home, tiene hasta su propio compilador de jade, donde puedes probar el código online.
- Jade Syntax Documentation: Página donde explica mediante ejemplos cada una de las opciones que ofrece este lenguaje.
- HTML to Jade converter: Interesante herramienta que nos ofrece Aaron Powell para convertir un código html al lenguaje de jade.
- Learnjade.com: Buena página para aprender jade de manera sencilla y por categorías mediante ejemplos editables.
- Npm web: sitio oficial de jade en npm, donde te explica como instalarlo y breves ejemplos de sintaxis y de la API.
Comentarios recientes