Jade, HTML template engine

Jade je vysoce výkonný HTML šablonovací engine vycházející z Haml implementovaný v JavaScriptu. Primárně je určen pro NodeJS server side šablonování. Jinými slovy vytváření HTML stránek na straně serveru (něco jako PHP).

Na první pohled významný rys je jeho vyjadřovací stručnost:

body
    h1.hlavni Tohle je nadpis
    p Nejaky text
    #obsah.info
        p Dalsi text

Výsledný HTML kód


Tohle je nadpis

Nejaky text
Dalsi text

Jak je vidět, pro HTML kód se nepoužívá parových značek, ale speciální syntaxe podobná Pythonu (osazování kódu). Není potřeba uzavíracích značek, kód se odsazuje a proto je zápis kratší, jednodušší a ve výsledku i bezpečnější. Nemusíte kontrolvat jestli jste zpárovali všechny tagy.

Další z jeho výhod je jeho dostupnost v mnoha programovacích jazycích. Podporuje jej jak NodeJS a Express, ale i Python a další.

Jade a NodeJS

jade

Jade je defaultní HTML template engine v Express, což je NodeJS webový framework.

Vkládání prostého textu

Pokud potřebujete např do odstavce vložit víceřádkový text, máte na výběr z několika možností jak to provést:

p Jednoradkovy text

p
    | text na 1. radku
    | text na 2.radku

p.
    Text na 1. radku
    Text na 2. radku

Vkládání id a tříd k tagům

h1(id="title") Welcome to Jade
button(class="btn", data-action="nejaka_akce").
    Tlacitko

h1#title Vitejte
button.btn(data-action="nejaka_akce") Tlacitko

Opravdu dynamické šablony

Do šablony jsou skrze JavaScript vložena data.

h1
  | Maintainer:
  = ' ' + maintainer.name
table
  tr
    td Twitter
    td= maintainer.twitter
  tr
    td Blog
    td= maintainer.blog
var jade = require('jade');
var fn = jade.compile(jadeTemplate);
var htmlOutput = fn({
  maintainer: {
    name: 'Forbes Lindesay',
    twitter: '@ForbesLindesay',
    blog: 'forbeslindesay.co.uk'
  }
});

Smyčky a podmínky

Šablonu lze i řídit na základě podmínek a smyček

- var user = { name: 'John' }
if user
  div.welcomebox
    p.
      Welcome, #{user.name}
else
  div.loginbox
    form(name="login", action="/login", method="post")
      input(type="text", name="user")
      input(type="password", name="pass")
      input(type="submit", value="login")

Komplexní layout

Výsledná HTML stránka nemusí být výsledkem jedné Jade šablony, ale můžete do ní vkládat další Jade šablony, nebo vytvářet celou strukturu stránek.

include ./includes/header.jade
// file a.jade
block header
  p some default text
block content
  p Loading ...
block footer
  p copyright

// file b.jade
extend a.jade
block header
  p very specific text
block content
  .main-content

Několik základních odkazů

Language Reference
Tutorial
Jak začít

Web Development with Jade