History: Jade

Revision made 8 years ago by Francisco Presencia. Go to the last revision.

Jade, que acaban de cambiarle el nombre a Pug (pero mucha in­for­mación hay que bus­carla como "jade"), es un len­guaje que com­pila a HTML, con una sintaxis con in­fluen­cia de python y CSS.

Por ejemplo, este código de HTML:

<div class="card">
  <header>
    <h2>Hello</h2>
  </header>
  <section>
    <p>¿Qué tal, mundo?</p>
  </section>
  <footer>
    <a class="button up">Muy bien</a>
    <a class="button down">Podría estar mejor</a>
  </footer>
</div>

Se escribiría así en jade:

div.card
  header
    h2 Hello
  section
    p ¿Qué tal, mundo?
  footer
    a.button.up Muy bien
    a.button.down Podría estar mejor

DRY (Don't Re­peat Your­self)

Pug tiene un poten­te motor para no tener que re­petir bloques con estruc­turas de con­trol. Por ejemplo, para mostrar todas las en­tradas de blog en una página web lo podríamos hacer así:

each entry in posts
  div.card(data-id=entry._id)
    header
      h2= entry.title
    section= entry.body

La principal diferencia con el HTML estático es que creamos una plantilla que se rellena con la información almacenada en la base de datos (strings, números....) tantas veces como objetos post tengamos almacenados en la bbdd. La ventaja de esto es que si tenemos 50 post no tendremos que copiar y pegar el código HTML de cada elemento 50 veces.

Otra forma de no re­petir­te es no tener que hacer copy/paste de las par­tes en común del HTML. Por ejemplo, nos de­finiríamos un archivo en común llamado "layout.jade" el cual ex­ten­deríamos en otros. Para el mismo ejemplo de layout del HTML in­ici­al:

doctype html
html
  head
    title Página Web
    meta(charset="utf-8")
    meta(name='viewport' content='width=device-width, initial-scale=1')
    link(rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/4.1.1/plugins.min.css")
    link(rel="stylesheet" href="style.css")
  body
    block content

Este último block content es donde pondremos nuestro con­tenido. Para usar este layout desde otras páginas, tenemos que poner (por ejemplo en index.jade):

extend ./layout.jade

block content
  p Hola!

Lo mismo podemos hacer si queremos por ejemplo editar el title de­ntro del head­er, solo que esta vez sí que de­finiremos uno por de­fec­to en layout.jade:

doctype html
html
  head
    block title
      title Mi Web
    meta(charset="utf-8")
    meta(name='viewport' content='width=device-width, initial-scale=1')
    link(rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/4.1.1/plugins.min.css")
    link(rel="stylesheet" href="style.css")
  body
    block content

Y después, cuan­do queramos cam­biar el title en una página en con­creto, como en index.jade:

extend ./layout.jade

block title
  title Índice de la web - Mi Web

block content
  p Hola! Mostrando la lista de proyectos:
  // ...

Y en pro­ject.jade:

extend ./layout.jade

block title
  title= project.title + " - Mi Web"

block content
  h2= project.title
  article= project.body

In­cluir datos

Pero, ¿de dónde salen estos datos y vari­ables? Pues hay que pasár­selos desde el javascript del ser­vidor (en app.js o desde el con­trolador). Veamos una sen­cil­la ruta para la página prin­cip­al en app.js:

app.get('/', function (req, res) {
  Posts.find({}, function (err, posts) {
    res.render('index', { posts: posts });
  });
});

Y ahora un pequeño ejemplo para pro­jects.jade en app.js:

app.get('/project/:id', function (req, res) {
  Posts.find({ _id: id }, function (err, entry) {
    res.render('project', entry);
  });
});

Estructura de archivos

Primero tendremos que instalar jade:

npm install pug --save

Después tendremos que decirle a express que use jade dentro de app.js:

app.set('views', './views');
app.set('view engine', 'pug');

Creamos una carpeta que se llame "views", movemos todos los archivos HTML que tengamos y si no los tenemos creamos los siguientes dentro de la carpeta views:

  • index.jade
  • layout.jade
  • posts.jade