Introducción a la maquetación con PugJS

Publicado por Adan Garnica en

Introducción a PugJS

PugJS es un Template Engine o Motor de Plantillas.

❓ ¿Qué es un Motor de Plantillas o Template Engine?

Es una tecnología que permite generar toda la estructura HTML para los sitios web, es decir, una forma en la que puedes realizar modificaciones de código HTML más fácil.

Algunos ejemplos de Motor de Plantillas son:

Lo anterior, no quiere decir que sean específicamente de ese Framework o lenguaje, sino que son los más utilizados con los mencionados, y tampoco quiere decir que sean los únicos, existen muchos más.

Primeros pasos 🚶‍♂️

🚩 ¿Cómo instalar PugJS?

🛠️ Paso 1: Instalación NodeJS

De Primera instancias es necesario tener instalado NodeJS, descargas la versión, dependiendo de tu sistema operativo e instalas el paquete.

Para saber si tienes correctamente instalado NodeJS, tienes que abrir la Terminal de línea de comandos, (CMD, PowerShell, Git Bash) y ejecutas lo siguiente.

node -v

o en su caso

node --version

Cualquiera de los dos comandos anteriores te ayudara a visualizar la versión de node que tienes instalada.

👷‍♂️ Paso 2: Instalación de PugJS

Para instalar PugJS, debes de ejecutar la siguiente línea de comando en tu terminal:

npm i -g pug-cli

o en su caso

npm install global pug-cli

🧑‍💼 Paso 3: Crear un archivo PUG

Para crear un archivo Pug, es necesario solo colocar la extensión .pug, por ejemplo index.pug

📝 Paso 4: Escribir el contenido del archivo PUG

¿Cuál es la sintaxis de los archivos PUG?, bueno, en la página oficial tienen varios casos, su link es el siguiente PugJS, este link es para visualizar una sintaxis de texto plano.

En la siguientes líneas se muestra como excribir un Hola Mundo en un archivo Pug y como se muestra el archivo después de compilarlo.

index.pug

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 Document
body 
    h1 Hola Mundo!!!

index.html (Archivo después de la compilación)

<!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>Document</title>
</head>
<body>
    <h1>Hola Mundo!!!</h1>
</body>
</html>

Como te habrás dado cuenta, los archivos .pug son similares a los archivos HTML, la diferencia radica en que, los archivos .pug no son etiquetas como tal, mas bien solo son el nombre de la etiqueta HTML, pero al compilar este archivo, este crea un archivo con el lenguaje HTML.

🧑‍🔧 Paso 5: Compilar Archivo PUG

Existen varios compiladores para el Motor de Plantillas PugJS, pero, ¿para qué quiero compilar el archivo PUG?. Recordemos que Pug es un motor de plantillas, no es la plantilla HTML como la conocemos, así que es necesario compilar el archivo Pug para poder visualizar el contenido en un servidor o por lo menos en un archivo HTML.

Para compilar un archivo Pug a HTML existen los siguientes comandos:

Comando para compilar un solo archivo.

pug nombreDelArchivo 
Ejemplo:
pug index.pug

Comando para estar a la escucha de cualquier cambio que tenga el archivo .pug y compilarlo inmediatamente

pug -w nombreDelArchivo
Ejemplo:
pug -w index.pug

Comando para compilar todos los archivos .pug de un directorio.

pug nombreDelDirectorio
Sintaxis Básica

Sintaxis Básica

🧙 ¿Cómo crear etiquetas HTML en PugJS?

Para crear etiquetas HTML en un archivo .pug solo se pone el nombre de la etiqueta, es decir, si quieres poner una etiqueta de párrafo solo tendrías que poner la p, o si quieres poner una encabezado solo tendrías que poner h1.

Ejemplo:

archivo.pug

h1 Título del encabezado
p Este es un párrafo

Después de compilar el archivo .pug, el resultado será el siguiente.

<h1>Título del encabezado</h1>
<p>Este es un párrafo</p>

🟣 ¿Cómo puedo anidar etiquetas HTML en PugJS?

Para anidar etiquetas o poner una o varias etiquetas dentro de otras, solo tenemos que utilizar la identación o las tabulaciones con un salto de línea. Observa el siguiente ejemplo para que quede más claro.

Ejemplo:

archivo.pug

