Individuálne prispôsobte HTML sekcie šablón

Požiadavky a cieľ tutoriálu

Potrebujete prístup k HTML editoru a správcovi súborov systému bluetronix CMS, ako aj zodpovedajúce vývojárske práva pre priečinok so šablónami. V tomto tutoriáli sa naučíte, ako prispôsobiť existujúce sekcie stránok, vytvoriť vlastné HTML sekčné šablóny a ponúknuť svojim redaktorom len schválené šablóny, ak to bude potrebné.

Pracujeme so vzorovými šablónami Klienti a Banner. Štandardné súbory zostávajú nezmenené; individuálne zmeny sa robia pomocou označenia _own.

1. Nájdite šablóny sekcií v editore

Otvor existujúcu stránku CMS, vyber Upraviť a otvorte výber šablón cez Vložiť → Sekcia stránky. Kontextové menu tiež ponúka položku Textový blok pre menšie opakovateľné obsahy. Tento tutoriál sa najprv zaoberá sekciami stránok.

V okne Sekcia stránky sa zobrazia dostupné šablóny s náhľadom. 

Ako príklad vyberte kategóriu Klienti. K dispozícii je niekoľko variantov rozloženia.

2. Kde sú šablóny uložené

Súbory šablón sa nachádzajú v priečinku pre vývojárov /bx_Layout/. Otvorte v Správcovi súborov tento priečinok. Nájdete tam súbory pre sekcie stránok (Section*.txt) a textové bloky (Tag*.txt).

Názov súboru určuje priradenie k výberu šablón. Šablóna sekcie stránky vždy začína s Section; následne nasleduje jej individuálny názov. Pre vlastné varianty sa pred koncovkou súboru používa prípon _own.

Môžete tiež vytvoriť úplne novú šablónu. Pre ňu si vyberáte vlastný názov za Section. Ak neexistuje žiadny súbor s rovnakým názvom, nová šablóna sa zobrazí navyše, namiesto toho, aby nahradila existujúcu šablónu.

3. Prečo by ste nemali priamo upravovať štandardné súbory

Štandardné súbory dodávané s CMS z /bx_Layout/ budú pri aktualizáciách systému prepisované. Zmeny priamo v SectionClients.txt alebo SectionBanner.txt preto nie sú trvalé. Skopírujte požadovaný štandardný súbor a označte vlastnú verziu s _own. Pridružené _own varianty sú určené pre vaše individuálne, aktualizáciám odolné úpravy.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Ak existujú oba súbory, CMS použije vhodný SectionClients_own.txt namiesto štandardnej šablóny SectionClients.txt. Pre to nemusíte premenovávať kategóriu Klienti v editore.

Naopak, ak vytvoríte vlastný súbor s novým názvom, napríklad SectionMyTemplate_own.txt, štandardná šablóna Klienti zostáva tiež k dispozícii.

4. Štruktúra HTML šablóny sekcie: oddelujúca značka

Sekčný súbor môže obsahovať viacero variantov rozloženia tej istej kategórie. Aby editor CMS rozpoznal jednotlivé varianty, od seba sa oddeľujú nasledujúcim oddelením:

<!--__SP_SectionTemplate__-->

Značka je na začiatku, medzi variantmi a na konci príkladového súboru. Preberte zápis presne. Ak chýba oddelovacia značka, editor nemusí zabezpečiť, aby jednotlivé varianty boli správne zobrazené ako oddelené možnosti.

Štandardná šablóna SectionBanner.txt ukazuje tento princíp s viacerými rôznymi rozloženiami bannerov. Môžeš ju použiť ako základ pre svoju vlastnú jednoducho vytvorenú sekciu.

