Injektování obsahu stránek

Vít Petira 6 minuty, 19 sekundy 86 twig šablony tipy dokumentace ukázky

V praxi nastávají případy, kdy potřebujeme umístit do stránky obsah (ať již text, či grafiku), který je uložen na jiném místě CMS, ideálně pak v jiné stránce. Důvody jsou různé – od umístění informace zveřejněné v sekci Novinky ve zcela shodném znění na úvodní stránce webu, přes umístění identického obsahu v různých částech webu, až po umístění informačního panelu nesoucího důležitou informaci na všech stránkách webu.

Injektovaný obsahV celém následujícím textu vycházíme ze skutečnosti, že veškerý obsah určený pro injektaci je k dispozici jako stránka. Není přitom důležité, zda se jedná o stránku zveřejněnou, a tedy běžně dostupnou, nebo nezveřejněnou, tzn. návštěvníkovi webu skrytou. Důvodem pro výběr úložiště na úrovni stránek je jejich snadná editace přes Admin Panel a následná dostupnost odkudkoliv v rámci CMS.

Dále je třeba si uvědomit, že injektaci lze provádět ve všech případech přes níže uvedený Twig kód, ale jsou i určité případy, kdy je lepší řešit injektování přes speciální doplněk PageInject, který si představíme podrobněji v některém dalším článku.

Úvod článku uzavírám tím, že důvodem pro injektaci je zejména zabránění vzniku duplicit, alespoň ve smyslu zdroje obsahu. Jestliže je třeba cokoliv upravit či doplnit, stačí tak učinit na jednom místě, odkud se injektovaný obsah následně převezme. Pokud se týče potenciální duplicity obsahu, která bývá penalizována, je ponecháno na každém jednotlivci, zda níže uvedená řešení bude realizovat v praxi, a to zejména v závislosti na konkrétním účelu použití. Případná rizika uvádím dále, včetně případného alternativního (lepšího) řešení.

Význam slova Injektování není dle dohledaných zdrojů v češtině příliš ustálen, zejména co se oblasti ICT týče. Pro naše potřeby se jím rozumí umísťování originálního obsahu ze zdrojového místa ve formě identické kopie v cílovém místě.

Nyní k jednotlivým případům podrobněji.

Kopie vybraných tiskových zpráv na úvodní stránce webu

Představme si, že máme na webu sekci Tiskové zprávy, z nichž některé chceme rovněž zveřejnit na úvodní stránce webu (nebo kdekoliv jinde). Upřesněme, že se to netýká všech tiskových zpráv, ale jenom těch opravdu důležitých. Máme tedy příslušnou tiskovou zprávu dostupnou na relativním URL /media/tiskove-zpravy/jsme-firma-roku-2022, kterou chceme současně prezentovat na úvodní stránce. To učiníme jednoduše vložením následujícího Twig kódu do příslušného místa úvodní stránky:

<div class="press-release">{{ page.find('/media/tiskove-zpravy/jsme-firma-roku-2022').content|raw }}</div>

Aby kód fungoval, musí se nastavit zpracování Twigem na úrovni stránky. To platí i u další ukázky.

Nyní se budeme věnovat injektaci na úrovni stránky, tedy v rámci běžného obsahu. Zde záleží na tom, jak je stránka koncipována, tj. zda se jedná o stránku obsahovou, výpisovou nebo modulární.

V případě obsahové stránky umístíme kód do příslušného místa, kde potřebujeme, aby se objevil. A to je vše.

V případě výpisové stránky jsme limitováni šablonou stránky, která stránku zpracovává. Její obsah tvoří obvykle kolekce odkazující na podstránky, resp. na jiný výpis dle nastavených kritérií. Pokud umístíme do výpisové stránky příslušný kód, dá se předpokládat, že se téměř vždy zobrazí nahoře stránky, tedy nad výpisem podstránek, ale mohou existovat i šablony, které obsah výpisové stránky zpracují až po výpisu podstránek, či jej dokonce nemusí zobrazit vůbec. Možné řešení tohoto omezení je prezentováno ve třetím příkladu Společný obsah na více stránkách, ale neovlivňuje pouze jednu stránku, ale všechny stránky, které jsou zpracovávány stejnou šablonou stránky. Nicméně nám nic nebrání si udělat i více šablon stránek, ale už je to o větších znalostech.

V případě modulární stránky umístíme kód do modulu, což není nic jiného než speciální typ stránky, který si modulární stránka převezme a začlení do svého obsahu. Zde je pouze třeba použít modul, který je určený pro zobrazení textu.

Element <div> ani selektor class nejsou povinné, záleží, jaké jsou další nároky na případné formátování injektovaného obsahu v cílovém místě.

Pokud se v injektovaném obsahu nezobrazují obrázky nebo nefungují odkazy, je třeba je relativně upravit vůči kořenu stránek, tedy místo ![Firma roku 2022](fotografie-firma-roku-2022) je ve zdrojovém souboru potřeba zadat ![Firma roku 2022](/media/tiskove-zpravy/jsme-firma-roku-2022/fotografie-firma-roku-2022). Cesta pak bude funkční jak ve zdrojové, tak v cílové stránce.

