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 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