Jednotlivě upravte šablony HTML sekcí

Požadavky a cíl tutoriálu

Potřebuješ přístup k HTML editoru a správci souborů bluetronix CMS, stejně jako odpovídající vývojářská práva pro složku se šablonami. V tomto tutoriálu se naučíš, jak přizpůsobit existující části stránek, vytvořit vlastní HTML sekční šablony a nabídnout svým redaktorům v případě potřeby pouze schválené šablony.

Pracujeme s příkladovými šablonami Clients a Banner. Standardní soubory zůstávají nezměněny; individuální změny se provádějí pomocí označení _own.

1. Najděte šablony sekcí v editoru

Otevři existující CMS stránku, zvol Upravit a otevři výběr šablon přes Vložit → Část stránky. Kontextové menu také nabízí položku Textový blok pro menší opakovaně použitelné obsahy. Tento tutoriál se nejprve zabývá částmi stránek.

V okně Část stránky se zobrazí dostupné šablony s náhledem. 

Jako příklad zvol kategorii Clients. K dispozici je několik variant rozložení.

2. Kde jsou šablony uloženy

Šablonové soubory leží ve vývojářské složce /bx_Layout/. Otevři v správci souborů tuto složku. Najdeš tam mimo jiné soubory pro části stránek (Section*.txt) a textové bloky (Tag*.txt).

Název souboru určuje přidružení k výběru šablon. Šablona části stránky vždy začíná na Section; za tím následuje její individuální název. Pro vlastní varianty se před příponu souboru používá dodatek _own.

Můžeš také vytvořit zcela novou šablonu. Pro ni zvolíš vlastní název za Section. Pokud neexistuje soubor se stejným názvem, nová šablona se objeví navíc, místo aby nahradila existující šablonu.

3. Proč byste neměli přímo upravovat standardní soubory

Standardní soubory dodávané s CMS z /bx_Layout/ budou při systémových aktualizacích přepsány. Změny přímo v SectionClients.txt nebo SectionBanner.txt proto nejsou trvalé. Zkopíruj požadovaný standardní soubor a označ svou verzi pomocí _own. Příslušné _own varianty jsou určeny pro tvoje individuální, aktualizacím odolné úpravy.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Pokud existují oba soubory, CMS použije odpovídající SectionClients_own.txt místo standardní šablony SectionClients.txt. Pro to není nutné přejmenovávat kategorii Clients v editoru.

Pokud však vytvoříš vlastní soubor pod novým názvem, například SectionMyTemplate_own.txt, standardní šablona Clients zůstane také k dispozici.

4. Struktura HTML šablony sekce: oddělovač

Soubor sekce může obsahovat více variant rozložení téže kategorie. Aby editor CMS rozpoznal jednotlivé varianty, jsou odděleny následujícím oddělovačem:

<!--__SP_SectionTemplate__-->

Oddělovač je na začátku, mezi variantami a na konci příkladového souboru. Přijmi psaní přesně. Pokud oddělovač chybí, editor nemusí správně zobrazit více variant jako oddělené volby.

Standardní šablona SectionBanner.txt ukazuje tento princip s několika různými návrhy bannerů. Můžeš ji použít jako základ pro vlastní jednoduše strukturovanou sekci.

<!--__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__-->

Příklad je úplnou variantou banneru. Pro druhou variantu vlož její HTML kód za poslední oddělovací značku a tuto variantu opět uzavři stejnou značkou. Skutečnou sekci můžeš následně navrhnout podle svých požadavků.

Třídu sectionAll nemusíš doplňovat sám: Editor bluetronix ji automaticky přidává při vkládání sekce stránky.

5. Zkopírujte šablonu klienta a změňte název

Otevři existující šablonu SectionClients ve správci souborů a podívej se na její HTML kód. V našem příkladu obsahuje nadpis, popis a několik dlaždic partnerů.

Zkopíruj odpovídající šablonu jako SectionClients_own.txt a otevři kopii přes Upravit. Přidej do nadpisu pro náš test řetězec NEW!!!!. Také můžeš individuálně změnit text, počet karet, symboly nebo CSS.

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

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

Klikni na Uložit a poté znovu otevři výběr Vložit → Sekce stránky → Klienti. Tam poznáš svou vlastní verzi podle změněného nadpisu. Druhou variantu klientů lze vybírat a upravovat nezávisle na tom.

6. Nabídněte vlastní šablonu pod novým názvem

Místo souboru se stejným názvem můžeš také vytvořit samostatnou šablonu. Zkopíruj například variantu klientů a ulož ji jako SectionMyTemplate_own.txt. Část za Section je vlastní název šablony; ten určuje novou volbu v editoru. Původní šablona Klienti nebude nahrazena jiným názvem.

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

