Includes y Extends

Les comparto estos links de la documentacion de pug para reforzar los conocimientos:

Includes
Block-Extends

PUG está muy cool, pero no siento que valga la pena utilizarlo con React porque empezarías a utilizar 2 sintaxis diferentes, o qué opinan?

Creo que al momento de hacer una pagina estatica o maquetar tu diseño esta muy bueno utilizar pug para algo rápido. Pero si ya se sabe utilizar Javascript o algun framework seria un poco raro utilizar pug.

Modularizando los componentes:

Landing:

Head:

Header:

Intro:

Contenido:

Me está costando mucho encontrar motivación para pug ya viniendo de cursos de React.

se empezó a poner medio rabioso pug en esta clase xd

La diferencia entre el include y el extend
Include: Te pone todo como estaba
Extend: Permite agregar código adicional.

Que extraño a mi Prepos me estaba dando error de identación. A pesar de que estaba usando solo TABS.
Puse el

block contenidos

del fichero plantilla.pug sin ninguna identación y ya me dio “Compilation Successful” por lo que no sé si realmente eso debe ir identado como dice el profesor o no. 😕

Yo creo que esta bien pug pero la verdad siento que se pierde la magia con tantos atajos para simplificar, particularmente me gusta mas HTML puro toda su indentacion todo bien ordenado. Creo que varios opinamos lo mismo

Pug se toma en serio lo de espacios o tab.
2 veces que tengo problema por eso.

en esta clase me fue mal con los includes y los extend, yo compilo con pug por medio de la terminal por que con prepros me fue imposible poder instalarlo. y pues basicamente estar dividiendo el codigo en carpetas es una buena idea pero el compilador de terminal, no me compila el codigo, haciendo que pierda tiempo intentando ver cual es la solucion y no llegando a nada, frustante eso.

Lo que veo es que si hago un cambio en la plantilla por ejemplo cambiar el nombre de la variable usuario, no se cambia el index no se ven los cambios, si no que tienes que actualizar el index

Include VS Extend

• include: le dice a pug - Agrega TODO el código dentro de las etiquetas del include
• extend: le dice a pug - Agrega este código, PERO si llegas a detectar otra etiqueta al mismo nivel del extend RESPETALA y no la cambies de posición

Esta bueno aprender pero que pereza estudiar pug cuando uno ya sabe un framework

Pug es una herramienta potente para una pagina a puro html y css pero si ya ocupas JavaScript se convierte mas en un problema a mi parecer

Include & Extends en pug

Si ya llevas tiempo usando html, y sobre todo en proyectos grandes, entonces lo mas seguro es que ya sabras que cosas como el header, el footer y otras meta tags se repiten en cada archivo html. Para evitar que lo copies y lo pegues todo, pug creo el include y extends.
.
Include funciona incluyendo un bloque de codigo que siempre utilizamos en nuestros archivos html, tales como el <header> o el <footer>. Aqui un ejemplo de como podemos utilizarlo:
.
Archivo ubicado en elementos/header.pug

header
  h2 PlatziGames
  if usuario
    a Hola #{usuaio}
  else
    a.boton Registro

Archivo principal

html
  body
    include elementos/header.pug
    // El contenido de la pagina

.
Extends funciona de manera similar, la principal diferencia es que tenemos que especificarle que habrá mas contenido debajo. Aquí un ejemplo:
.
Archivo ubicado en elementos/plantilla.pug

-var titulo = "Titulo principal"
-var titulos = ["Titulo secundario 1", "Titulo secundario 2", "Titulo secundario 3"]
mixin caja(title)
    .caja 
        .caja__imagen: img(src="./images/imagen.png")
        .caja__contenido 
            h3 #{title}
            p Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi nobis, officiis voluptatibus repellat maiores beatae velit

html(lang="en")
    include head.pug
    block contenidos

.
Archivo principal

