Grav CMS umožňuje nejen flexibilně zpracovávat obsah, jak jsme si už několikrát ukázali, ale rovněž i přizpůsobovat vzhled konkrétním potřebám, a to nejen prostřednictvím šablon stránek (templates) na úrovni aktivní šablony webu, ale rovněž i napříč několika dostupnými šablonami webu (themes) v rámci jedné instance webu.

Aktualizace 23. 5. 2023: Příklad z tohoto článku byl odstraněn, resp. nahrazen odkazem na skutečné použití v praxi na webu Apartmány Luďka. Jediným rozdílem proti článku je, že web Apartmány Luďka používá jako výchozí šablonu webu Big Picture.

Možná vás napadne otázka, proč bychom něco takového měli dělat. Odpověď je jednoduchá. Grav disponuje několika volně dostupnými šablonami webu, které pokrývají celé spektrum potřeb, od blogů, přes osobní a firemní stránky, až po galerie a specializované aplikace, jako jsou e-shopy, časové osy atd.

TemplatePokud tedy používáme nějakou šablonu webu určenou primárně pro blog (ať již vlastní nebo volně dostupnou) a rozhodneme se provozovat nějaký typ obsahu, který aktuální šablona webu neumí zpracovat, máme v podstatě tři možnosti jak postupovat.

Buď si danou část dopíšeme na míru prostřednictvím Twigu jako novou šablonu stránky, což ovšem vyžaduje jistou dávku zkušeností, neboť bude potřeba použít určitě i CSS, popř. i Javu či další technologie. V případě vlastní šablony webu se patrně nabízí tato varianta, neboť se předpokládá, že určitými zkušenostmi disponujeme, resp. máme dodavatele, který novou funkcionalitu zakomponuje do stávajícího webu, aby plně odpovídala všem našim potřebám. Takto je třeba vytvořena šablona author.html.twig pro výpis informací o autorovi a jím publikovaných příspěvcích na webu Grav.cz a rovněž je tato varianta použita u galerie na webu Z&D stavby, s.r.o., kde je ovšem zpracovávána Twigem na úrovni stránky.

Nebo kompletně vyměníme šablonu webu za takovou, která potřebnou funkčností disponuje, otázkou ale zůstává, zda naopak tato nová šablona bude zvládat typy obsahu dostupné na doposud používané šabloně webu. A i v případě že ano, tak nemusí zcela korespondovat, ať již z hlediska výstupu, kdy třeba u příspěvku nebudou dostupné všechny požadované informace, tak pojmenování, kdy např. šablona pro příspěvek item.html.twig bude pojmenována jinak, např. post.html.twig. Této variantě bychom se měli pokud možno vyhnout, popř. ji aplikovat po pečlivém zvážení a ujištění, že se jedná z dlouhodobého hlediska o správné a neměnné řešení.

A do třetice tu máme možnost ponechat původní šablonu webu jak je, a pro konkrétní část webu použít jinou šablonu webu, která je specializovaná na konkrétní typ obsahu. Zde se můžeme potýkat s potencionálním problémem rozdílného vzhledu webu postaveného na dvou (nebo i více) šablonách webu. Nicméně, uvedené můžeme přijmout jako rozumný kompromis v poměru náročnost/výsledek, kdy v některých případech nemusí být rozdíl až tak zásadní, či naopak určitý vzhledový kontrast jednotlivých stránek může být ku prospěchu a povede k určitému oživení. Pokud nám bude rozdílnost vzhledu přesto překážet, pak tu máme staré dobré kaskádové styly, nebo předchozí dvě zmíněné možnosti.

Přejděme tedy od teorie k praktické ukázce, založené na třetí variantě. Web Grav.cz nyní používá v základu výchozí šablonu webu Quark, rozšířenou prostřednictvím dědičnosti o některé vlastní funkce a vzhled. Představme si, že chceme v rámci tohoto webu zprovoznit galerii postavenou na šabloně webu Multiverse, která bude dostupná jako podstránka tohoto příspěvku (v praxi by byla pochopitelně umístěna na nějakém „důstojnějším“ místě, patrně přímo v kořenové složce webu). Pro jednoduchost použijeme zdrojové soubory ze skeletonu Multiverse, tedy soubor, resp. obsah souboru home.md a 12 fotografií, které v praxi pochopitelně vyměníme za vlastní. A aby se nám příklad správně zobrazil na jiné šabloně webu, tak ji budeme muset Gravu „podstrčit“ prostřednictvím doplňku Themer.

Modifikovanou šablonu webu Multiverse používá web Psí kadeřnictví „GREY“, přičemž tato šablona byla zvolena primárně právě kvůli funkční galerii, což je v článku i uvedeno (pracovní náhled galerie je na třetím obrázku), ale zákazník se nakonec rozhodl od provozování galerie upustit.

