HTML-sectie sjablonen individueel aanpassen

Vereisten en doel van de tutorial

Je hebt toegang nodig tot de HTML-editor en de Bestandsbeheerder van het bluetronix CMS, evenals de juiste ontwikkelaarsrechten voor de sjabloonmap. In deze tutorial leer je hoe je bestaande pagina-secties aanpast, je eigen HTML Sectie Sjablonen maakt en je redacteuren indien nodig alleen goedgekeurde sjablonen aanbiedt.

We werken met de voorbeeldsjablonen Clients en Banner. De standaardbestanden blijven onveranderd; individuele wijzigingen worden gemaakt met de aanduiding _own.

1. Pagina sectie sjablonen vinden in de editor

Open een bestaande CMS-pagina, kies Bewerken en open via Invoegen → Pagina-sectie de sjabloonkeuze. Het contextmenu biedt ook de optie Tekst-blok voor kleinere herbruikbare inhoud. Deze tutorial behandelt eerst de pagina-secties.

In het venster Pagina-sectie worden de beschikbare sjablonen met een voorbeeld getoond. 

Kies als voorbeeld de categorie Clients. Daar zijn verschillende lay-outvarianten beschikbaar.

2. Waar de sjablonen zijn opgeslagen

De sjabloonbestanden bevinden zich in de ontwikkelaarsmap /bx_Layout/. Open in de Bestandsbeheerder deze map. Daar vind je onder andere bestanden voor pagina-secties (Section*.txt) en tekstblokken (Tag*.txt).

De bestandsnaam bepaalt de toewijzing aan de sjabloonkeuze. Een pagina-sectiesjabloon begint altijd met Section; daarna volgt de individuele naam. Voor eigen varianten wordt voor de bestandsextensie de toevoeging _own gebruikt.

Je kunt ook een volledig nieuw sjabloon maken. Voor dit sjabloon kies je een eigen naam achter Section. Als er geen sjabloon met dezelfde naam bestaat, verschijnt het nieuwe sjabloon aanvullend, in plaats van een bestaand sjabloon te vervangen.

3. Waarom je standaardbestanden niet direct zou moeten bewerken

De standaardbestanden die met het CMS worden meegeleverd uit /bx_Layout/ worden overschreven bij systeemupdates. Wijzigingen rechtstreeks aan SectionClients.txt of SectionBanner.txt zijn daarom niet permanent. Kopieer het gewenste standaardbestand en markeer je eigen versie met _own. De bijbehorende _own-varianten zijn bedoeld voor je eigen, updatebestendige aanpassingen.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Als beide bestanden bestaan, gebruikt het CMS het juiste SectionClients_own.txt in plaats van de standaardsjabloon SectionClients.txt. Je hoeft daarvoor de categorie Clients in de editor niet te hernoemen.

Als je daarentegen een eigen bestand maakt onder een nieuwe naam, bijvoorbeeld SectionMyTemplate_own.txt, blijft de standaardsjabloon Clients ook beschikbaar.

4. Opbouw van een HTML sectie sjabloon: de scheidingsmarkering

Een Sectie-bestand kan meerdere lay-outvarianten van dezelfde categorie bevatten. Om ervoor te zorgen dat de CMS-editor de verschillende varianten herkent, worden ze van elkaar gescheiden met de volgende scheidingsteken:

<!--__SP_SectionTemplate__-->

Het teken staat aan het begin, tussen de varianten en aan het einde van het voorbeeldbestand. Neem de schrijfwijze exact over. Als het scheidingsteken ontbreekt, kan de editor de verschillende varianten niet betrouwbaar als aparte keuzes weergeven.

De standaardsjabloon SectionBanner.txt illustreert dit principe met verschillende bannerlay-outs. Je kunt ze als basis gebruiken voor een eigen, eenvoudig opgebouwd sectie.

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

Het voorbeeld is een volledige banner-versie. Voor een tweede versie voeg je de HTML-code achter de laatste scheidingsmarkering en sluit je deze versie ook af met dezelfde markering. De eigenlijke sectie kun je daarna naar eigen inzicht vormgeven.

De klasse sectionAll hoef je niet zelf toe te voegen: de bluetronix-editor voegt deze automatisch toe bij het invoegen van een pagina-sectie.

5. Klanten-sjabloon kopiëren en de kop wijzigen

Open de bestaande SectionClients-sjabloon in de bestandsbeheerder en bekijk de HTML-code. In ons voorbeeld bevat het een kop, een beschrijving en meerdere partnertegels.

Kopieer de betreffende sjabloon als SectionClients_own.txt en open de kopie via Bewerken. Voeg aan de kop voor onze test de tekenreeks NEW!!!! toe. Je kunt ook de tekst, het aantal kaarten, de symbolen of de CSS individueel aanpassen.

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

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

Klik op Opslaan en open vervolgens de selectie Invoegen → Pagina-sectie → Klanten opnieuw. Je herkent de eigen versie aan de gewijzigde kop. De tweede klantenversie kan onafhankelijk daarvan worden geselecteerd en bewerkt.

6. Eigen sjabloon onder een nieuwe naam aanbieden