extends elementos/plantilla.pug
block contenidos
    body 
        header 
            h1 PlatziGames 
            a.boton Registro
        section.intro
            .intro__imagen: img(src="./images/imagen.png")
            .intro__contenido
                h2 #{titulo}
                p Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi nobis, officiis voluptatibus repellat maiores beatae velit dignissimos blanditiis corporis nesciunt est laboriosam eum voluptatum perferendis aspernatur earum. Magnam, commodi repudiandae.
                    span Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore minus non sequi error explicabo sapiente magnam iusto delectus debitis amet commodi maxime accusamus corrupti nemo nihil distinctio cumque, asperiores necessitatibus.
                a.boton Leer mas
        main.contenido
            each item in titulos
                +caja(item)

¿Cuál es la diferencia?

Con include podemos agregar contenido, con extends contenido, variables, etc

Ok puede ser difícil entender a la primera la diferencia entre extend e include

• Usamos el include para importar archivos que no vamos a cambiar y queremos importar en nuestro archivo principal. include no funciona si no se le agrega contenido

• Por otra parte el extend puede hacer lo mismo pero también se le agrega contenido que se usará posteriormente usando el block al mismo nivel del header, a partir del block se le agregan contenidos.
  Una vez que ya tenemos el extend puesto en nuestro archivo principal. Le especificamos que pedazo de plantilla queremos exportar, usamos el block y su nombre

_

La verdad que PUG entiende bien la diferencia entre el espacio y el TAB jajaj en las anteriores clases se me hizo lio en el código por estar acostumbrado a usar los dos a la misma vez.

vengo de Vue.js (mas específicamente de Nuxt js) y realmente no veo una utilidad real a pug, puede que con paginas que empleen mas código vanila sin frameworks ,o frameworks que exijan la elaboración del html como tal no se …

Cree una carpeta llamada components con el head y el header, dentro del header hice un include a …/tools/mixins.pug
Me parece buena practica abstraer un poco la logica de la vista.

Me recuerda a blade de Laravel 😃

Me gusta bastante lo agil y poderoso que es (en mi humilde opinion), la forma en como con conocimientos de otras cosas puedes generar mas rapido tus proyectos 😃

En general puedo decir que en el archivo padre:

• include incluye textualmente lo que tenga en el archivo ruteado
• block incluye un bloque de etiquetas nombradas en otro archivo

En el archivo hijo

• extends enruta al alrchivo padre que contiene los bloques
• block componente es el bloque donde se define el contenido y el nombre

PUG funciona como un generador de plantillas, dos de sus principales características para lograrlo son Includes y Extends.

Includes sirven para incluir un archivo de extensión *.pug dentro de otro.
html
include head.pug

Extends te permiten adicionar bloques de código a una página.
extend componentes/plantilla.pug
block contenidos

Se usan para definir una plantilla(template), partes de la página que sabemos que nunca va a cambiar. Donde para generar nuevas páginas solo cambiaremos una parte de la plantilla.

• • <h4>Include</h4>

Permite insertar el contenido de un archivo Pug en otro.
Crearemos nuestra plantilla (template), donde incluiremos con include, por ejemplo; los archivos que contienen el head, header y footer.

doctype html
html
    include ../components/head.pug
    body
        include ../components/header.pug

• • <h4>Block y Extends</h4>

Una vez que ya tenemos los componentes modularizados e incluidos en el template, ahora hay que definir que parte del template será dinámica, esto significa que esta parte sera realizada en otro documento el cual heredará el template y agregará contenido. Por ejemplo la etiqueta main.

La plantilla (template)

html
    include ../components/head.pug
    body
        include ../components/header.pug
        block main
        include ../components/footer.pug

La página a realizar hereda toda la información del template con extends y agrega contenido con block, (no se puede agregar contenido luego de un extends si no es con block o mixins).

extends ../templates/template.pug

block main
    main(class="main")
        article(class="main__article")
            h2(class="main__article-title")= title
            p(class="main__article-text")= text

Esto hace mucho más reutilizable el código!

Estoy teniendo problemas con el extends 😦

sera porque esta en otro directorio ???

Asi esta el tree
Componentes / content.pug
template.pug

TEMPLATE:

include Configurations/config.pug
doctype html
head
    meta(charset="UTF-8")
    link(rel="stylesheet",href='css/style.css')
