Includes y Extends

Clase 15 de 42 • Curso de Preprocesadores CSS

Resumen

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

Los includes sirven para incluir un archivo de extensión *.pug dentro de otro.

Los extends te permiten adicionar bloques de código a una página.

Sneider Sanchez

student•

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

Includes Block-Extends

Addi Alberto Salazar Espinosa

student•

Muchas gracias! :)

Maricruz Pizaña Solano

student•

Gracias

Jhon Alexander Romero Gonzaga

student•

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.

Maricruz Pizaña Solano

student•

Concuerdo contigo.

Bernardo Aguayo Ortega

student•

de acuerdo

David Behar

student•

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?

Simón Arenas

student•

Creo depende de cómo te acomodes mejor, hay un plugin para transformar pug a react https://github.com/pugjs/babel-plugin-transform-react-pug

David Behar

student•

Sí, pero qué chiste, react es increíble por su sintaxis, creo que estamos automatizando por donde no se necesita. . Igual para plain html, pug está cool

John Edward León Muñoz

student•

Modularizando los componentes:

Landing:

Head:

Header:

Intro:

Contenido:

Bernardo Aguayo Ortega

student•

bro, me encata!!!

Daniel Flores

student•

Pero que buena idea

Alejo Vera

student•

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

Alejandro Sebastian Dubon Estrada

student•

x2 Tambien desde angular

Addi Alberto Salazar Espinosa

student•

Alberto Castro Flores

student•

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

Luis Felipe Medina Rodriguez

student•

jeje

Rodrigo Arturo Vergara Gonzalez

student•

Lograste entender la diferencia entre extent e include? Uso cualquiera y obtengo el mismo resultado, estoy perdido

Iris Valentina Barrios

student•

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

Cristian Córdova

student•

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. :/

jose ortiz

student•

me paso exactamente lo mismo.

Fadith Enrique Escorcia Mujica

student•

Parece que es un problema al copiar y pegar. Intenten "re identar todo. A mi funciono, solo borren todo lo identado y vuelvan a hacerlo con solo tab o espacios.

Daniel Alejandro Romero

student•

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

Danilo Fernandez

student•

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

Yorman Eduardo Amaro Carrero

student•

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

Mateo Flores

student•

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

Irving Juárez

student•

Pug es una herramienta potente, y al usar js, se vuelve una herramienta mas potente, porque seria un problema?

Daniel Alejandro Romero

student•

el trabajo de un programador es resolver problemas 🙃

Juan Sebastián Poveda Florez

student•

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 ...

Carlos Lefin Henriquez

student•

Hay veces que no necesitas sobrecargar tu pagina web con tantos componentes como las de Vue.js. Cuando planeas tener simplemente algo mas ligero y rapido. Pug puede ser mejor opcion.

Andres Alvarez Becerra

student•

Me podrían ayudar? NO vi diferencia alguna ente el include head.pug que el profe hace, y el extend componentes/plantilla.pug, porque aun así se sigue agregando código después de cada uno. Gracias!

Héctor Eduardo López Carballo

student•

Hola!

Include duplica código, extend permite extender un template y luego sobrescribir ciertos parámetros.

Cristian Flores Méndez

student•

Puse el block con una indentación de mas y ¡pug! se rompió 😂

César Palma

student•

se volvió en puag xd

Iván Del Campo

student•

La verdad que pasaría de este preprocesador ya que puedes tener demasiados problemas con las tabulaciones y los espacios...

Irving Juárez

student•

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

Kevin Andres Curruchich Xocop

student•

Gracias por el aporte, ya tengo más claro los conceptos de include y extend ✌

Irving Juárez

student•

Si, al principio es complejo

Ivan Francisco Barco Perez

student•

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.

Cristian Emanuel Collazo

student•

Yo logre compilar con node.js, tienes que ir hasta el directorio del proyecto y poner : pug -w --pretty archivo.pug = compila un HTML identado

Comparte tu error, tal vez tengas un problema con el uso de espacio al mismo tiempo que tabulación. A mi me sucede todo el tiempo en VisualStudioCode, tengo que estar seleccionando la identacion Tab Size: 2 para que no me de error, por que cada dia que comienzo de cero se vuelve a poner en Tab Size 4 y me rompe todo jaja

Francisco Rodríguez

student•

No entiendo por qué partir el código de esa manera. Entiendo lo que se hizo del head, pero no sería mas organizado hacer un solo archivo para variables y mixins y otro para el header....

David Antonio Garcia Saaib

student•

Mediante crece el proyecto va a ser más difícil consultar lo que estás buscando. Por eso se hace así, porque si de repente quieres agregar un mixin vas directo al archivo de mixins.

Jared Esaú Ortega Ramírez

student•

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

Maricruz Pizaña Solano

student•

Tuve el mismo problemilla

tiken .

student•

Cómo lo solucionaron, porque justo me ha sucedido lo mismo.