<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
   <div class="container py-3">
      <div class="row align-items-center g-4">
         <div class="col-lg-8 wow fadeInLeft">
            <span class="badge text-bg-warning mb-3">&#x00AD;New&#x00AD;</span>
            <h2 class="mb-2">&#x00AD;Designed for everyday success&#x00AD;</h2>
            <p class="mb-0">&#x00AD;Explore practical solutions created to make everyday work easier, clearer and more effective.&#x00AD;</p>
         </div>
         <div class="col-lg-4 text-lg-end wow fadeInRight">
            <a href="#"><button class="btn btn-light btn-lg">&#x00AD;Learn more&#x00AD;</button></a>
         </div>
      </div>
   </div>
</Section>
<!--__SP_SectionTemplate__-->

Príklad je úplná varianta banneru. Pre druhú variantu umiestni jej HTML kód za poslednú oddeľovaciu značku a tiež túto variantu ukonči tou istou značkou. Skutočnú sekciu môžeš následne prispôsobiť podľa svojich požiadaviek.

Triedu sectionAll nemusíš dopĺňať sám: Editor bluetronix ju pri vkladání časti stránky automaticky pridá.

5. Skopírujte šablónu klienta a zmeňte nadpis

Otvorte existujúcu šablónu SectionClients v správci súborov a pozri si ich HTML kód. V našom príklade obsahuje nadpis, popis a niekoľko partnerových dlaždíc.

Kopírujte príslušnú šablónu ako SectionClients_own.txt a otvorte kópiu prostredníctvom Úpravy. Pridajte do nadpisu pre náš test reťazec NEW!!!!. Môžeš tiež individuálne zmeniť text, počet kariet, ikony alebo CSS.

<!-- Vorher -->
<h2>&#x00AD;Trusted by growing organizations&#x00AD;</h2>

<!-- Nachher in SectionClients_own.txt -->
<h2>&#x00AD;NEW!!!! Trusted by growing organizations&#x00AD;</h2>

Kliknite na Uložiť a následne znova otvorte výber Vložiť → Sekcia → Klienti. Tam poznáš svoju vlastnú verziu podľa zmeneného nadpisu. Druhá varianta klientov sa môže nezávisle vyberať a upravovať.

6. Ponúknite vlastnú šablónu pod novým menom

Môžeš namiesto rovnomennej náhradnej súboru vytvoriť aj samostatnú šablónu. Napríklad skopíruj jednu variantu klientov a ulož ju ako SectionMyTemplate_own.txt. Časť za Section je vlastný názov šablóny; tento určuje nový výber v editore. Pôvodná šablóna Klienti nebude pri iných názvoch nahradená.

SectionClients.txt          → Standard: Clients
SectionClients_own.txt      → eigene Version von Clients
SectionMyTemplate_own.txt   → zusätzliche eigene Vorlage MyTemplate

Takto môžeš vyvíjať pevné sekcie pre konkrétne typy stránok pre klienta bez nutnosti meniť obsah všetkých dodávaných šablón.

7. Zobrazte iba vlastné šablóny pomocou Only_own.txt

Ak má konečný zákazník používať iba tvojmi schválené šablóny, vytvor v priečinku /bx_Layout/ súbor s názvom Only_own.txt. Podľa zobrazených konfigurácií šablón budú ponúkané výlučne vhodné vlastné súbory s prídavkom _own v ponuke šablón. Tento súbor na túto funkciu nepotrebuje HTML kód.

/bx_Layout/Only_own.txt

Príklad: Ak sú v adresári SectionClients.txt, SectionBanner.txt a SectionMyTemplate_own.txt, mala by ponuka po aktivácii tohto nastavenia obsahovať iba vhodnú vlastnú šablónu. Takto môžeš poskytnúť klientovi cielený, projektovo zameraný výber.

8. Vlastné šablóny tagov pre textové bloky

Rovnaký princíp _own platí aj pre menšie textové bloky. Ich súbory začínajú s Tag. Z TagTemplate.txt sa napríklad stáva TagTemplate_own.txt. Túto variantu môžeš sprístupniť prostredníctvom položky Textový blok v editore.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplicujte editovateľné stĺpce s colAll

