O webu
Jade

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 ukázky plyne několik zákonitostí:

  1. Nepoužívají se ostré závorky běžné v <HTML>, ale samotné názvy značek.

  2. Koncové značky se vynechávají všude – zanoření se vytváří odsazením.

  3. Třídy a identifikátory jdou zapsat rovnou k elementu div.trida, span#idecko.

  4. Ostatní atributy se zapisují do závorek:

    element(atribut="hodnota")

    Více atributů se odděluje čárkou:

    element(atribut="hodnota", druhyAtribut="hodnota")
  5. 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 | (na české klávesnice zkratka Pravý Alt + W).

    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é případně i 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 universální vkládání obrázků by mohlo existovat něco jako:

mixin obrazek(url, popis)
  img(src="#{url}" alt="#{popis}")

Použití by bylo následovné:

+obrazek("obrazek.png", "Popisek obrázku")

Odkazy