A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Interpolaci贸n

11/42
Recursos

En esta clase vemos c贸mo anidar elementos dentro de otros en PUG y c贸mo trabajar con textos de m煤ltiples lineas.

Aportes 51

Preguntas 14

Ordenar por:

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

Si est谩n usando VSCode, recuerden que gracias a Emmet (que viene por defecto) ustedes pueden escribir

Lorem7

Y al darle ENTER les va a poner las 7 primeras palabras del 鈥淟orem Ipsum鈥. Ese n煤mero lo pueden cambiar. 馃槈

Esto no es la interpolaci贸n, la interpolaci贸n es cuando se tienen variables y se le quiere concatenar texto que usualmente ser har铆a as铆

- var user = "Alejandra"; 
h1 "Hola " + user + ", c贸mo estas?"

Se realice de la siguiente forma

h1 Hola #{user}, c贸mo estas?

Por favor no confundan t茅rminos, esta informaci贸n esta en la misma web de Pug.

TRUCAZO

Una de las buenas caracteristicas que tiene visual studio code es que te permite ajustar tu texto, dependiendo del tamano que tengas el editor, esto se hace de la siguiente manera.

Supongamos que tienes abierto el editor:

Solo te tienes que ir a la seccion que dice View y seleccionar Toogle word wrap:

y listo, el texto se ajustara al ancho de tu editor 馃憤馃

No me parece ofrecer muchas ventajas el uso de pug frente al HTML plano de toda la vida.

Apuntes

Para que pug detecte que una etiqueta tiene un hijo debemos tener en
cuenta la tabulaci贸n
div
span

PARA DECLARAR UN DIV SE UTILIZA
div.intro__imagen
O 脷NICAMENTE EL NOMBRE DE LA CLASE
.intro__imagen

Esto aplica cuando el elemento solo tiene un hijo
div.intro__imagen: img(src=鈥渋mages/imagen.png鈥, alt=鈥淚magen Intro鈥)

PARA TEXTOS LARGOS COLOCAR PUNTO(.) DESPU脡S DEL NOMBRE DE LA ETIQUETA
EJEMPLO
p.
Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Sit
nobis pariatur sapiente quod,
laboriosam minus facilis hic,
voluptatum veniam provident,
earum inventore eveniet quis animi
perferendis ad dolor amet tempora.

Otra forma es:
p
| Lorem ipsum dolor sit, amet
| consectetur adipisicing elit. Sit
| nobis pariatur sapiente quod,
| laboriosam minus facilis hic,
| voluptatum veniam provident,
| earum inventore eveniet quis animi
| perferendis ad dolor amet tempora.

es bueno saber eso, aun que en vscode con **alt + z **, hace los mismo en cierto modo.

M谩s informaci贸n para seguir aprendiendo sobre interpolaci贸n { 鈥 } 鈥 }
.

En mi caso no funciono lo del span entonces lo solucione as铆:

#[span y el texto y ya]

Inter鈥

Codigo del cuerpo de la etiqueta p :

| Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
| Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. 
| Proin sit amet tellus nec nisl bibendum ornare nec at augue. 
| Integer semper feugiat varius.

La interpolaci贸n es cuando se tienen variables y se le quiere concatenar texto.

En este caso:

- var titulo= "Las locuras del emperador";
- var director= " Mark Dindal";

h1= titulo
p Dirigido con amor por #{director}

Otra manera de hacerlo incluyendo es en la etiqueta, o Tag Interpolation

p.
  y aqu铆 colocamos un texto interpolado con un atributo:
  #[q(lang="es") 隆Hola Mundo!]

Espero los ayude a complementar, pero no se olviden de lo primero:

La interpolaci贸n es cuando se tienen variables y se le quiere concatenar texto.

una aclaracion acerca de la etiqueta <span>, por si sola no vuelve en NEGRITA los parrafos, lo que pasa es que hay un estilo en el archivo CSS que lo vuelve NEGRITA

.intro__contenido span {
	display: block;
	++font-weight: bold;++
	font-style: italic;
}