Nyní k jednotlivým krokům. Jejich posloupnost není striktně daná, důležité je, aby bylo pro správnou funkčnost vše dokončeno a správně nastaveno. Rovněž není podstatné, zda se „instalace“ a nastavování provádí přes Admin Panel nebo přes FTP klienta. V návodu budu tedy uvedené uvádět v obecné rovině, případně doplním:

  1. Vytvoříme stránku Galerie, tedy složku /galerie, resp. /XX.galerie (místo XX bude pořadové číslo stránky) a v ní soubor default.md (stránka generovaná podle šablony default.html.twig), do kterého zkopírujeme obsah ze souboru home.md ze skeletonu Multiverse, popř. soubor default.md nevytváříme a pouze zkopírujeme dostupný soubor home.md. Současně zkopírujeme do složky všech 12 fotografií. Pokud budeme přímo vytvářet vlastí Galerii, pak tento krok můžeme přeskočit, je ale dobré vědět, že dostupné údaje můžeme použít jako vzorové a pouze je přepsat.
  2. Nainstalujeme šablonu webu Multiverse a necháme ji neaktivní (aktivní zůstane námi používaná šablona, v našem případě Quark, resp. Quark Inherit).
  3. Nainstalujeme doplněk Themer a ponecháme výchozí nastavení.
  4. Otevřeme stránku Galerie a přes expertní mód v Admin Panelu upravíme hlavičku stránky přidáním hodnoty theme: multiverse, čímž Gravu, resp. doplňku Themer říkáme, že danou stránku má zpracovat jinou šablonou webu.
  5. Jelikož je galerie v šabloně webu Multiverse zpracována šablonou stránky home.html.twig, musíme Gravu dále říci, že musí použít tuto šablonu stránky ze šablony webu Multiverse. Pokud jsme zkopírovali přímo soubor home.md do složky stránky, tak uvedené nemusíme dále řešit, pokud ale máme aktuálně použitou šablonu stránky default.html.twig, pak musíme buď přejmenovat soubor default.md na home.md (pokud již máme nainstalovaný a aktivní doplněk Themer, pak to lze učinit přes Admin Panel, kde se nám v seznamu zobrazí šablony stránek ze všech instalovaných šablon webů), nebo v hlavičce stránky přebít šablonu stránky proměnnou template: home, aby Grav použil pro zpracování šablonu stránky home.html.twig.

Pokud máme vše správně nastaveno, tak se zobrazí stránka, jako v uvedeném příkladu. Vidíme, že rozdíl vzhledu není natolik drastický, aby bránil případnému ostrému nasazení. Pochopitelně se určitým úpravám nevyhneme, např. vygenerování menu, aby nebyl dostupný pouze odkaz na hlavní stránku.

Drobnou nevýhodou je, že pokud má stránka rozšířenou správu přes Admin Panel, což šablona stránky home v šabloně webu Multiverse má, přičemž lze jejím prostřednictvím přidávat názvy a popisy fotografií v galerii, tak nelze použít v rámci hlavní šablony webu použít. To lze však snadno vyřešit přes expertní mód, popř. si můžeme stránku vygenerovat na jiné instanci a obsah překopírovat. V opravdu krajním případě pak lze dočasně aktivovat sekundární šablonu webu a po provedení úprav zase vrátit výchozí, což však příliš nedoporučuji, neboť v lepším případě se návštěvník dočká nepříjemného překvapení v podobě rozsypaného webu, v horším pak zcela nefunkčního webu. Tato možnost by tedy neměla překročit časovou dotaci v řádu jednotek minut.

Přílohy:

Nalezli jste v článku chybu, ať již gramatickou nebo faktickou? Článek prošel pouze autorskou korekturou a drobné nedostatky, jako překlepy nebo chybný slovosled, se v něm mohou vyskytovat. Pokud je objevíte, pomozte příspěvek upravit oznámením přes kontaktní formulář nebo na e-mail. Budou vám vděčni nejen autoři, ale zejména ostatní čtenáři.

Pomozte Grav.cz prolinkovat. Projekt Grav.cz se za dva roky provozu rozrostl a ve starších příspěvcích na Blogu mohou být uvedeny pasáže, které by stálo za to prolinkovat na konkrétní související řešení, která jsou uvedena v následujících příspěvcích. Pokud takové objevíte, pošlete informaci přes komunikační kanály uvedené v předchozím nebo následujícím odstavci.

Diskuze k článku není k dispozici. Pokud ale máte k tématu článku podněty, připomínky nebo dotazy, je možné je sdělit ve skupině na Facebooku, kde se k nim vyjádří nejen autor, ale případně i další diskutující.

Předchozí příspěvek Následující příspěvek