ExpressJS: creación de plantillas

Pug es un motor de plantillas para Express. Los motores de plantillas se utilizan para eliminar el desorden de nuestro código de servidor con HTML, concatenando cadenas de forma salvaje a las plantillas HTML existentes. Pug es un motor de plantillas muy potente que tiene una variedad de características que incluyenfilters, includes, inheritance, interpolation, etc. Hay mucho terreno que cubrir al respecto.

Para usar Pug con Express, necesitamos instalarlo,

npm install --save pug

Ahora que Pug está instalado, configúrelo como el motor de plantillas para su aplicación. usteddon'tnecesita 'requerirlo'. Agregue el siguiente código a suindex.js archivo.

app.set('view engine', 'pug');
app.set('views','./views');

Ahora cree un nuevo directorio llamado vistas. Dentro de eso crea un archivo llamadofirst_view.puge ingrese los siguientes datos en él.

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

Para ejecutar esta página, agregue la siguiente ruta a su aplicación:

app.get('/first_template', function(req, res){
   res.render('first_view');
});

Obtendrá la salida como: Hello World!Pug convierte este marcado de aspecto muy simple a html. No necesitamos hacer un seguimiento del cierre de nuestras etiquetas, no es necesario utilizar palabras clave de identificación y clase, sino utilizar '. y'#'para definirlos. El código anterior primero se convierte en -

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
   
   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Pug es capaz de hacer mucho más que simplificar el marcado HTML.

Características importantes de Pug

Exploremos ahora algunas características importantes de Pug.

Etiquetas simples

Las etiquetas están anidadas según su sangría. Como en el ejemplo anterior,<title> estaba sangrado dentro del <head>etiqueta, por lo que estaba dentro. Pero el<body> etiqueta estaba en la misma sangría, por lo que era un hermano de la <head> etiqueta.

No necesitamos cerrar las etiquetas, tan pronto como Pug encuentra la siguiente etiqueta en el mismo nivel de sangría o en el exterior, cierra la etiqueta por nosotros.

Para poner texto dentro de una etiqueta, tenemos 3 métodos:

Space seperated

h1 Welcome to Pug

Piped text

div
   | To insert multiline text, 
   | You can use the pipe operator.

Block of text

div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

Comentarios

Pug usa la misma sintaxis que JavaScript(//)para crear comentarios. Estos comentarios se convierten en comentarios html (<! - comment ->). Por ejemplo,

//This is a Pug comment

Este comentario se convierte en lo siguiente.

<!--This is a Pug comment-->

Atributos

Para definir atributos, usamos una lista de atributos separados por comas, entre paréntesis. Los atributos de clase e ID tienen representaciones especiales. La siguiente línea de código cubre la definición de atributos, clases e ID para una etiqueta html determinada.

div.container.column.main#division(width = "100", height = "100")

Esta línea de código se convierte a la siguiente. -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

Pasar valores a plantillas

Cuando representamos una plantilla Pug, podemos pasarle un valor de nuestro controlador de ruta, que luego podemos usar en nuestra plantilla. Cree un nuevo controlador de ruta con lo siguiente.

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

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"http://www.tutorialspoint.com"
   });
});

app.listen(3000);

Y cree un nuevo archivo de vista en el directorio de vistas, llamado dynamic.pug, con el siguiente código -

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

Abra localhost: 3000 / dynamic_view en su navegador; Debería obtener el siguiente resultado:

También podemos usar estas variables pasadas dentro del texto. Para insertar variables pasadas entre el texto de una etiqueta, usamos#{variableName}sintaxis. Por ejemplo, en el ejemplo anterior, si quisiéramos poner Saludos desde TutorialsPoint, entonces podríamos haber hecho lo siguiente.

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

Este método de usar valores se llama interpolation. El código anterior mostrará la siguiente salida. -

Condicionales

También podemos usar declaraciones condicionales y construcciones de bucle.

Considere lo siguiente:

Si un usuario ha iniciado sesión, la página debería mostrar "Hi, User" y si no, entonces el "Login/Sign Up"enlace. Para lograr esto, podemos definir una plantilla simple como:

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

Cuando renderizamos esto usando nuestras rutas, podemos pasar un objeto como en el siguiente programa:

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

Recibirás un mensaje - Hi, Ayush. Pero si no pasamos ningún objeto o pasamos uno sin clave de usuario, obtendremos un enlace de registro.

Incluir y componentes

Pug proporciona una forma muy intuitiva de crear componentes para una página web. Por ejemplo, si ve un sitio web de noticias, el encabezado con el logotipo y las categorías siempre es fijo. En lugar de copiar eso en cada vista que creamos, podemos usar laincludecaracterística. El siguiente ejemplo muestra cómo podemos usar esta función:

Cree 3 vistas con el siguiente código:

HEADER.PUG

div.header.
   I'm the header for this website.

CONTENT.PUG

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

FOOTER.PUG

div.footer.
   I'm the footer for this website.

Cree una ruta para esto de la siguiente manera:

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

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

Vaya a localhost: 3000 / components, recibirá el siguiente resultado:

include también se puede utilizar para incluir texto sin formato, CSS y JavaScript.

Hay muchas más características de Pug. Pero esos están fuera del alcance de este tutorial. Puede explorar más a fondo Pug en Pug .