Šablony

Hlavní nabídka na všech stránkách

Když se nám na každé stránce opakuje přesně stejné menu, je jaksi nedůstojné ho psát ručně. Krom toho jsme si už stihli vyzkoušet, že je to dost nepohodlné, protože při každé změně musíme přepisovat všechno.

Vlastně stačí smazat hodnotu layout: false, kterou jsme zatím vždycky nechávali ve volání funkce res.render. Výchozí rozvržení stránky pak stačí uložit do souboru views/layouts/main.html. Složku layouts nejspíš musíme nově vytvořit.

Rozvržení stránky musí někde obsahovat značku {{{body}}}, do které se pak vloží celý kód stránky. Může to být něco takového:

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
<div class=nahore>
    <h1>Šablony</h1>
    <u>{{{body}}}</u>
&lt;/div>
&lt;/body>
&lt;/html>

Kdybychom chtěli používat víc různých rozvržení, můžeme název příslušného souboru dát funkci res.render, například layout: "soubor". Hotový kód najdete v ukázce na téma šablony.

Cyklus pro obrázky s popisem

V zápiscích ohledně seznamů a cyklů je popsané, jak použít {{#each}} pro vypsání seznamu na webu. Někdy ale potřebujeme vypsat složitější prvky než jen jediné jméno.

Dejme tomu, že chceme vypsat několik obrázků, každý z nich má mít nějaký název a každý má zároveň fungovat jako odkaz. Budeme tedy mít seznam a každé položka v něm bude trojice hodnot: název, obrázek, odkaz. Na tom není nic těžkého:

var obrazky = [
 ["Mime City", "https://pbfcomics.com/wp-content/uploads/2016/04/PBF114-Mime_City-1.png", "http://pbfcomics.com/comics/mime-city/"],
 ["Adam 2.0", "https://pbfcomics.com/wp-content/uploads/2016/09/PBF274-Adam_2.png", "http://pbfcomics.com/comics/adam-2-0/"],
 ["Introvertebrate", "https://pbfcomics.com/wp-content/uploads/2018/12/Thumb-Living_By_Myself.png", "http://pbfcomics.com/comics/by-myself/"],
 ["Technorgy", "https://pbfcomics.com/wp-content/uploads/2017/09/280Thumb-Technorgy.png", "http://pbfcomics.com/comics/technorgy/"],
]

Tuto proměnnou pak předáme přes funkci res.render šabloně. Položky budeme procházet cyklem {{#each}}, jako už umíme. Na název položky pak použijeme {{0}}, na obrázek {{1}} a na odkaz {{2}}, to podle jejich pořadí v trojici. Například takhle:

{{#each obrazky}}
&lt;div class=obrazek>
&lt;a href="<u>{{2}}</u>">&lt;img src="<u>{{1}}</u>"><u>{{0}}</u>&lt;/a>
&lt;/div>
{{/each}}