En este clase vamos a ver el uso de las plantillas en Express. Estas plantillas nos servirán para escribir código HTML de forma más rápida, gracias a sus bloques y funciones.
Estas plantillas nos permiten crear páginas web dinámicas, entre las cuales destacan Swig y Jade. Jade es el motor de plantillas que veremos en este curso.
Incluir una plantilla en nuestro proyecto
Hasta ahora, nos hemos limitado a enviar datos con la función res.send al navegador, pero a partir de ahora lo haremos a través de plantillas mucho más poderosas.
Para empezar, vamos a crear una carpeta en el proyecto que se llame ‘Plantillas’ para así tener mejor organizado el proyecto. Crearemos también un archivo dentro que se llame ‘hola_mundo.jade’.
Dentro del archivo que acabamos de crear vamos a crear un bloque de texto H1 donde ponga Hola Mundo. Es importante usar las tabulaciones correctamente en los archivos Jade para que funcione bien.
html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Plantillas Jade body h1 Hola Mundo
Sin embargo, esto simplemente no nos funcionará, sino que tendremos que incluir este fichero dentro de la ruta. Pero antes, tendremos que instalar Jade.
Instalar Jade
Para instalar Jade y poder incluir estas plantillas en nuestro proyecto, tenemos que instalarlo primero. Al igual que con Express, la instalación podemos hacerla con NPM. Para ello, nos situamos sobre la ruta del proyecto y ejecutamos:
npm install jade
Inicializar la plantilla
Una vez tenemos instalado Jade en nuestro proyecto, es hora de incluirlo dentro de la ruta, con el archivo que hemos creado antes. Para ello, crearemos un nuevo js que se llame ‘plantillas.js’ y tendremos el siguiente código, el cual establece como motor de plantillas Jade y lo llama dentro de la ruta:
const express = require('express'); const app = express(); //Establecemos Jade como motor de plantillas app.set('views', './plantillas'); app.set('view engine', 'jade'); app.get('/', function (req, res) { //Llamamos al archivo hola_mundo.jade dentro de la carpeta plantillas res.render('hola_mundo'); }); //Configurar que el servidor escuche el puerto 3000 const server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Ejemplo de aplicación del curso de NodeJS, ExpressJS y MongoDB en el puerto', port); });
Enviar parámetros a la plantilla
A Jade le podemos enviar variables que posteriormente podemos mostrar. La forma sencilla es crear una variable en js, como por ejemplo var titulo = “Curso de UniPython”, y pasarla a la plantilla como parámetro en el render.
Vamos a poner un ejemplo donde pasamos un objeto y una variable, comentemos el código anterior o lo borramos y agregamos el siguiente:
const express = require('express'); const app = express(); app.set('views', './plantillas'); app.set('view engine', 'jade'); app.get('/', function (req, res) { var usuario = { nombre: "Sergio", edad: 18 } var titulo = "Curso de UniPython"; res.render('hola_mundo', {usuario: usuario, titulo: titulo}); }); //Configurar que el servidor escuche el puerto 3000 const server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Ejemplo de aplicación del curso de NodeJS, ExpressJS y MongoDB en el puerto', port); });
Y el archivo hola_mundo.jade quedaría así:
html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Plantillas Jade body h1= titulo p(class='parrafo1 parrafo2' id='idparrafo') El usuario #{usuario.nombre} tiene #{usuario.edad} años
Como vemos en el ejemplo, la variable simple la hemos mostrado con el símbolo “=” después de la etiqueta h1, mientras que el objeto lo hemos mostrado con #{}.
En cuanto a la etiqueta p, le hemos asignado dos clase y un id para enseñar cómo se asignan en Jade. El resultado es el siguiente:
Parciales
Con Jade podemos tener bloques parciales donde alojar nuestro contenido que queremos incluir en varios ficheros. Por ejemplo, imaginemos que tenemos una tienda online y queremos que el menú superior y el footer siempre sean iguales. Por lo tanto, podríamos crear un a layout que contenga esta información e incluirlo en nuestros archivos.
Las palabras clave que utilizaremos será Block y Extends:
Block es simplemente un “bloque” de Jade que puede reemplazarse dentro de una plantilla secundaria. Este proceso es recursivo y pueden proporcionar contenido predeterminado.
Vamos a poner un ejemplo. Creamos un nuevo archivo llamado ‘layout.jade’ donde tendremos toda la información del encabezado y pie, y en hola_mundo.jade dejaremos el contenido central que queremos reemplazar con el uso de block content:
layout.jade:
html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") title #{titulo} block scripts script(src='/jquery.js') link(href='/css/normalize.css', rel='stylesheet') body block content block foot #footer p(class='parrafo1', id='idparrafo') Pie de página
hola_mundo.jade:
extends ./layout.jade block content p Pagina principal
Si ejecutamos este código, veremos que ahora se muestra el encabezado y pie de página, y el contenido dentro de block content ha sido modificado por el que hemos puesto en hola_mundo.jade. También vemos cómo se incluyen scripts tanto de js como de css.