HTML szakasz sablonok egyedi kialakítása

A bemutató előfeltételei és célja

Hozzáférés szükséges a HTML-szerkesztőhöz és a Fájlkezelőhöz a bluetronix CMS-ben, valamint a megfelelő fejlesztői jogokkal a sablonmappához. Ebben a bemutatóban megtanulod, hogyan módosíthatod a meglévő oldal szakaszokat, hogyan hozhatsz létre saját HTML szakasz sablonokat, és szükség esetén hogyan kínálhatsz kiadott sablonokat a szerkesztőidnek.

A Kliensek és Bannerek példasablonokkal dolgozunk. A standard fájlok változatlanok maradnak; az egyéni módosításokat a _own jelölés révén végezzük.

1. Az oldal szakasz sablonok megtalálása a szerkesztőben

Nyisd meg egy meglévő CMS-oldalt, válaszd az Szerkesztés lehetőséget, és a Beszúrás → Oldal-szakasz menüpontra kattintva nyisd meg a sablonok kiválasztását. A helyi menü tartalmazza még a Szöveges blokk lehetőséget is a kisebb újrahasználható tartalmakhoz. Ez a bemutató elsőként az oldal szakaszokkal foglalkozik.

Az Oldal-szakasz ablakban a rendelkezésre álló sablonok előnézetével együtt jelennek meg.

Például válaszd a Kliensek kategóriát. Ott több elrendezési változat áll rendelkezésre.

2. Hol vannak a sablonok tárolva

A sablonfájlok a fejlesztői mappában találhatók: /bx_Layout/. Nyisd meg ezt a mappát a Fájlkezelőben. Itt találhatók többek között a szakaszfájlok (Section*.txt) és a szöveges blokkok (Tag*.txt) fájljai.

A fájlneve határozza meg a sablonok kiválasztásához való hozzárendelést. Egy oldal szakasz sablon mindig Section-nel kezdődik; ezt követi az egyedi neve. A saját változatoknál a fájlkiterjesztés előtt a _own kiegészítést használjuk.

Teljesen új sablont is létrehozhatsz. Ehhez saját nevet választasz a Section mögött. Ha nincs azonos nevű alapfájl, az új sablon kiegészítésként jelenik meg, a meglévő sablon helyett.

3. Miért ne szerkeszd közvetlenül a standard fájlokat

A CMS-hez szállított alapfájlok a /bx_Layout/ mappából rendszernaplófrissítéseknél felülíródnak. Közvetlen módosítások a SectionClients.txt vagy a SectionBanner.txt fájlokon ezért nem tartósak. Másold át a kívánt alapfájlt, és jelöld meg a saját verziód _own-nal. A hozzátartozó _own-változatok a te egyéni, frissítéstűrő módosításaidra szolgálnak.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Ha mindkét fájl létezik, a CMS a megfelelő SectionClients_own.txt fájlt használja az alap sablon SectionClients.txt helyett. Ehhez nincs szükséged az Clients kategória átnevezésére az editorban.

Ha viszont saját fájlt hozol létre új néven, például SectionMyTemplate_own.txt, az alap sablon Clients továbbra is elérhető marad.

4. HTML szakasz sablon felépítése: a határoló jelzés

Egy Section-fájl több elrendezési változatot is tartalmazhat ugyanazon kategóriából. Ahhoz, hogy a CMS-szerkesztő felismerje az egyes változatokat, az alábbi elválasztó jelöléssel kell őket elválasztani:

<!--__SP_SectionTemplate__-->

A jelölés az elején, a változatok között és a minta fájl végén áll. Használj pontosan ilyen írásmódot. Ha hiányzik az elválasztó jelölés, az editor nem tudja megbízhatóan külön választani a változatokat.

Az alap sablon SectionBanner.txt ezt az elvet mutatja be több különböző banner-elrendezéssel. Alapként használhatod saját egyszerűen felépített Section-hoz.

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

A példa egy teljes banner-változat. A második változathoz tedd az HTML kódját az utolsó elválasztójegy mögé, és zárd le ezt a változatot is ugyanazzal a jelöléssel. Az igazi Section-t ezután a követelményeid szerint alakíthatod.

A sectionAll osztályt nem szükséges önállóan kiegészíteni: A bluetronix-Editor automatikusan hozzáadja, amikor egy szakaszt beillesztesz.

5. Kliensek sablon másolása és a fejléc módosítása

Nyisd meg a meglévő SectionClients sablont a fájlkezelőben, és nézd meg az HTML kódját. Példánkban tartalmaz egy címet, egy leírást és több partnerkártyát.

Másold át a megfelelő sablont SectionClients_own.txt néven, és nyisd meg a másolatát a Szerkesztés menüpont alatt. A címhez a tesztünk érdekében add hozzá a NEW!!!! szöveget. Ugyanígy egyedileg változtathatod meg a szöveget, a kártyák számát, a szimbólumokat vagy a CSS-t.

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

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

Kattints a Mentés gombra, majd nyisd meg újra a Beszúrás → Szakasz → Kliensek menüpontot. Ott a megváltozott cím alapján ismered fel a saját verziódat. A második Clients-változat függetlenül is kiválasztható és szerkeszthető.

6. Saját sablon felajánlása új néven

Ha egy azonos nevű helyettesítő fájl helyett különálló sablont szeretnél létrehozni, akkor például másolj át egy Clients-változatot, és mentsd el SectionMyTemplate_own.txt néven. A Section mögötti rész a saját sablon neve; ez határozza meg az új választási lehetőséget az editorban. Az eredeti Clients sablon más névvel nem fog felülíródni.

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

