Plantillas html con Jade

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

jade-install

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.

You may also like...

Deja un comentario