Přejít k navigační liště

Zdroják » Webdesign » Šablonovací systém Jade

Šablonovací systém Jade

Články Webdesign

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

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

Komentáře

Subscribe
Upozornit na
guest
5 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Jakub

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.

Jarda

Jade uz neexistuje. Udelali z nej pug:

https://www.npmjs.com/package/pug#rename-from-jade

Martin Hassman

Díky za informaci. Zajímavé je, že na http://jade-lang.com/ to nezmiňují.

Milian

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.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.