II. diel – Tvoríme design

Každý web je vo svojej hlavnej podstate vytvorený z nejakého designu – teda vizuálnej časti – a z obsahu, teda textovej časti. Ale čo by som tu ja písal o základoch? Poďme sa pozrieť na to, ako spraviť nejaký ten design, alebo ako použiť hotový HTML template, ktorý ste kúpili napríklad na themeforest-e.Ja osobne som sa rozhodol, že celé demo (inak na stránke october.snipi.sk) budem robiť ako samostatnú stránku, venujúcu sa práve tvorbe templatov a pluginov pre October CMS. Takže som si kúpil pekný template, ktorý nasadím na danú stránku, pričom popri tom budem opisovať, čo a ako.

Hlavný je design

Takže… Zo zakúpeného designu si treba poriadne pozrieť, ako je design robený. Ktoré časti sa opakujú a môžu byť teda riešené ako partial-y, ktoré sú dynamické a budú teda riešené ako moduly a čo všetko vlastne bude náš web obsahovať, či ako sa bude správať. Keďže samotný October CMS nemá vo svojej podstate nič, okrem tvorby stránok a všetkých riadiacich prvkov (odosielanie mailov, práca s databázou a pod.), tak si veci ako články blogu a tak podobne, môžeme buď sami naprogramovať a urobiť teda „plugin“, alebo si takýto plugin – už hotový – môžeme nainštalovať, alebo kúpiť.

Keďže ja som si už template kúpil, prezrel a tak podobne, tak som dospel k záveru, že budem tvoriť nasledovné časti:

  • Hlavička webu (globálna)
  • Hlavná navigácia (a mobilná)
  • Podnavigácia
  • Newsletter form
  • Pätička

Keďže ide už o hotový design a idem ho dynamizovať, tak všetky potrebné veci ako CSSka, JS-ka a podobne už existujú. Ak by ste však iba „sucho“ skopírovali celé HTML, zistili by ste, že sa vám žiadne CSS nenačítalo, resp. by ste museli porušiť štruktúru adresárov, aby ste si to vedeli rozbehať. Samozrejme však existuje spôsob, ako sa dopracovať k správnemu výsledku.

Všetko je o cestách k súborom

NastaveniaTreba si uvedomiť, aká je štruktúra webu a adresárov. Celý template (tému) môžete nájsť v zložke themes. V nej by ste mali mať aj svoju vlastnú. Tú si dokážete vytvoriť veľmi jednoducho. Ide o krok, ktorý som v úvode vynechal, práve preto, že som ho chcel uviesť tu, keďže chceme začínať od nuly. Takže. V prvom rade sa musíte prihlásiť a ísť do sekcie nastavení (Settings v hornej navigácii).

Následne sa Vám zobrazí sidebar s rozšírenými možnosťami, kde máte možnosť vidieť nastavenia pre CMS, SYSTÉM, EMAILY, LOGY a podobne. Nás však zaujíma Front-end themečo je teda téma pre front-end.

03_blank

Mala by sa vám zobraziť defaultná téma „Demo“, ktorá sa inštaluje pri voľbe „From scratch“. Tá nás teraz ale skutočne nebude zaujímať, keďže my si chceme zdynamizovať template, čo už máme hotový. Takže si zvolíme „Create new blank theme“. Toto tlačítko sa postará o to, že sa vám zobrazí modálne okno, v ktorom si vyplníte základné údaje o vašom template – resp. téme.

Ja osobne idem dať na môj october template z themeforest-u s názvom Canvas. Bude to veselé, keďže ide o fakt veľmi robustný template, ktorý obsahuje množstvo prvkov, ale práve to je to, čo som potreboval na to, aby som urobil skutočne dobrý seriál.02_themes

Prejdime už ale k samotnej tvorbe. Ja si ponechám template, ktorý som si vytvoril, pričom neskôr si ukážeme, ako vieme danú tému robiť aj priamo v filesystéme bez tohto modálneho okna.

Rozdelenie templatu na partialy – linkovanie

Ako som písal v úvode, budem template rozsekávať na časti, ktoré sú všade rovnaké a teda na partialy. Ako prvé si spravím hlavičku a pätičku, nakoľko v nich máme linkovania na CSS a JSka, pričom si kážeme ako vlastne fungujú linkovania. Twig má totiž špeciálne filtre, ktoré menia vložený atribút podľa poreby. Napríklad:

