jadeEmpezando con jade


Observaciones

Pug (anteriormente conocido como jade) es un motor de plantillas de alto rendimiento fuertemente influenciado por Haml e implementado con JavaScript para Node.js y navegadores.

  1. Produce HTML
  2. Soporta código dinámico
  3. Apoya la reutilización (SECO)

Página de inicio

Repositorio en GitHub

Versiones

versión fecha de lanzamiento
0.0.2 2010-07-03
1.0.0 2013-12-22
1.11.0 2015-06-12

Instalación o configuración

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

Necesitará instalar:

Después de instalar NodeJS, puede verificar en su terminal la instalación correcta haciendo:

$ node -v
 

Si tiene éxito, imprimirá el número de la 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 install pug
 

Si quieres instalarlo globalmente, puedes escribir:

$ npm install pug-cli -g
 

y correr con

$ pug --help
 

Sintaxis

Pug (el nombre antiguo es Jade) es una sintaxis limpia y sensible al espacio 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>
 

Aquí están las reglas para hacer Pug al código HTML:

  1. Al sangrar el texto, se construirá el árbol HTML. La sangría se puede utilizar con espacios o tabulaciones. Esto no se pudo mezclar!
  2. Las etiquetas HTML se escriben sin < y > . Los atributos son lugares entre paréntesis.
  3. El comentario podría hacerse con // o <!-- --> . Los comentarios con //- no son visibles en el HTML renderizado.
  4. Con #{ } 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) será un div generado 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= title
  8. A != (No igual a) recuperó una variable sin escapar.
  9. A - (guión) le permite escribir JavaScript. Ejemplo: - console.log("foo");
  10. El enlace a un archivo externo puede ser el siguiente: script(src="/js/chat.js")
  11. El script en línea podría usar este script. .
  12. Una directiva para añadir el diseño básico: se extends ../layout .
  13. En layout.pug sucede la inserción mediante el uso de block content
  14. El uso de parciales se puede realizar de dos maneras:
    1. por parcial != partial(template file name/options) .
    2. Por incluir: include ../includes/footer
  15. Lo inverso de incluir es extend . Esto permite desde una página "partes de block html" enviar a una página de diseño, por ejemplo: extend layout
  16. La concatenación ocurre con el carácter + (más) o # (hashtag). El plus se utiliza en el código JavaScript. El hashtag en HTML y muestra el contenido: `p El nombre es: # {miNombre}

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 Se utiliza en excepciones y se requiere cuando se utilizan incluye
  • compileDebug Cuando es falso, no se compila la instrumentación de depuración
  • bonito Agregue espacios en blanco de sangría bonita a la salida (falso por defecto)