form
    div         
        p Este es un párrafo
        small Este es un texto pequeño
            b Este es un bold dentro del small

Después de compilar el archivo .pug, el resultado será el siguiente.

<form>
    <div>
        <p>Este es un párrafo</p>
        <small>Este es un texto pequeño<b>Este es un bold dentro del small</b></small>
    </div>
</form>

🟣 ¿Cómo puedo añadir atributos a las etiquetas HTML en PugJS?

Para añadir los atributos de las etiquetas se debe colocar entre paréntesis los valores que requieras, estos se pueden separar por espacios o por comas, por ejemplo:

etiqueta(atributo="valorDelAtributo")

Ejemplo:

Para crear un link:

archivo.pug

a(href="http://www.google.com" target="_blank") Google

Después de compilar el archivo .pug, el resultado será el siguiente.

<a href="http://www.google.com" target="_blank">Google</a>

Ejemplo 2:

archivo.pug

form(method="POST" action="pagina.php")
    input(type="text")
    button(type="submit") Aceptar

Después de compilar el archivo .pug, el resultado será el siguiente.

<form method="POST" action="pagina.php">
    <input type="text" />
    <button type="submit">Aceptar</button>
</form>

🟣 ¿Cómo puedo añadir clases o id's a las etiquetas HTML en PugJS?

Puedes agregar de dos formas las clases y los ids en los archivos .pug:

1. Como si añadieras atributos a la etiqueta

archivo.pug

a(href="http://www.google.com" target="_blank" class="btn btn-primary" id="boton") Google

Después de compilar el archivo .pug, el resultado será el siguiente.

<a href="http://www.google.com" target="_blank" class="btn btn-primary" id="boton">Google</a>

2. Como si fueran estilos CSS.

archivo.pug

a#boton.btn(href="http://www.google.com" target="_blank") Google

Después de compilar el archivo .pug, el resultado será el siguiente.

<a class="btn" id="boton" href="http://www.google.com" target="_blank">Google</a>

🟣 ¿Cómo puedo añadir scripts en el archivo PugJS?

Para poder añadir una hoja de JavaScript, puedes hacer el mismo proceso de las etiquetas con su respectivo atributo o si es necesario tener escrito el codigo JavaScript directamente en la página, solo tienes que especificar el nombre de la etiqueta y después colocar un punto y seguir la regla de la identación/tabulación.

archivo.pug

script(src="js/archivo.js", async, defer,)

script.
    function saludar(nombre){
        alert(Hola ${nombre});
    }

Después de compilar el archivo .pug, el resultado será el siguiente.

<script src="js/archivo.js" async defer></script>
<script>
    function saludar(nombre) {
        alert(Hola $ {nombre});
    }
</script>

🟣 ¿Cómo puedo añadir estilos en el archivo PugJS?

Al igual que los script:

  1. Se puede con el nombre de la etiqueta y sus atributos, esto para agregar una hoja de estilos,
  2. Con la etiqueta style seguido de un punto, puedes escribir todo el código CSS que quieras.
  3. Dentro de las etiquetas con el atributo style, pero este atributo en lugar de ser solo el texto, es necesario pasar un objeto para que la etiqueta tome el valor deseado.⚠️ Si tu estilo utiliza propiedades que el nombre tenga una separación con una línea media, por ejemplo font-size, es necesario encerrar entre comillas esa propiedad, ya que, al enviar un objeto en los atributos, JavaScript no lo interpreta así.

archivo.pug

link(rel="stylesheet", href="style.css")

style.
    .rojo{
        color: red;
    }

a(href="#" style={color:"red", "font-size":"2em"}) Link

Después de compilar el archivo .pug, el resultado será el siguiente.

<link rel="stylesheet" href="style.css" />

<style>
    .rojo {
        color: red;
    }
</style>

<a href="#" style="color:red;font-size:2em;">Link</a>

⭐ TIPs

⚡ Omitir la etiqueta div

Puedes omitir la etiqueta div si esta tiene un ID o una clase, por ejemplo, div.container por .container, pug identificará que esa clase tendrá una etiqueta div.

archivo.pug

.container
    a.link(href="#") Link
#otroDiv
    a.link(href="#") Link

Después de compilar el archivo .pug, el resultado será el siguiente.

