A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Includes y Extends

15/42
Recursos

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.

Aportes 64

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥淐ompilation 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

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

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

<h3>Include y Extends [15]</h3>

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 鈥榚xtend鈥 y en realidad es 鈥榚xtends鈥. 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 鈥渄ireccion 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 鈥渉e 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 鈥渂lock鈥 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)