V tomto případě použití injektace nedává vzniknout duplicitnímu obsahu v pravém slova smyslu. Nicméně je na zváženou, zda uvedené neřešit jiným způsobem, např. heslovitou upoutávkou, doplněnou jednou až dvěma větami, odkazující na příslušnou tiskovou zprávu. Naším cílem však bylo demonstrovat, že zde tato možnost je. Alternativně lze použít třeba pro prezentaci vedoucího zaměstnance v záhlaví jednotlivých oddělení společnosti, za která zodpovídá. Další případy z praxe vás jistě napadnou.

Identický obsah na více stránkách

V samotném úvodu od tohoto řešení odrazuji, ale je realizovatelné. Představme si, že máme výpis klíčových pracovníků společnosti umístěný na relativním URL /profil/zamestnanci a jedním z těchto zaměstnanců je tiskový mluvčí, jehož profil je na URL /profil/zamestnanci/jan-novak. Chceme, aby byl ale současně dostupný i na URL /media/tiskovy-mluvci. To docílíme umístěním následujícího Twig kódu do příslušného místa cílové stránky:

<div class="person">{{ page.find('/profil/zamestnanci/jan-novak').content|raw }}</div>

V tomto případě se již jedná o reálnou duplicitu obsahu, která je z různých důvodů problematická. Pokud však na uvedeném řešení trváme, pak je třeba alespoň nastavit jednotnou kanonickou cestu primární stránky. Uvedenému jsme se věnovali již v článku o Drobečkové navigaci.

Daleko vhodnější a podstatně jednodušší řešení je v tomto případě použít přepisy cest. Máme na výběr dvě možnosti. Jednak přesměrování, které zajistí po zadání odkazu, resp. po kliknutí na odkaz /profil/zamestnanci/jan-novak, přesun na jiný URL, např. /media/tiskovy-mluvci. Nebo routování, které pod sekundární URL /media/tiskovy-mluvci „podstrčí“ primární URL /profil/zamestnanci/jan-novak, resp. jeho obsah, přičemž v tomto případě o existenci sekundárního URL /media/tiskovy-mluvci nemáme ponětí, neboť se v navigaci zobrazuje jako URL /profil/zamestnanci/jan-novak.

Přepisy cest jsou samostatným tématem, kterému se budu věnovat v samostatném příspěvku, což dlouhodobě avizuji v námětech. Pro případné zájemce přidávám odkazy na články Drobečková navigace aneb kudy zpátky domů a Hlavní navigační nabídka aneb dynamické rozbalovací menu, které se problematice přepisů cest věnují alespoň okrajově.

Předchozí dvě ukázky, tedy Kopie vybraných tiskových zpráv na úvodní stránce webu a Identický obsah na více stránkách by bylo možné realizovat prostřednictvím shora uvedeného doplňku PageInject, ale to si ukážeme až někdy příště.

Společný obsah na více stránkách

Poslední příklad má několik mírných odlišností od předchozích dvou. Předně jeho prostřednictvích chceme ovlivnit více stránek najednou, nebudeme tedy vkládat Twig kód do jednotlivých stránek, ale přímo do šablony stránky, která je zpracovává. Dále primárně nebudeme používat obsah z jiné dostupné stránky, ale použijeme obsah z nezveřejněné stránky. A poslední podstatný rozdíl je v tom, že se jedná o doprovodný obsah. Polemiku ohledně duplicitních údajů na stránkách ponechám nyní zcela stranou, neboť je v tomto případě činěna zcela záměrně.

Představme si, že chceme za každý příspěvek Blogu umístit informaci o autorských právech. Současně chceme mít možnost tuto informaci v případě potřeby operativně upravovat. Vytvoříme tedy novou stránku Společný obsah (na názvu nezáleží, nikde se neobjevuje) na URL /skryte/spolecny-obsah a naplníme ji obsahem, který budeme chtít publikovat v šabloně. Stránce nastavíme vlastnost published: false (Záložka Možnosti => Stránka Zveřejněná: Ne). Na potřebné místo v šabloně stránky, resp. v její části, v tomto případě v souboru /templates/partials/blog-item.html.twig vložíme následující Twig kód:

<div class="shared-content">{{ page.find('/skryte/spolecny-obsah).content|raw }}</div>

Ten nám zajistí výpis požadovaného obsahu v závěru každého příspěvku. Ukázku můžete vidět na konci tohoto článku, ale i všech ostatních příspěvků tohoto Blogu, kde je rámeček s informacemi ohledně kontaktování autora z důvodu opravy objevených chyb nebo zapojení se do diskuze k tématu.

Na stejném principu funguje i textový widget Kam dál v postranním panelu.

Závěrem dodávám, že uvedený kód ve všech třech případech předává pouze obsah, vše ostatní včetně názvu stránky je ignorováno. Naposledy zde uvedu doplněk PageInject, který umí předat i název stránky, resp. celou zformátovanou stránku, ale jak jsem již uvedl, zaslouží si zcela samostatný článek.

Článek opět není vyčerpávající, určitě vás napadnou i další praktická použití, která mohou být i více relevantní. Jeho cílem bylo poukázat na případné možnosti „podsouvání“ primárního obsahu do jiných stránek, resp. částí webu.

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