驴Que es la interpolacion en pug?

.
Entre las propiedades que pug nos ofrece son:

  • Escribir menos lineas de codigo cuando un elemento solo tiene un hijo. Esto se hace de la siguiente manera: .bloc__element: img(src="./"). Aqui lo que paso es que en vez de bajar una linea, en la misma linea escribirmos a el elemento hijo. Cuando son dos o mas elementos hijos, tenemos que bajar una linea obligatoriamente.
  • Poder ver todo el contenido de un elemento. Esto en pug lo podemos hacer con un ., despues de la etiqueta que va a tener el contenido. Un ejemplo de esto es:
p.
    Lorem ipsu...
    Lorem ipsu...
    Lorem ipsu...
    Lorem ipsu...	

Todo el contenido es visible para nosotros鈥 Esto tambien lo puedes hacer con Ctrl + z en Visual Studio Code

11. Interpolaci贸n:

Concuerdo por el momento con varios compa帽eros, no me termina de convencer Pug, capaz si conozco m谩s caracter铆sticas me termina pareciendo mejor.
Les comparto el c贸digo que hice de la clase en PUG:

doctype html
html
    head
        meta(charset="UTF-8")
        link(rel="stylesheet", href="../css/ejercicio-pug.css")
    body
        header
            h1 PlatziGames
            a.boton Registro
        section.intro
            .intro__imagen: img(src="../images/imagen.png")
            .intro__contenido
                h2 T铆tulo Principal
                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

Yo para evitar usar este s铆mbolo | en VS recurro a
Alt + Z y me ajusta el contenido de mi c贸digo.

me esta gustando mucho este curso!!

