Una de las características principales de Express es su capacidad para trabajar con plantillas para la creación de vistas. Esto nos permite crear páginas dinámicas y complejas sin tener que escribir todo el HTML de manera manual. En esta sección, vamos a hablar sobre cómo podemos utilizar plantillas en Express para simplificar la creación de nuestras vistas.

Una de las plantillas más utilizadas en Express es Handlebars. Handlebars es una librería que nos permite crear vistas utilizando un lenguaje de plantillas que se compila en HTML. Para utilizar Handlebars, primero debemos instalarlo a través de npm:

Una vez instalado, podemos configurar Express para utilizar Handlebars como nuestro motor de plantillas. Esto lo hacemos con el siguiente código:

const express = require('express');
const handlebars = require('handlebars');
const exphbs = require('express-handlebars');

const app = express();

// Configuración de Handlebars como motor de plantillas
app.engine('.hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs',
  handlebars: handlebars
}));
app.set('view engine', '.hbs');

En el código anterior, estamos configurando para utilizar Handlebars como nuestro motor de plantillas. También estamos definiendo el archivo como nuestro layout predeterminado. Finalmente, estamos configurando Express para utilizar como la extensión de nuestros archivos de plantilla.

Una vez que hemos configurado Handlebars en nuestra aplicación Express, podemos crear nuestras plantillas usando su lenguaje de plantillas. Un ejemplo sencillo de una plantilla Handlebars sería:

  
  


  
{{heading}}
  
{{text}}

En la plantilla anterior, estamos definiendo tres variables (, y ) que serán remplazadas con el contenido adecuado en tiempo de ejecución.

Para utilizar esta plantilla en nuestras vistas de Express, podemos llamar a la función en nuestro controlador y pasarle los valores necesarios para las variables de la plantilla:

const express = require('express');
const app = express();

// Controlador para la página principal
app.get('/', (req, res) => {
  res.render('index', {
    title: 'Mi Página Principal',
    heading: 'Bienvenido a mi página',
    text: 'Esta es una página de ejemplo con Handlebars'
  });
});

En este ejemplo, estamos utilizando la función para renderizar la plantilla . También estamos pasando un objeto con los valores de las variables , y que se utilizarán en la plantilla.

En resumen, las plantillas son una herramienta muy útil para crear páginas dinámicas y complejas en Express. Handlebars es una de las librerías más utilizadas para trabajar con plantillas en Express, y nos permite crear vistas utilizando un lenguaje de plantillas que se compila en HTML. Para utilizar Handlebars en nuestra aplicación Express, primero debemos instalarlo a través de npm y luego configurarlo como nuestro motor de plantillas. Una vez configurado, podemos crear nuestras plantillas utilizando su lenguaje de plantillas y pasarle los valores necesarios para las variables de la plantilla en tiempo de ejecución.

Anterior…Siguiente

[mwai_chat]