Les comparto estos links de la documentacion de pug para reforzar los conocimientos:
Includes
Block-Extends
Muchas gracias! :)
Gracias
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.
Concuerdo contigo.
de acuerdo
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?
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
Modularizando los componentes:
Landing:
Head:
Header:
Intro:
Contenido:
bro, me encata!!!
Pero que buena idea
Me está costando mucho encontrar motivación para pug ya viniendo de cursos de React.
x2 Tambien desde angular
:O
se empezó a poner medio rabioso pug en esta clase xd
jeje
Lograste entender la diferencia entre extent e include? Uso cualquiera y obtengo el mismo resultado, estoy perdido
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. :/
me paso exactamente lo mismo.
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.
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
Pug se toma en serio lo de espacios o tab.
2 veces que tengo problema por eso.
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 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
Pug es una herramienta potente, y al usar js, se vuelve una herramienta mas potente, porque seria un problema?
el trabajo de un programador es resolver problemas 🙃
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 ...
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.
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!
Hola!
Include duplica código, extend permite extender un template y luego sobrescribir ciertos parámetros.
Puse el block con una indentación de mas y ¡pug! se rompió 😂
se volvió en puag xd
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 PlatziGamesif usuario
a Hola #{usuaio}else a.botonRegistro
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
extendselementos/plantilla.pugblock contenidos
body
header
h1 PlatziGames a.botonRegistro 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.spanLorem 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.botonLeer mas
main.contenido each item in titulos
+caja(item)
¿Cuál es la diferencia?
Con include podemos agregar contenido, con extends contenido, variables, etc
Gracias por el aporte, ya tengo más claro los conceptos de include y extend ✌
Si, al principio es complejo
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.
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
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....
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.
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
Tuve el mismo problemilla
Cómo lo solucionaron, porque justo me ha sucedido lo mismo.