<div class="container"><a class="link" href="#">Link</a></div>
<div id="otroDiv"><a class="link" href="#">Link</a></div>

⚡ Anidar sin salto de línea

Puedes anidar una etiqueta dentro de otra colocando dos puntos ":" después de la etiqueta, esto significa que la etiqueta es hija y con esto puedes ahorrarte un salto de linea.

archivo.pug

div.container: a.link(href="#") Link

Después de compilar el archivo .pug, el resultado será el siguiente.

<div class="container"><a class="link" href="#">Link</a></div>

⚠️ Hay que tener cuidado, ya que si, después de esta etiqueta queremos agregar más etiquetas, esta al estar anidando con los dos puntos, agrupará lo que quieras ingresar suponiendo que las demás etiquetas son hijas de la anterior, esto se vé mejor en un ejemplo.

Suponiendo que quieres hacer un menú.

archivo.pug

ul
    li: a.link(href="#") Abrir menú
        ul
            li Opción 1
            li Opción 2
            li Opción 3

Después de compilar el archivo .pug, el resultado será el siguiente.

<ul>
    <li>
        <a class="link" href="#">Abrir menú
            <ul>
                <li>Opción 1</li>
                <li>Opción 2</li>
                <li>Opción 3</li>
            </ul>
        </a>
    </li>
</ul>

⚠️ Cuando compilas el archivo .pug, toda la etiqueta a envuelve a el otro ul, si eso no es lo que quieres, deberás seguir las reglas normales de identación/tabulación.

archivo.pug

ul
    li
      a.link(href="#") Abrir menú
      ul
          li Opción 1
          li Opción 2
          li Opción 3

Después de compilar el archivo .pug, el resultado será el siguiente.

<ul>
    <li>
        <a class="link" href="#">Abrir menú</a>
        <ul>
            <li>Opción 1</li>
            <li>Opción 2</li>
            <li>Opción 3</li>
        </ul>
    </li>
</ul>

⚡ Escribir con salto de línea

Algunas veces necesitaras agregar un salto de línea cuando este maquetando con pug, para esto se utiliza el pipeline (|)

archivo.pug

p Este es un párrafo largo y quiero
    |  un link que redirija a 
    a(href="#") Google

Después de compilar el archivo .pug, el resultado será el siguiente.

<p>Este es un párrafo laro y quiero un link que redirija a <a href="#">Google</a></p>

Así podemos hacer que el código no se vea tan largo y tenga mejor vista.

⚠️ Hay que tener cuidado nuevamente, ya que pug, su regla es la identación/tabulación, si utilizas el pipeline al mismo nivel que tienes la etiqueta, el texto lo pondrá fuera de la etiqueta.

archivo.pug

p Este es un párrafo laro y quiero
|  un link que redirija a 
a(href="#") Google

Después de compilar el archivo .pug, el resultado será el siguiente.

<p>Este es un párrafo laro y quiero</p> un link que redirija a <a href="#">Google</a>

⚡ Escribir etiquetas dentro de un texto largo

Para insertar eiquetas dentro de un texto largo pug facilita el uso de la interpolación con el uso de #[etiqueta contenido]

archivo.pug

p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci laborum ratione sunt cumque repudiandae. #[span Hola Mundo!!] Ea provident atque quis voluptate in #[a(href="#") fugit] corrupti doloribus, impedit incidunt architecto consequuntur earum quae rem.

Después de compilar el archivo .pug, el resultado será el siguiente.

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci laborum ratione sunt cumque repudiandae. <span>Hola Mundo!!</span> Ea provident atque quis voluptate in <a href="#">fugit</a> corrupti doloribus, impedit incidunt architecto consequuntur earum quae rem.</p>

⚜️JavaScript en PUG

Existen 2 formas de insertar código JavaScript, Unbuffered y Buffered.

¿Cuál es la diferencia?

  • Unbuffered: Contenido JavaScript que no se muestra cuando se compila el archivo .pug
  • Buffered: Contenido de JavaScript que se muestra cuando se compila el archivo .pug

Es decir, nosotros podemos tener datos de JavaScript directamente en un archivo .pug y decidir que se uestra o que no, si necesitamos algun resultado, etc.

Para nosotros tener algun dato tenemos que utilizar el guión medio "-", así pug identificara que este es un segmento de JavaScript.