html
    include Components/navbar.pug
    include Components/hero.pug
    block contenidos
    include Components/footer.pug

    

content.pug

extends template.pug
block contenidos
 section.content
        +rigthBox("decor/decor.jpg","decor/decor1.jpg","decor/decor4.jpg","decor/decor3.jpg","decor")
        +leftBox("kitchen/kitchen.jpg","kitchen/kitchen1.jpg","kitchen/kitchen2.jpg","kitchen/kitchen3.jpg","kitchen")
        +rigthBox("bedroom/bedroom1.jpg","bedroom/bedroom2.jpg","bedroom/bedroom3.jpg","bedroom/bedroom4.jpg","bedroom")
        

Includes es un copia y pegar y
extends en una forma de vinculas archivos si cambias el original cambias también el archivo donde lo vinculaste

Tuve varios problemas de que decía que la identación estaba mal. No se que hice pero quedo!
Pero el profesor usa la palabra reservada ‘extend’ y en realidad es ‘extends’. Exito!

Uso de Block

Block permite establecer un límite hasta donde se expandirá el documento tanto en la plantilla como en el landing.

Entonces, este elemento lo usaremos al final de nuestro documento que creamos como plantilla para decirle que a partir de ahí crecerá el código

Ejemplo:
block nombreBlock

block contenidos

Por otra parte, haremos uso de extend

Extend
Te permite agregar código adicional.

1. vas al landing y agregas el extend

extend componentes/plantilla.pug

1. Le agregas un Block para establecer límites, el que había sido creado previamente:

block contenidos

Uso de Include

Lo que necesitas hacer es:

1. Definir cuáles van a ser las partes fijas en tu plantilla.

head
		meta(charset="UFT-8")
		link(rel="stylesheet", href="css/ejercicio-pug.css")

1. tomas el contenido del head y lo guardas en un archivo en una carpeta dedicada para la plantilla, en este caso la llamaremos componentes, guardamos el archivo .pug y vamos al landing

2. agregamos el código

ejemplo:

include “direccion dónde esta el head”

include componentes/head.pug

Chicos tengan mucho cuidado con los espacios, recuerden fijarse muy bien que esten utilizando tabs y que no hayn espacios y fijense bien que en la ultima linea siempre sea codigo,saca error cuando la utlima linea queda un espacio o algo asi.

15. Includes y Extends:

Interesante la clase por el potencial de modularizar la página, les comparto el código que llevamos hasta el momento:

landing.pug

extend componentes/plantilla.pug
block contenidos
        section.intro
            .intro__imagen: img(src="../images/imagen.png")
            .intro__contenido
                h2 #{titulos[0]}
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quos veritatis eligendi? Ex maiores rerum exercitationem consectetur, porro eaque culpa quisquam labore
                 span debitis ab esse doloremque, dolor odio unde tempora.
                a.boton Leer más
        ul
            each titulo in titulos
                li=titulo
        main.contenido
            +caja('imagen.png',titulos[1],'Lorem ipsum dolor sit amet')
            +caja('imagen.png',titulos[2],'Lorem ipsum dolor sit amet')
            +caja('imagen.png',titulos[3],'Lorem ipsum dolor sit amet')

head.pug

head
    meta(charset="UTF-8")
    link(rel="stylesheet", href="../css/ejercicio-pug.css")

plantilla.pug

-var titulo = "Titulo Principal";
-var titulos = ["Título Principal", "Subtítulo 1", "Subtítulo 2", "Subtítulo 3"];
//-var usuario = "David";
mixin caja(imagen, titulo, contenido)
    .caja
        .caja__imagen: img(src="../images/"+imagen)
        .caja__contenido
            h3=titulo
            p=contenido
        a.buton Leer Mas
doctype html
html
    include head.pug
    body
        header
            h1 PlatziGames
            if usuario
                a Hola #{usuario}
            else
                a.boton Registro
        block contenidos

En Windows Alt+z para visualizar todo el código sin hacer scroll horizontal

Me recuerda PHP pero aquí es mucho más directo y fácil