doctype html
html
  head
    meta(charset="UFT-8")
    link(rel="stylesheet", href="css/ejercicio-pug.css")
  body
    header
    h1 PlatziGames
    a.boton Registro
  section.intro
    .intro__imagen
      img(src="images/imagen.png")
    .intro__contenido
      h2 Titulo Principal
      p.
        Lorem ipsum dolor sit amet,
        consectetur adipiscing elit,
        Proin ex mi, gravida sit amet
        imperdiet vel, sodales a mi,
        Proin sit amet tellus nec nisl
        bibendum ornare nec at augue.
      span.
        Proin sed urna quis orci interdum 
      a.boton Leer Mas```

En el caso del p谩rrafo utilice Toggle Word Wrap (Alt +Z) y me funcion贸. En este caso se va ajustando autom谩ticamente el ancho del contenido de la etiqueta p. S贸lo te posicionas en el caso en cuesti贸n, presionas Alt + Z y listo.

Me gusto!

VS da la opcion de ajustar el texto con un tipo de toggle. Pero es bueno aprender otras formas.

Apuntes de la clase II

  • elemento p

Para indentar texto de p es necesario usar un punto y bajar la l铆nea como en el siguiente ejercicio:

p.
  Lorem ipsum dolor sit, 
  amet consectetur adipisicing elit. 
   Expedita, dolorum? Ipsa, excepturi! 
   Earum libero dicta iure praesentium. 
   Vel saepe, laboriosam, praesentium dicta,
   totam dolorem officia placeat aut repellat 
   adipisci odit?

Ventajas:
Facilita la lectura del c贸digo.

  • Otra forma es usa | en vez de usar .
p 
  | Lorem ipsum dolor sit, 
  | amet consectetur adipisicing elit. 
  | Expedita, dolorum? Ipsa, excepturi! 
  | Earum libero dicta iure praesentium. 
  | Vel saepe, laboriosam, praesentium dicta,
  | totam dolorem officia placeat aut repellat 
  | adipisci odit?

Ventajas de usar | en vez de .
| te deja anida m谩s elementos en su interior. Adem谩s, usar | indica que todo el texto que est谩 delante de 茅l ser谩 un texto y lo que est谩 debajo ser谩 un elemento.

Ejemplo:

p 
  | Lorem ipsum dolor sit, 
  | amet consectetur adipisicing elit. 
  | Expedita, dolorum? Ipsa, excepturi! 
  | Earum libero dicta iure praesentium. 
  | Vel saepe, laboriosam, praesentium dicta,
  | totam dolorem officia placeat aut repellat 
  | adipisci odit?
  span nuevo texto

Apuntes de la clase

Interpolaci贸n de etiquetas

Ver como pug maneja la anidaci贸n de elementos dentro de otros elementos.

  • Caso: div
section.intro
  div.intro__imagen

El c贸digo anterior es igual a este:

section.intro
  .intro__imagen

驴Por qu茅 sucede esto?

Debido a que .Pug identifica a .intro__imagen como un div, por qu茅 est谩 indentado debajo de un bloque (section) y lleva una clase.

ventajas:
Intrepreta .clase como div.

  • Padre e hijo 煤nico/ padre e hijos.

Se usa para indentar a un 煤nico elemento hijo dentro del elemento padre, ejemplo:

section.intro
  .intro__imagen: img ()

ventajas:
Ahorra l铆neas de c贸digo.

y cuando se presentan m谩s elementos hijos se recurre a la indentaci贸n ordinaria.

section.intro
  .intro__imagen: img ()
  .intro__contenido
        h2 T铆tulo Principal
        p Lorem ipsum
        a.boton Leer Mas

Gracias por el truco para el ajuste de p谩rrafos, pero si usamos VScode me gustar铆a aportar que tiene una herramienta llamada "Ajuste de palabra" que podemos acceder a ella entrando al men煤 superior 鈥淰er鈥 o usando la combinaci贸n de teclado:
alt + Z
Pr谩cticamente vuelve responsive el texto dentro de nuestra ventana del editor de c贸digo. As铆 no importa que tan ancho o delgado el espacio de trabajo, siempre podr谩 visualizarse el contenido de cada bloque de c贸digo.

Solo una cosa, no me agrada que la etiqueta <h1> este junta a la etiqueta <a>

![](

me gusta que este separadas

![](

Creo que en caso de tener mucho contenido en el Visual Studio Code, puede usarse Alt + Z
Se acomoda el texto al espacio de trabajo.
Creo que es m谩s sencillo.
Saludos

No me termina de convencer pug.
El tener que escribir mi html en pug, luego revisar que el html sea compilado correctamente y al final revisar la interpretaci贸n del navegador, me parece que es algo redundante.

Si usas VS code y para evitar tooooodo el drama que hizo el instructor al modificar el texto del Lorem Ipsum(min 4:48) y la l铆nea te queda muy larga presiona:
Alt + z
y autom谩ticamente te va a ajustar el texto al ancho de pantalla que le hayas asignado y se ajusta autom谩ticamente.

A煤n un poco extra帽a usando Pug. Considero que visualmente es m谩s 鈥渆legante鈥, pero en t茅rminos de escribir el c贸digo parece m谩s f谩cil hacerlo directamente con VSC y sus propias extensiones. Veremos si cambio de opini贸n en las pr贸ximas clases.

Alt + z tambi茅n puede ser usado para darle mejor vista al texto

Definicion de Pug: es un motor de plantillas de NodeJS, el cual brinda la posibilidad de preprocesar c贸digo HTML de una forma m谩s r谩pida y amigable. Nos otorga una sintaxis menos compleja y muy poderosa en la que se incluyen nuevas caracter铆sticas tales como ciclos, variables, mixins, entre otros.

En VSCode puede presionar alt + z para que el contenido se ajuste al tama帽o de la ventana.

doctype html
html
  head
    meta(charset="UTF-8")
    link(rel="stylesheet", href='css/ejercicio_pug.css')
  body
    header
      h1 PlatziGames
      a.boton Registro
    section.intro
      //Eso le dice a pug que cree un div y luego tenga de hijo una imagen 
      .intro__imagen: img(src="images/imagen.png")
      .intro__contenido
        h2 Titulo Principal
        // | el pipe indica que el texto esta dentro de p
        p
          | Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          | Unde nobis distinctio maxime praesentium sit animi ad saepe 
          | sapiente ipsam veniam voluptatibus nihil, corporis temporibus 
          | consequatur libero! Consequuntur impedit excepturi distinctio!
          span Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, consequuntur.
        a.boton Leer M谩s```