Unbuffered

Ejemplo:

archivo.pug

//Comentario JS que pug lo va a compilar en comentario HTML
- let nombre = tuNombre;
-
    let miObjeto = {
        correo: "email@correo.com",
        telefono: "1122334455"
    }

Después de compilar el archivo .pug, el resultado será el siguiente.

<!--Comentario JS que pug lo va a compilar en comentario HTML-->

Como lo habrás notado, al compilar solo se muestra el comentario del archivo .pug.

Buffered

Literalmente es cuando queremos que pug al compilar muestre la información señalada, para esto se debe poner la etiqueta en donde se quiere asignar el valor, posteriormente el signo de igual y al final el valor.

etiqueta= valor

Ejemplo:

//Comentario JS que pug lo va a compilar en comentario HTML
- const language = "JavaScript";
-
    let miObjeto = {
        correo: "email@correo.com",
        telefono: "1122334455"
    }

p= Hola soy ${language} mi correo es ${miObjeto.correo}

Después de compilar el archivo .pug, el resultado será el siguiente.

<!--Comentario JS que pug lo va a compilar en comentario HTML-->
<p>Hola soy JavaScript mi correo es email@correo.com</p>

Condicionales

☝️ Condicinal if-else

Para tener un condicional if-else, solo lo debemos de indicar, en este caso, no necesitamos ninguna cosa extra, solo indicamos el condicional.

if condicion //puede o no llevar parentesis
    resultado
else
    resultado

Ejemplo:

archivo.pug

//Comentario JS que pug lo va a compilar en comentario HTML
- let esDeDia = true;
if esDeDia
    p Es de día
    p Es de día
else
    p Es de noche
    p Es de noche

Después de compilar el archivo .pug, el resultado será el siguiente.

<!--Comentario JS que pug lo va a compilar en comentario HTML-->
<p>Es de día</p>
<p>Es de día</p>

🔻 Condicinal unless

Este condicional funciona como un if negado (if !valor = unless) Ejemplo:

archivo.pug

//Comentario JS que pug lo va a compilar en comentario HTML
- let esDeDia = false;
unless esDeDia
    p Es de noche

Después de compilar el archivo .pug, el resultado será el siguiente.

<!--Comentario JS que pug lo va a compilar en comentario HTML-->
<p>Es de noche</p>

Ciclos

Se puede utilizar el ciclo de JavaScript como for, pero pug utiliza each para iterar.

Si utilizas for es necesario anteponer el guión medio -, pero con each solo tienes que hacer el llamado y si tu elemento que quieres recorrer no tiene algun valor, puedes agregar un else para comunicar a pug que no tienes algun valor.

Ejemplo:

archivo.pug

- for(let i = 1; i <=5; i++)
    p= i

ul
  each numero in [1,2,3,4,5]
      li= numero
  else
    li No hay valores para mostrar

Después de compilar el archivo .pug, el resultado será el siguiente.

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Categorías: Programación / Desarrollo
Etiquetas:

Adan Garnica

Me gusta ayudar a las personas a desarrollarse para ser mejor cada día, claro si ellas quieren, a fuerza ni los calcetines entran, es por eso que comencé con este sitio, poder compartir algo de la experiencia que me a ayudado a salir adelante y continuar desarrollándome para ser la mejor versión de mí.

1 comentario

Esteban · noviembre 6, 2022 a las 11:38 pm

Excelente instructivo. El mejor que encontré hasta el momento. Elogios para tu deseo de querer ayudar a las demás personas que tienen el afán de aprender.

Responder

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entradas relacionadas

Programación / Desarrollo

Bases Angular

Programación / Desarrollo

The specified deps.json […] does not exist – Solución Alernativa

Hace unos días estuve realizando un curso para ver algunas cosas de la versión de .Net Core 3, al realiza el curso se comentaba que ejecutara el comando “add-migration Initial”, esto para crear las migraciones Leer más…

html
Programación / Desarrollo

¿Qué es Hypertext Markup Language (HTML)?

¿Qué es HTML?, por sus siglas en inglés Hypertext Markup Language (‘Lenguaje de Marcas de Hipertexto’), es el lenguaje estándar para la elaboración de páginas Web, ¿Qué significa eso?, es la forma en la que Leer más…