Cómo hacer nuestra primera página con Pug
Published in
2 min readJul 25, 2017
Pug es un motor de plantillas enfocado en hacer mas rápida la codificación de Html. Ha sido implementado con Javascript para trabajar con nodeJs principalmente.
Ademas es un preprocesador de código Html.
Pug trabaja por indentación; es Html con una sintaxis sencilla:
doctype 5
html(lang=”es”)
head
title Template Pug
body
h1#encabezado Hola Mundo!
p.centrar Ingresa tu información
input(type="text", placeholder="ingresa tu nombre")- Sólo tienes que poner la etiqueta un espacio y su contenido.
- Los atributos se escriben entre paréntesis. Si quieres poner varios atributos tienen que ir separados con una (,).
- Para incluir una clase, la etiqueta va seguida de un (.) y el nombre de la clase; y si queremos agregar un id en lugar de punto se pone un (#).
- Para anidar, tenemos que empezar en una nueva linea y dar un espacio con el tabulador.
- Anidación en una linea
//sintaxis pug
div: p: span Hola!//código html
<div>
<p>
<span>
Hola!
</span>
</p>
</div>
Es una manera de escribir en una línea etiquetas anidadas. Tienes que agregar (:), después de la etiqueta.
- Variables
Puedes revisar más información en:
//sintaxis
- var saludo = "Hola mundo!"
//asignación
p = saludo
//interpolación
p Soy un #{saludo}//código html
<!--asignación-->
<p>Hola mundo!!</p>
<!--interpolación-->
<p>Soy un Hola mundo!</p>
Puedes guardar información en variables, es importante dejar un espacio antes al empezar la linea, ya que si se omite, el valor se interpreta como etiqueta en lugar de asignarla.