Így rögzíthetők a konkrét szakaszok bizonyos oldaltípusokhoz egy ügyfél számára, anélkül hogy minden szállított sablont tartalmilag meg kellene változtatni.

7. Csak saját sablonok megjelenítése az Only_own.txt segítségével

Ha az end-user csak a saját jóváhagyott sablonjaidat használhatja, a /bx_Layout/ mappában hozz létre egy Flag-fájlt Only_own.txt néven. Az itt bemutatott sablonkonfiguráció szerint kizárólag a megfelelő saját fájlok, a _own kiegészítéssel fognak megjelenni a sablonválasztékban. Ehhez a funkcióhoz a fájlnak nincs szüksége HTML kódra.

/bx_Layout/Only_own.txt

Példa: Ha a SectionClients.txt, SectionBanner.txt és SectionMyTemplate_own.txt fájlok találhatók a könyvtárban, akkor ennek a beállításnak az aktiválása után a választás csak a megfelelő saját sablont tartalmazza. Így egy adott ügyfél számára célzott, projekt-specifikus választékot biztosíthatsz.

8. Saját címke sablonok a szöveges blokkokhoz

A _own elv ugyancsak érvényes a kisebb Szöveges építőelemek esetében. Ezek fájljai Tag-gal kezdődnek. A TagTemplate.txt például TagTemplate_own.txt lesz. Ezt a változatot a Szöveges építőelem bejegyzésen keresztül biztosíthatod az editorban.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Szerkeszthető oszlopok duplázása colAll-el

Ha egy szakasz több megismételhető oszloppal rendelkezik, akkor egy colAll oszlop önálló blokként ismerhető fel. Ezáltal a jobbklikk menüben elérhetővé válik a Cikk oszlop → Duplikálás funkció.

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

A duplikálás során a megfelelő blokk második oszlopként beillesztésre kerül. Ismétlődő kártyák vagy cikkoszlopok esetén a colAll-ot a megfelelő konténerre kell helyezned. A felette lévő sectionAll osztály viszont automatikusan az editorból származik.

10. Szövegjelölések és többnyelvű sablonok

A rendelkezésre álló alap Section-ek a példa szövegekben tartalmazzák a ­ karakterláncot, például a címek előtt és után. Ezek a szövegjelölések nem összetéveszthetők az elválasztó jelölővel <!--__SP_SectionTemplate__-->. Meglévő sablonok másolásakor a CMS-jelöléseket érdemes először megőrizni, ha a korábbi editor viselkedést meg akarod tartani.

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

Többnyelvű projektek esetén hasznos lehet további fordítási jelölések alkalmazása, hogy a szerkesztők a szükséges nyelveken karbantarthassák a tartalmakat. A bluetronix CMS 24 nyelvre van tervezve. Egyszerű, kizárólag egy nyelvű projekt sablon esetén elhagyhatod a nem szükséges további fordítási jelöléseket; a szerkesztő számára szükséges szakasz elválasztó jelöléseknek meg kell maradniuk.

11. Saját funkciók és szükséges includes

Ha egy sablont bővítesz PHP-funkciókkal vagy modulkimenetekkel, használj egyedi neveket a saját funkcióidhoz. Egy meglévő funkciót nem lehet még egyszer ugyanazzal a névvel deklarálni. A deklarációt például a function_exists() segítségével biztosíthatod:

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

A szükséges includes-okat legalább egyszer be kell illeszteni minden szekcióba. Ehhez használhatod az editor által másolható include-jelölőt:

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

A belső sablonfájlok, amelyek .txt vagy .bx végződéssel rendelkeznek, a leírt CMS-szerverkonfigurációban nem érhetők el közvetlenül nyilvános HTTP-/HTTPS-URL-eken keresztül. Ezeket a szerveren olvassák és dolgozzák fel.

12. Miért van értelme a korlátozott sablonoknak a szerkesztői csapatok számára

Saját szekcióiddal és Only_own.txt fájloddal meghatározhatod, hogy a végfelhasználó mely kész layout elemeket választhatja. Továbbá a felhasználói beállításokban az editor funkciók, mint például a betűtípus- vagy színváltás is korlátozható. A szerkesztők elsősorban előre megadott szakaszokat tudnak beilleszteni, szövegeket szerkeszteni és képeket kicserélni anélkül, hogy a meghatározott oldal dizájnt szabadon módosítaniuk kellene.

Ez a munkamódszer különösen nagyobb ügyfélprojektekhez, vállalati portálokhoz és több szerkesztőt foglalkoztató csapatokhoz alkalmas. A megjelenés egységes marad, míg a tartalom rugalmasan karbantartható.

13. Eredmény és összegzés

Megnyitod a /bx_Layout/ könyvtárt, lemásolsz egy meglévő szekciófájlt, kiegészíted _own végződéssel, módosítod a HTML-kódot, és ellenőrzöd a megjelenítést a Beillesztés → Oldal-szakasz menüpont alatt. Új kiválasztási kategóriákhoz egy saját fájlnevet használsz, amely Section előtaggal kezdődik.

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

Ha aktiválod az Only_own.txt fájlt és megfelelően korlátozod az editor jogokat, a szerkesztőid célzottan dolgozhatnak a biztosított saját HTML szekciós sablonokkal.