Excelente clase 馃殌

Excelente material

No me funcion贸 lo del span en negrita pero lo hice con un strong鈥

excelente clase cada ves me parece mas interesante pug

<!DOCTYPE html>
html(lang="en")
	head
		meta(charset="UTF-8")
		meta(name="viewport", content="width=device-width, initial-scale=1.0")
		link(rel="stylesheet", href="css/ejercicio-pug.css")
		title Document
	body
		header
			h1 PlatziGames
			a.boton Registro
		section.intro
			.intro__imagen: img(src="images/imagen.png", alt="")
			.intro__contenido
				h2 Titulo Principal
				p
					| Lorem ipsum dolor sit amet 
					| consectetur adipisicing elit. 
					| Dolorum ratione molestiae vitae 
					| unde. Labore, provident porro 
					| minima sequi blanditiis, eius nobis delectus amet ad 
					| ullam laudantium eos error consectetur atque.
					span.
						Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
						Nesciunt rem ab ipsa inventore? Accusantium, nemo ad nobis
				a.boton leer Mas```

Me encant贸!!

El VSC tiene una opci贸n para que el texto siempre este en pantalla
![](

En Windows con alt + z se activa el word wrap de VS Code y es m谩s facil de leer

Tambien pueden utilizar alt+z en VSCode para que se vea de forma mas legible.

Wow, me empieza a gustar pug! 馃槃

Me est谩 gustando mucho Pug, excelente clase.

As铆 me quedo a m铆:

<!DOCTYPE html>
html(lang="en")
	head
		meta(charset="UTF-8")
		meta(name="viewport", content="width=device-width, initial-scale=1.0")
		title Document
		link(rel="stylesheet", href="css/ejercicio-pug.css")
	body
		header
			h1 Platzi Games
			a.boton Registro
		section.intro
			.intro__imagen: img(src="images/imagen.png")
			.intro__contenido
				h2 T铆tulo Principal
				p Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi illum quisquam consequatur dignissimos! Minus eos eaque mollitia ab ut vero dolorum quis. Consequuntur magni accusantium eum natus esse doloribus beatae?
					span Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus fugit labore repellendus nam ipsa aliquid perferendis corporis.
				a.boton Leer M谩s```

Adicional a lo que comentan mis compa帽eros respecto de activar el toggle wrap para lo del acomodo de las l铆neas 驴Qu茅 pasa si queremos por ejemplo poner negritas dentro de una etiqueta p? Algo as铆:

<p>Lorem ipsum dolor <strong>sit amet consectetur</strong> adipisicing elit. </p>

La soluci贸n es precisamente el salto de l铆nea para incorporar la etiqueta <strong> y luego, nuevamente un salto de l铆nea utilizando el pipe (|) para indicar que ese resto del texto sigue siendo parte de la etiqueta p.

p Lorem ipsum dolor 
  strong sit amet consectetur
  | adipisicing elit.

Buena clase, eso si hay que aclarar que con ALT + Z pones el texto sobre el campo visible de VSC, no veo tan necesario lo que dice el profe pero igual es genial saberlo


Alguien sabe como se puede hacer para que los cambios se apliquen en tiempo real. Ya tengo instalado Live Server pero tampoco me sirve me sale esto

no me agarra los estilos css

驴Se puede usar Prettier en pug?

Existe otra forma de usar una etiqueta dentro de otra etiqueta
p este es un #[span ejemplo].

As铆 se puede usar la notaci贸n de punto para manejar las etiquetas y no repetir el | en cada una de las l铆neas.

Poco a poco me esta interesando m谩s pug, buena clase 馃憤馃徎馃搱馃摉馃鉁岎煉渽