Začínáme tvořit v TYPO3 🛠️✨
Začínáme základy šablonování stránek! Protože pracuji s TYPO3, bude jádro kódu založeno na šablonách Fluid (je to jako HTML, ale rozšířeno o určité schopnosti). Pro CSS budu používat Tailwind a o interaktivitu se postará moje oblíbená JS knihovna Alpine.js. Začínáme!
Nejprve jsem pomocí TypoScriptu nastavil objekt stránky tak, aby používal šablony Fluid, a definoval cesty pro šablony, rozvržení a jednostlivé části. Moje obvyklá struktura stránky vypadá takto:
<body><header></header><main></main><footer></footer></body>
Je to jednoduché, že? Protože používám Tailwind (který brzy nastavím), je snadné udržet patičku ve spodní části stránky. Stačí přidat tyto třídy:
<body class="flex flex-col min-h-screen"><main class="flex-grow">
Toto nastavení zajišťuje, že se hlavní část obsahu (main) roztáhne na výšku, takže záhlaví, hlavní část obsahu a zápatí vždy zaberou celou obrazovku.
Přejdeme k frontendu: CSS a JavaScript
Protože většinu moderních knihoven lze nainstalovat přes npm, používám ho i pro tento projekt. V adresáři Resources/Private jsem vytvořil složku „Build“, do které budu ukládat všechna nastavení npm, a sestavený výstup půjde do Resources/Public. Soubory CSS a JS pak zahrnu do TYPO3 pomocí funkcí includeJS nebo includeCSS v TypoScriptu. Pro JS přidám atribut defer, takže se skripty nespustí okamžitě, ale počkají, až bude zbytek stránky připraven - jedna z výhod Alpine.js!
Dále jsem přidal první meta tag, tag viewport, abych zajistil, že text nebude na mobilních zařízeních malý. Zde je kód TypoScriptu:
page.meta.viewport = width=device-width, initial-scale=1
Tento kód vytvoří HTML tag: <meta name="viewport" content="width=device-width, initial-scale=1">.
Vytvoření záhlaví stránky
Malý tip na okraj: při nastavování šířky obsahu v TYPO3 rád vytvářím partials ContentWidth.html s několika oddíly pro různé šířky. Zde je příklad:
<f:section name="wide">
w-full max-w-[1440px] mx-auto</f:section><f:section name="wideXspacing">
<f:render section="wide" /> px-6</f:section><f:section name="slim">
w-full max-w-[724px] mx-auto</f:section><f:section name="slimXspacing">
<f:render section="slim" /> px-6</f:section>
Díky tomuto nastavení mohu snadno ovládat šířku obsahu. Níže je příklad, jak ji aplikuji v záhlaví:
<header>
<div class="{f:render(section: 'wideXspacing', partial: 'ContentWidth')}">HEADER CONTENT
</div></header>
Ošetřování chyb
Pro snadnější budoucí změny používám v TypoScriptu konstanty pro nastavení hlavních cest a ID stránek. Například takto mohu odkazovat na domovskou stránku:
<f:link.typolink parameter="{f:cObject(typoscriptObjectPath: 'lib.pids.home')}">Home</f:link.typolink>Narazil jsem však na chybu frontendu, která nebyla příliš čitelná. Pro zobrazení úplných chybových hlášení (pouze ve stagingu nebo lokálním prostředí, nikdy ne v produkci - až na seo-saura) jsem přidal tento TypoScript:
config.contentObjectExceptionHandler = 0Tip pro usnadnění přístupu
Někteří uživatelé používají čtečky obrazovky, takže dobře strukturovaná stránka je nezbytná. Jednou z užitečných funkcí je odkaz „přeskočit na obsah“, který uživatelům umožňuje obejít navigaci. Stačí umístit kotvu na začátek stránky, ale myslete na vyhledávače. Zde je příklad:
<a href="#skip" aria-label="přeskočit na obsah" title="přeskočit na obsah"></a>Tímto způsobem je odkaz dostupný, ale nenarušuje SEO.
Co je NPM?
npm (Node Package Manager) je nástroj pro správu balíčků a závislostí jazyka JavaScript. Běžně se používá s Node.js k instalaci, aktualizaci a správě knihoven nebo frameworků potřebných při vývoji webu. npm umožňuje vývojářům rychle přidávat funkce do svých projektů prostřednictvím opakovaně použitelných balíčků z rozsáhlého registru. Je také užitečný pro správu verzí, automatizaci úloh a správu konfigurací projektu v různých vývojových prostředích.