Empezando con el jade

Sintaxis

Pug (el nombre anterior es Jade) es una sintaxis limpia y sensible a los espacios en blanco para escribir HTML. Aquí hay un ejemplo simple:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Produce la siguiente salida como HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

Estas son las reglas para convertir Pug en código HTML:

  1. Al sangrar el texto, se construirá el árbol HTML. la sangría se puede usar con espacios o tabulaciones. ¡Esto no se puede mezclar!
  2. Las etiquetas HTML se escriben sin < y >. Los atributos son lugares entre corchetes.
  3. El comentario se puede hacer con // o <!-- -->. Los comentarios con //- no son visibles en el HTML renderizado.
  4. Con #{ } se generará un modelo ofrecido: #{header} #{user.username}.
  5. El # (hashtag) sin llaves será un elemento div creado con el texto como ID. El ejemplo #myID se representará como <div id="myID"></div>.
  6. Con un . (punto) se generará un div con un atributo de clase. Ejemplo: .myClass se representará como <div class="myClass"></div>
  7. Con (signo de igualdad seguido de un espacio), se recuperará una variable. Ejemplo: h1= título
  8. Un != (no igual a) recuperó una variable sin escape.
  9. Un - (guión) le permite escribir JavaScript. Ejemplo: - consola.log("foo");
  10. La vinculación a un archivo externo puede ser la siguiente: script(src="/js/chat.js")
  11. El script en línea podría usar este script..
  12. Una directiva para agregar el diseño básico: extends ../layout.
  13. En layout.pug ocurre la inserción usando block content
  14. El uso de parciales puede ser de dos formas:
    1. by partial: != partial(template file name/options).
    2. By include: include ../includes/footer
  15. Lo contrario de incluir es ’extender’. Esto permite enviar desde una página “partes de bloque html” a una página de diseño, por ejemplo: diseño extendido
  16. La concatenación ocurre con el carácter + (más) o # (hashtag). El plus se usa en código JavaScript. El hashtag en HTML y representa el contenido: `p El nombre es: #{myName}

Usando pug con Node.js

var pug = require('pug');

// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);

// render
var html = pug.render('string of pug', merge(options, locals));

// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));

Opciones

  • nombre de archivo Usado en excepciones y requerido cuando se usa include
  • compileDebug Cuando es falso, no se compila la instrumentación de depuración
  • pretty Agregue espacios en blanco con sangría bonita a la salida (falso de forma predeterminada)

Instalación o configuración

Antes de lanzarte a codificar con Pug, debes tener algunos requisitos previos.

Necesitarás instalar:

Luego de instalar NodeJS, puedes verificar en tu terminal la instalación correcta haciendo:

$ nodo -v

Si tiene éxito, imprimirá el número de versión de Node.

Para instalar Pug en su proyecto, la forma preferida y fácil es a través de NPM (Node Package Manager). Si está familiarizado con eso, simplemente ejecute esta línea de código en su Terminal:

$ npm instalar pug

Si desea instalar globalmente, puede escribir:

$ npm instalar pug-cli-g

y correr con

$ pug --help