Ak sekcia obsahuje viacero opakovaných stĺpcov, môže byť jeden stĺpec s triedou colAll rozpoznaný ako samostatný blok. V kontextovom menu sa then nachádza funkcia Článok-Stĺpec → Duplicovať.

<div class="colAll col-md-6">
   <h2>&#x00AD;Hello world&#x00AD;</h2>
   <p>&#x00AD;Writing&#x00AD;</p>
</div>

Pri duplikovaní sa príslušný blok pridá ako druhý stĺpec. Pre opakovanú kartu alebo stĺpec článku musíš preto umiestniť colAll do správneho kontajnera. Nadriadená trieda sectionAll je na druhej strane automaticky pridaná editorom.

10. Textové značky a viacjazyčné šablóny

Poskytované štandardné sekcie obsahujú v rámci príkladových textov reťazec ­, napríklad pred a po nadpisoch. Tieto textové značky nie sú zamieňané s oddeľovacou značkou <!--__SP_SectionTemplate__-->. Pri kopírovaní existujúcich šablón by si mal takéto značky CMS najprv zachovať, ak chceš zachovať predchádzajúce správanie editora.

<h2>&#x00AD;Designed for everyday success&#x00AD;</h2>

Pri viacjazyčných projektoch môžu byť dodatočné prekladové značky užitočné, aby redaktori mohli spravovať obsah v potrebných jazykoch. CMS bluetronix je navrhnuté pre 24 jazykov. Pre jednoduchú, výlučne jednolingválnu projektovú šablónu môžeš zbytočné dodatočné prekladové značky vynechať; značky na oddelenia pre editor musia byť zachované.

11. Vlastné funkcie a požadované zahrnutia

Ak rozširuješ šablónu o PHP funkcie alebo modulárne výstupy, používaj pre vlastné funkcie jedinečné názvy. Existujúca funkcia nesmie byť znovu deklarovaná pod rovnakým názvom. Deklaráciu môžeš napríklad zabezpečiť pomocou function_exists():

if(!function_exists("MyTestFunction")) {
   function MyTestFunction($Test) {
      return $Test;
   }
}

Potrebné include by malo byť zahrnuté minimálne raz na sekciu. Zodpovedajúca značka include môže byť skopírovaná prostredníctvom editora:

<!--bxInclude--/bx_Mod/Blog_Detail-->

Interné súbory šablón s koncovkami .txt alebo .bx nie sú v opísanej konfigurácii CMS servera určené na priame volanie cez verejné HTTP-/HTTPS-URL. Čítajú sa a spracovávajú na serveri.

12. Prečo sú obmedzené šablóny pre redakčné tímy rozumné

S vlastnými sekciami a Only_own.txt určuješ, ktoré hotové layoutové bloky si môže konečný zákazník vybrať. Navyše je možné v užívateľských nastaveniach obmedziť funkcie editora ako zmenu písma alebo farby. Redaktori potom môžu hlavne vkladať predpísané sekcie, upravovať texty a vymieňať obrázky, bez toho, aby museli voľne meniť stanovený dizajn stránky.

Tento spôsob práce je obzvlášť vhodný pre väčšie projekty pre zákazníkov, firemné portály a tímy s viacerými redaktormi. Dizajn zostáva jednotný, zatiaľ čo obsah sa môže flexibilne spravovať.

13. Výsledok a zhrnutie

Otváraš /bx_Layout/, kopíruješ existujúci súbor sekcie, pridáš _own, upravíš HTML kód a skontroluješ výstup pod Vložiť → Sekcia. Pre nové výberové kategórie používaš vlastný názov súboru, ktorý začína Section.

SectionClients.txt
       ↓ kopieren
SectionClients_own.txt
       ↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
       ↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients

Ak navyše aktivuješ Only_own.txt a vhodne obmedzíš práva editora, môžu tvoji redaktori pracovať cielene s poskytnutými vlastnými HTML šablónami sekcií.