V hlavičke budeme používať CSS štýly, ktoré sú v adresári css, ktorý sa nachádza v themes/nazov_temy … teda themes/nazov_temy/css …. Template však obsahuje linkovanie na css/style.css. Aby sme nemuseli všade písať ešte aj adresár themes a názov aktuálnej témy, použijeme filter |theme, ktorý sa postará o prepis danej adresy na adresu do adresáru aktuálnej témy.

Preto:

<link rel="stylesheet" href="css/layout.css" type="text/css">

Upravíme na:

<link rel="stylesheet" href="{{ 'css/layout.css'|theme }}" type="text/css">

Ako máte možnosť vidieť, použil som zobáčikové zátvorky a pôvodnú cestu som uzavrel do apostrovov, pričom som použil pipu a doplnil theme. Výsledkom je:

<link rel="stylesheet" href="http://october.snipi.sk/themes/snipisk-october/css/layout.css" type="text/css">

Keďže kupované templaty poväčšinou majú v sebe hneď niekoľko CSS štýlov, alebo javascriptov, môžete použiť aj zápis, ktorý vo svojej podstate vo finále skombinuje všetky súbory. To znamená, že tento pôvodný zápis:

	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/dark.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
	<link rel="stylesheet" href="css/animate.css" type="text/css" />
	<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
	<link rel="stylesheet" href="css/responsive.css" type="text/css" />

Môžete nahradiť:

	<link rel="stylesheet" href="{{ [ 
	    'css/bootstrap.css',
	    'css/style.css',
	    'css/dark.css',
	    'css/font-icons.css',
	    'css/animate.css',
	    'css/magnific-popup.css',
	    'css/responsive.css'
	    ]|theme }}" type="text/css" />

Čoho výsledkom bude jeden jediný riadok, v ktorom budú skombinované a minifikované všetky CSS štýly v zozname (arrayi) a teda výsledkom bude súbor s cestou do adresáru s témou (templatom):

<link href="http://october.snipi.sk/combine/d454b38b671dd0fdf8216fb6d877cb58-1449871727" rel="stylesheet">

Nie je to úžasné? Tiež si myslím, že áno. Rovnako to funguje aj pri kombinovaní súborov javascriptov, takže v pätičke spravím presne to isté, ibaže tento krát dostanem ako výsledok scripts.js.

Ostatné filtre a ich použitie

Twig ako taký má ešte filtre |app, |page, |media, |md, |raw a |default.

|app ~ filter, pomocou ktorého môžete vytvárať linky v navigácii. Tento filter sa stará o preklad relatívnej cesty na cestu do „public“ zložky vášho webu, teda na webroot.
|page ~ je filter, pomocou ktorého môžete vytváriť linky na stránky, pričom v tomto prípade môžete používať aj parametre, ktoré chcete do danej stránky poslať. K tomu sa ešte vrátime v inej časti.

|media ~ tento filter sa stará o prelinkovanie súboru na jeho reálne umiestnenie. Ak napríklad cez media manažér nahráte súbor logo.jpg a v template použijete {{ ‚logo’|media }}, filter sa postará o preklad cesty k umiestneniu súboru. Často ide o zložku storage, ktorá má svoje vlastné pravidlá a generujú sa v nej automaticky podadresáre, takže by ste manuálne daný súbor hľadali len ťažko.

|md ~ je filtrer pre tzv. markdown. Ak poznáte tento spôsob písania a formátovania textu, potom napríklad tento kód

{{ '**Text** je tučný.'|md }}

bude vo finále vygenerovaný a prekonvertovaný na

<strong>Text</strong> je tučný.

|raw ~ by sme teoreticky mohli prirovnať aj k jedlu. To znamená, že ak RAW FOOD je prírodné jedlo bez úprav, tak string (napríklad HTML) bude vyparsované rovnako ako html, bez ošetrovania výstupu a html encodingu.

|default ~ už možno z názvu značí, čo asi bude robiť. Ak ho použijeme na {{ variable|default(‚Neexistujúca alebo prázdna hodnota‘) }} tak v prípade že variable bude prázdne, použije sa defaultná hodnota.

Pridaj komentík

Táto webová stránka používa Akismet na redukciu spamu. Získajte viac informácií o tom, ako sú vaše údaje z komentárov spracovávané.