PUG

¿QUÉ ES PUG?
PUG es un motor de plantillas de nodejs, PUG es un lenguaje de
programación orientado a HTML, utiliza un lenguaje de
programación estructurada y una ligera programación orientada
a objetos, PUG ayuda a mejorar y optimizar los tiempos y la
reutilización de código.
PUG comparte con otros lenguajes de programación, las variables
y arreglos, asi mismo las condicionales, bucles, entre otros.
Para declarar una variables utilizaremos el signo “-“, luego la
palabra reservada “let”, seguido del nombre de la variable y su
valor.
- let nombre = 'Leo';
para declarar un arreglo es de la siguiente manera
- let nombres= ['Leo', 'Alisson', 'Andrés', 'Angelica']
Interpolación
La interpolación es poner el valor real de una variable
dentro de alguna etiqueta
- let nombre = ‘Leo’
#{nombre}

Condicionales
If – Else if – Else
Las condicionales se usan en el caso de que queramos que
aparezca un mensaje, se active un mixin o cualquier otra
cosa dependiendo de un valor que asignemos
- let edad = 5
if (edad == 5)
p Tienes 5 años
else if (edad < 5)
p Tienes menos de 5 años
else (edad > 5)
p Tienes más de 5 años
Case
El case funciona de manera similar a los condicionales, pero este
depende de valores específicos, aunque se puede hacer en
cascada para ocupar más case
- let edad = 5
case edad
when 0: p Eres un bebe
when 1: p Tienes un año
default
p Tienes mas de un año
Case en cascada
Case edad
When 0
When 1
When 2: p Tiene menos de 3 años
When 3: p Tienes 3 años
When 4
When 5
When 6: p Tienes más de 3 pero de menos de 6
Default: p Ya eres grande
Iteración
Para iterar entre todos los datos de un array podemos utilizar
‘each’, con esta palabra reservada podemos recorrer
desde la primera a el último elemento de un arreglo.
- let nombres= ['Leo', 'Alisson', 'Andrés', 'Angelica']
each nombre in nombres
p #{nombre}
while
El while no es bucle, el cual tiene una condición, mientras se
cumpla la condición nos mantendremos dentro del bucle, una vez
que la condición se haga falsa entonces saldremos del bucle.
 - Let veces = 5
p cuenta regresiva
While (veces > 0)
p #{veces} segundos
veces=veces-1
Mixin
Un mixin vendría a hacer algo similar a un método, tiene su propia
estructura y su finalidad es la reutilización de código
Mixin listado_de_tareas
Ul: li Estudiar
Ul: li Programar
Ul: li Hacer Ejercicio
Para llamar a un mixin solo tenemos que poner un ‘+’ y el nombre
del mixin
+ listado_de_tareas
También podemos entregarle valores al mixin solo necesitamos
ponerlo en paréntesis, y luego usarlo dentro de su estructura
+ listado_de_tareas(nombre, estado)
Con los mixin se pueden hacer trabajos en bloque, por ejemplo,
podemos configurar un mixin para una sección o un artículo y ese
sería su nombre, cumpliendo papeles específicos dentro de la
página web.
Mixin Lista
Este mixin puede recibir un sin número de elementos, siendo que
podemos entregarle 3 o 1000 elementos, los que necesitemos
específicamente, para esto utilizamos los puntos suspensivos y el
nombre de un ítem
+ listado_de_tareas(nombre, …ítem)
Include
Sirve para llamar a otro documeto para poder utilizar, sus
mixin, array, configuraciones.
Include ../pug/block/rufian.pug
Extends
Se utiliza de la misma manera que include pero este sirve
para aplicar toda la estructura de un documento, a otro
documento hijo, se utiliza de la siguiente manera.
 extends ../pug/template/template.pug
block, appen y prepend
un block es una parte del documento la ual pued
modificarse a través de un appen que modifica los valores
de las variables al final del bloque y un prepend que los
modifica al comienzo