Me lleve un buen rato con esta clase, tuve el siguiente problema:
Uso terminal para compilar, no me servian correctamente los extends e includes y era por tema de espacio/tab en el copiado.
Me pasaba que con el archivo head.pug de la clase le tenia un espacio por tab al momento de copiar el codigo:

Y me salía este error u otro que me decía que la ruta tenia que usar “he basedir option is required to use includes and extends with absolute paths” :

La forma de que todo saliera bien es quitando ese tab de cualquier archivo en el que se use extends o includes y todo se arregla

Esto me traía problemas al usar include en plantilla.pug, y como este estaba mal cuando usaba extends en landing,pug tambien me daba error.

Ya puedo ser feliz

Se parece mucho al Django Template Language. O ese a Png. Cualquiera de los dos xD.

Muy interesante! 😄

Documentación de PUG con respecto al block

¿Se puede usar Pug en frameworks como Angular?

el include incluye código, el extend permite adicionar código

Me recuerda a como mi marido me hizo el back-end en mi blog con django. Ahora le puedo decir que más o menos lo entiendo:)😃

esto es igual a php include

Como queeee…! se parece a como django maneja los templates.

Una observacion al usar la palabra reservada realmente es extends y no sin la s. De igual manera prepos no arroja error pero es Bueno aclarar el uso de esta plabra.

me perdí un poquito, pero volvi a ver el video como tres veces y entendí 😄

Muuuuy bueno, genial

Pienso que faltó el header.pug

Increible

Cuando escribes includes con la s al final no funciona… se van los estilos… solo funciona sin la s , include.

Muy efectivo el uso de los Includes y extends.

Creo que falto poner el _ antes en el nombre de los archivos a los que hicimos include y extend. Porque Prepros compila esos archivos en archivos HTML aparte además de ponerlos en el landing.

Funciona así para Sass, Less, Stylus y tras probar también con Pug.

extend para adicionar más código
include para colocar el código tal como esta

Las diferencias que encontré fueron que el include sirve para añadir un pedazo de código, así sin más. El extend también sirve para traer pedazos de código a diferencia que en este se tienen en cuenta las variables y además de esto se usa una palabra reservada “block” para definir en donde y en que nivel se va a usar esa plantilla. Si estoy en lo incorrecto agradecería que me corrigieran o añadieran que más serviría, gracias comunidad 💚💚💚

recordando pug!!

INCLUDE
In include significa añadir el contenido de un archivo en otro, supongamos que en una carpeta aparte llamada includes y dentro de ella tenemos un archivo llamado menú.pug y en dicho archivo escribimos la estructura del menú.
Para añadirlo en nuestro archivo landing.pug agregaremos la linea include con la ruta de nuestro menú.

También podemos agregar archivos que no son .pug pero los añadiría como texto plano

INCLUDE
In include significa añadir el contenido de un archivo en otro, supongamos que en una carpeta aparte llamada includes y dentro de ella tenemos un archivo llamado menú.pug y en dicho archivo escribimos la estructura del menú.
Para añadirlo en nuestro archivo landing.pug agregaremos la linea include con la ruta de nuestro menú.
También podemos agregar archivos que no son .pug pero los añadiría como texto plano

Estuvo interesante, pero se me hace un poco complicado actualizar la principal para que los cambios se reflejen, en fin. La clase estuvo excelente.

excelente, me esta gustando pug, creo que puedo empesar a meterlo en mis proyectos

Buen dato lo de reutilizar pero no se todavía hasta donde puede llegar a ser tan útil pug, seguiremos aprendiendo

se ve super interesante

m

ERROR, SOLO ESTA PERMITIDO USAR ESPACIOS O TABS
Si te sale este error en esta clase es porque al copiar y pegar código de una a otra pestaña de VS se modifica el tipo de indotación.

Como te puedes dar cuenta si se ha modificado tu tipo de indotación? mira si los puntitos plomos que separan la indotación son iguales o de diferente tipo.

SOLUCIÓN

Selecciona todas las líneas e indentalas nuevamente con la combinación de teclas Shift+? i Shift +¿ (Según sea el caso)