Šablonovací systém Jade
Dnes vám předvedeme základy šablonovacího systému Jade.
Nálepky:
Článek původně vyšel na autorově webu Je čas.
Jade je šablonovací systém převáděný do HTML. U komplikovanějších (ale i jednoduchých) webů a aplikací si jde usnadnit práci používáním šablonovacího systému. Šablony Jade kromě základních věcí, jako jsou proměnné, podmínky nebo cykly, nabízí i alternativní zápis HTML.
Jade vznikl původně pro Node.js, ale existují i implementace v PHP.
Zápis
Asi nejzajímavější je alternativní psaní HTML elementů a atributů:
div.clanek
p Text v odstavci a
a(href="/clanek") odkaz
| na článek.Tento kód vytvoří následující HTML:
<div class="clanek">
<p>Text v odstavci a <a href="/clanek">odkaz</a> na článek.</p>
</div>Základní pravidla
- Nepoužívají se ostré závorky běžné v <HTML>, ale samotné názvy značek.
- Koncové značky se vynechávají všude – zanoření se vytváří odsazením.
- Třídy a identifikátory jdou zapsat rovnou k elementu
div.trida,span#idecko. - Ostatní atributy se zapisují do závorek:
element(atribut="hodnota")Více atributů se odděluje čárkou:
element(atribut="hodnota", druhyAtribut="hodnota") - Každý text na začátku řádku se chápe jako název elementu. Toto chování je někdy nežádoucí. Připojit text přímo do elementu jde pomocí roury
|. Pokud element obsahuje pouze text, jde použít tečka:p. Odstavec zapsaný v kódu na více řádkůVýsledek bude:
<p> Odstavec zapsaný v kódu na více řádků </p>
Na první pohled tedy Jade nabízí úspornější psaní HTML. Je otázka, jestli je to taková výhoda. Při používání Emmetu jde totéž jako v Jade napsat následovně:
.clanek>p({Text v odstavci a }+a[href="/clanek"]{odkaz}+{ na článek.})A rozbalit klávesou Tab.
Výhodný ale může být oproti HTML úspornější obsah ve zdrojovém souboru.
Programování
Šikovná vlastnost Jade je možnost generovat HTML kód na základě skriptu. V HTML šablonách se čas od času některé části opakují a Jade umožňuje dodržet zásadu DRY (Don’t repeat yourself) takřka 100%.
Proměnné
Pro opakující se texty jde použít proměnné.
- var promenna = "Fytopuf";
div
p Obsah proměnné se vypíše přes #{promenna}.Cykly
Data je možné vypisovat cyklem. Používá se k tom konstrukce for. Obsah v cyklu se vypíše pomocí =.
- var jmena = ["Franta", "Pepa", "Jednička"];
for jmeno in jmena
div= jmeno
Mixiny
Jde vytvářet i mixiny. Třeba pro univerzální vkládání obrázků můžete vytvořit:
mixin obrazek(url, popis)
img(src="#{url}" alt="#{popis}")Použití by bylo následovné:
+obrazek("obrazek.png", "Popisek obrázku")Odkazy
- Sitepoint: A Jade Tutorial for Beginners
- Sitepoint: Introduction to JadePHP
Bohumil Jahoda
Autor se webdesignu intensivněji věnuje od roku 2005. V poslední době se zabývá hlavně tvorbou responsivních webů a frontendem. Od roku 2013 o tom píše na webu jecas.cz.
Jade uz neni aktualizovany a nove verze vychazi pouze pod jmenem Pug (ktery ma i novy, oddeleny repozitar a npm module) – Meli nejake problemy s brandigem.
Jade uz neexistuje. Udelali z nej pug:
https://www.npmjs.com/package/pug#rename-from-jade
Díky za informaci. Zajímavé je, že na http://jade-lang.com/ to nezmiňují.
Chybí zmínka o includech a extendech, takže se šablona dá kodovat tak, že se rozbije na komponenty a partialy. A není k tomu potřeba například PHP.
https://github.com/pugjs/pug/blob/master/examples/extend.pug