In plaats van een gelijknamig vervangend bestand kun je ook een apart sjabloon maken. Kopieer bijvoorbeeld een klantenversie en sla deze op als SectionMyTemplate_own.txt. Het deel achter Section is de eigen sjabloonnaam; deze bepaalt de nieuwe selectie in de editor. De oorspronkelijke Klanten-sjabloon wordt bij een andere naam niet vervangen.

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

Zo kun je voor een klant vaste secties voor bepaalde paginatypes ontwikkelen zonder alle meegeleverde sjablonen inhoudelijk te hoeven veranderen.

7. Met Only_own.txt alleen eigen sjablonen weergeven

Als de eindklant alleen jouw goedgekeurde sjablonen moet gebruiken, maak dan in de map /bx_Layout/ het vlagbestand Only_own.txt aan. Volgens de getoonde sjabloonconfiguratie worden daarmee uitsluitend passende eigen bestanden met de toevoeging _own in de sjabloonselectie aangeboden. Voor deze functie heeft het bestand geen HTML-code nodig.

/bx_Layout/Only_own.txt

Voorbeeld: Als de bestanden SectionClients.txt, SectionBanner.txt en SectionMyTemplate_own.txt in de map staan, moet de selectie na activatie van deze instelling alleen de passende eigen sjabloon bevatten. Hierdoor kun je een klant een gerichte, projectgebonden selectie aanbieden.

8. Eigen tag-sjablonen voor tekstblokken

Hetzelfde _own-principe geldt voor de kleinere Tekst-blokken. Hun bestanden beginnen met Tag. Van TagTemplate.txt wordt bijvoorbeeld TagTemplate_own.txt. Deze versie kun je aanbieden via de vermelding Tekst-blok in de editor.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Bewerkbare kolommen dupliceren met colAll

Als een sectie meerdere herhaalbare kolommen bevat, kan een kolom met de klasse colAll als een zelfstandige blok worden herkend. Hierdoor is de functie Artikel-kolom → Dupliceer beschikbaar in het contextmenu.

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

Bij het dupliceren wordt het betreffende blok als tweede kolom ingevoegd. Voor een herhaalbare kaart of artikelkolom moet je colAll daarom op de juiste container zetten. De bovenliggende sectionAll-klasse wordt daarentegen automatisch door de editor toegevoegd.

10. Tekstmarkeringen en meertalige sjablonen

De meegeleverde standaardsecties bevatten binnen de voorbeeldteksten de tekenreeks ­, bijvoorbeeld voor en na koppen. Deze tekstmarkeringen zijn niet te verwarren met de scheidingsmarkering <!--__SP_SectionTemplate__-->. Bij het kopiëren van bestaande sjablonen moet je dergelijke CMS-markeringen aanvankelijk behouden als het eerdere editor gedrag behouden moet blijven.

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

Bij meertalige projecten kunnen aanvullende vertaalmarkeringen nuttig zijn, zodat redacteuren inhoud in de benodigde talen kunnen beheren. Het bluetronix CMS is ontworpen voor 24 talen. Voor een eenvoudig, uitsluitend eentalig projectsjabloon kun je niet benodigde extra vertaalmarkeringen weglaten; de voor de editor vereiste sectiescheidingsmarkeringen moeten behouden blijven.

11. Eigen functies en benodigde includes

Wanneer je een sjabloon uitbreidt met PHP-functies of modulausgangen, gebruik dan unieke namen voor eigen functies. Een bestaande functie mag niet opnieuw onder dezelfde naam worden gedeclareerd. Je kunt de declaratie bijvoorbeeld met function_exists() beveiligen:

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

Benodigde includes moeten minstens één keer per sectie worden opgenomen. Een overeenkomstige include-markering kan via de editor worden gekopieerd:

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

De interne sjabloonbestanden met de extensies .txt of .bx zijn in de beschreven CMS-serverconfiguratie niet bedoeld voor directe toegang via openbare HTTP-/HTTPS-urls. Ze worden serverzijdig gelezen en verwerkt.

12. Waarom beperkte sjablonen voor redactieteams zinvol zijn

Met eigen secties en Only_own.txt bepaal je welke kant-en-klare lay-outcomponenten de eindklant kan selecteren. Daarnaast kunnen in de gebruikersinstellingen editorfuncties zoals lettertype- of kleurwijzigingen worden beperkt. De redacteuren kunnen dan vooral vooraf bepaalde secties invoegen, teksten bewerken en afbeeldingen vervangen zonder het vastgestelde paginalay-out vrij te hoeven aanpassen.

Deze werkwijze is vooral geschikt voor grotere klantprojecten, bedrijfsportals en teams met meerdere redacteuren. Het ontwerp blijft uniform, terwijl de inhoud flexibel kan worden beheerd.

13. Resultaat en samenvatting

Je opent /bx_Layout/, kopieert een bestaande sectie-bestand, voegt _own toe, past de HTML-code aan en controleert de uitvoer onder Invoegen → Pagina-sectie. Voor nieuwe selectiecategorieën gebruik je een eigen bestandsnaam die met Section begint.

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

Als je ook Only_own.txt activeert en de editorrechten passend beperkt, kunnen jouw redacteuren gericht met de aangeboden eigen HTML Sectie sjablonen werken.