Tak můžeš vyvinout pevné sekce pro určité typy stránek pro klienta, aniž bys musel měnit obsah všech dodaných šablon.

7. Zobrazujte pouze vlastní šablony pomocí Only_own.txt

Pokud má koncový zákazník používat pouze tvé schválené šablony, vytvoř v adresáři /bx_Layout/ soubor flag Only_own.txt. Podle zobrazené konfigurace šablon budou v nabídce šablon nabízeny pouze odpovídající vlastní soubory s příponou _own. Tento soubor pro tuto funkci nevyžaduje žádný HTML kód.

/bx_Layout/Only_own.txt

Příklad: Pokud jsou v adresáři SectionClients.txt, SectionBanner.txt a SectionMyTemplate_own.txt, měl by výběr po aktivaci tohoto nastavení obsahovat pouze odpovídající vlastní šablonu. Tímto způsobem můžeš zákazníkovi poskytnout zaměřený, projektově specifický výběr.

8. Vytvořte vlastní šablony tagů pro textové prvky

Tentýž princip _own platí pro menší Textové bloky. Jejich soubory začínají s Tag. Z TagTemplate.txt se například stane TagTemplate_own.txt. Tuto variantu můžeš nabídnout prostřednictvím položky Textový blok v editoru.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplikujte editovatelné sloupce s colAll

Pokud sekce obsahuje více opakovatelných sloupců, může být sloupec s třídou colAll rozpoznán jako samostatný blok. Tak je v kontextovém menu k dispozici funkce Sloupec článku → Duplikovat.

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

Při duplikaci je daný blok vložen jako druhý sloupec. Pro opakovatelnou kartu nebo sloupec článku musíš colAll umístit do správného kontejneru. Nadřazená třída sectionAll je oproti tomu automaticky poskytována editorem.

10. Textové značky a víc jazykové šablony

Poskytované standardní sekce obsahují v příkladových textech znakovou řetězec ­, například před a za nadpisy. Tyto textové značky bys neměl zaměňovat s oddělovací značkou <!--__SP_SectionTemplate__-->. Při kopírování existujících šablon je dobré tyto označení CMS nejprve zachovat, pokud má být chování editoru nadále stejné.

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

V vícejazyčných projektech mohou být další překladové značky užitečné, aby redaktoři mohli správně spravovat obsah v požadovaných jazycích. CMS bluetronix je navrženo pro 24 jazyků. Pro jednoduchou, pouze jednajazyčnou projektovou šablonu můžeš zbytečné další překladové značky vynechat; oddělovací značky potřebné pro editor musí zůstat.

11. Vlastní funkce a potřebné zahrnutí

Pokud rozšiřuješ šablonu o PHP funkce nebo modulární výstupy, používej pro vlastní funkce jednoznačné názvy. Již existující funkce nesmí být znovu deklarovány pod stejným názvem. Deklaraci můžeš například zajistit pomocí function_exists():

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

Potřebné includes by měly být zahrnuty alespoň jednou na sekci. Odpovídající include značka může být zkopírována z editoru:

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

Interní šablonové soubory s koncovkami .txt nebo .bx nejsou v popsané konfiguraci CMS serveru určeny pro přímé vyžádání přes veřejné HTTP-/HTTPS-URL. Jsou čteny a zpracovávány na straně serveru.

12. Proč jsou omezené šablony pro redakční týmy smysluplné

S vlastními sekcemi a Only_own.txt určuješ, které hotové bloky rozložení může koncový zákazník vybrat. Navíc je možné v uživatelských nastaveních omezit funkce editoru, jako je změna písma nebo barev. Redaktoři pak mohou zejména vkládat předem dané sekce, upravovat texty a vyměňovat obrázky, aniž by museli volně přestavovat stanovený design stránky.

Tento způsob práce je obzvláště vhodný pro větší projekty zákazníků, firemní portály a týmy s několika redaktory. Zpracování zůstává jednotné, zatímco obsah může být spravován flexibilně.

13. Výsledek a shrnutí

Otevřeš /bx_Layout/, zkopíruješ existující soubor sekce, přidáš _own, upravíš HTML kód a ověříš výstup pod Vložit → Sekce stránky. Pro nové kategorie výběru použiješ vlastní název souboru, který začíná Section.

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

Pokud navíc aktivuješ Only_own.txt a odpovídajícím způsobem omezíš práva editoru, mohou tvoji redaktoři cíleně pracovat s poskytnutými vlastními HTML šablonami sekcí.