En este artículo, aprenderemos a separar HTML de Handlebars en múltiples archivos/secciones usando Node.js y usándolo en cualquier página que desee. Ayuda a reducir la repetición de código. Por ejemplo, en lugar de agregar la barra de navegación completa en cada página, puede crear una plantilla de esa barra de navegación e importarla a cualquier página que desee. Podemos hacer plantillas y manillares separados usando el módulo EJS. EJS significa Javascript incorporado, es un motor de plantillas utilizado por Node.js. Esto ayuda a crear una plantilla HTML con un código mínimo.
Instale EJS: ubique el directorio de su proyecto raíz en la terminal y escriba el comando
npm install ejs
Establezca EJS como motor de vista: dentro de su archivo de servidor (app.js o server.js), escriba el siguiente código para configurar EJS como el motor de vista predeterminado
app.set('view engine', 'ejs');
Reorganice sus directorios: es necesario cambiar el nombre de su archivo de ‘.html’ a ‘.ejs’ para usar EJS dentro de él. Luego, debe mover cada archivo ‘.ejs’ en el directorio de vistas dentro de su directorio raíz. EJS busca por defecto los archivos ‘.ejs’ dentro de la carpeta de vistas.
Create Handlebars: cree una carpeta dentro de la carpeta de vistas , llamémosla handlebars, dentro de esta carpeta, creemos dos handlebars, el primero es ‘navbar.ejs’ donde escribimos el código de barra de navegación, y el segundo es ‘footer.ejs’ donde escribimos el código de pie de página.
Importar manillares: dentro de sus archivos .ejs actualizados , puede usar manillares en cualquier lugar que desee usando el código
<%- include('handlebars/navbar') %>
Ejemplo: implementemos los pasos anteriores para crear un proyecto simple que use manillares.
Paso 1: cree una carpeta, llamémosla handlebars, ábrala dentro del editor de código y abra la terminal.
Paso 2: Ubique esta carpeta en la terminal y escriba el comando.
npm init -y
Inicializa nuestra aplicación y crea un archivo package.json.
Paso 3 : Instale los módulos Express y EJS dentro del proyecto usando el siguiente comando.
node install express ejs
Paso 4: Cree un archivo ‘app.js’ , dentro de este archivo requiera el módulo express, y cree una ‘aplicación’ constante para crear una instancia del módulo express, luego configure el EJS como el motor de visualización predeterminado.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
Paso 6: cree una carpeta de vistas , dentro de esta carpeta cree el archivo ‘home.ejs’ y una carpeta handlebars, y dentro de esta carpeta handlebars, cree dos archivos, ‘navbar.ejs’ y ‘footer.ejs’ , y escriba algo básico Código HTML dentro de estos archivos.
navbar.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>Navbar</h1>
pie de página.ejs
<h1>Footer</h1> </body> </html>
Paso 7: Dentro del archivo ‘home.ejs’ escriba un código HTML e importe ambos manillares.
<%- include('handlebars/navbar') %>
<h1>Home</h1>
<%- include('handlebars/footer') %>
Paso 7: dentro de ‘app.js’ , cree el método get para representar el archivo ‘ home.ejs’ y el método de escucha para escuchar este proyecto en el puerto 3000 .
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) =>{
res.render('home.ejs');
});
app.listen(3000);
Estructura de carpetas:
Código completo:
app.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) =>{
res.render('home.ejs');
});
app.listen(3000);
home.ejs
<%- include('handlebars/navbar') %>
<h1>Home</h1>
<%- include('handlebars/footer') %>
navber.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Home</title> </head> <body> <h1>Navbar</h1>
footer.ejs
<h1>Footer</h1> </body> </html>
Paso para ejecutar la aplicación : Abra la terminal y escriba el siguiente comando.
node app.js
y abra el navegador, y en la barra de búsqueda escriba
http://localhost:3000/
Producción:
