Anpassa HTML-avsnittsmodeller individuellt

Förutsättningar och mål med handledningen

Du behöver åtkomst till HTML-redigeraren och Filhanteraren för bluetronix CMS samt de nödvändiga utvecklarrättigheterna för mallmappen. I den här guiden lär du dig hur du anpassar befintliga sidavsnitt, skapar egna HTML Section Templates och erbjuder dina redaktörer endast godkända mallar vid behov.

Vi arbetar med exempelmallarna Clients och Banner. Standardfilerna förblir oförändrade; individuella ändringar görs med beteckningen _own.

1. Hitta sidavsnittsmallar i redigeraren

Öppna en befintlig CMS-sida, välj Redigera och öppna mallvalet via Infoga → Sidavsnitt. Kontextmenyn erbjuder också alternativet Textblock för mindre återanvändbara innehåll. Denna guide behandlar först sidavsnitten.

I fönstret Sidavsnitt visas de tillgängliga mallarna med en förhandsvisning. 

Välj till exempel kategorin Clients. Där finns flera layoutvarianter.

2. Var mallarna sparas

Mallfilerna ligger i utvecklarmappen /bx_Layout/. Öppna denna mapp i Filhanteraren. Där hittar du bland annat filer för sidavsnitt (Section*.txt) och textblock (Tag*.txt).

Filnamnet avgör kopplingen till mallvalet. En sidavsnittsmall börjar alltid med Section; därefter följer dess individuella namn. För egna varianter används tillägget _own före filändelsen.

Du kan också skapa en helt ny mall. För den väljer du ett eget namn efter Section. Om det inte finns någon likadana standardfil kommer den nya mallen att visas som ett komplement, snarare än att ersätta en befintlig mall.

3. Varför du inte bör redigera standardfiler direkt

De standardfiler som levereras med CMS från /bx_Layout/ kommer att skrivas över vid systemuppdateringar. Ändringar direkt på SectionClients.txt eller SectionBanner.txt är därför inte permanenta. Kopiera den önskade standardfilen och markera din egen version med _own. De tillhörande _own-varianterna är avsedda för dina individuella, uppdateringsbeständiga anpassningar.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Om båda filerna finns använder CMS den passande SectionClients_own.txt istället för standardmallen SectionClients.txt. Du behöver inte döpa om kategorin Clients i redigeraren.

Om du däremot skapar en egen fil med ett nytt namn, till exempel SectionMyTemplate_own.txt, förblir standardmallen Clients också tillgänglig.

4. Struktur av en HTML-sektionmall: avgränsningsmarkeringen

En Section-fil kan innehålla flera layoutvarianter av samma kategori. För att CMS-redigeraren ska känna igen de olika varianterna separeras de med följande avgränsningsmarkering:

<!--__SP_SectionTemplate__-->

Avgränsningen placeras i början, mellan varianterna och i slutet av exempel-filen. Använd skrivsättet exakt. Om avgränsningsmarkeringen saknas kan redigeraren inte pålitligt visa flera varianter som separata val.

Standardmallen SectionBanner.txt visar denna princip med flera olika bannerlayouter. Du kan använda dem som grund för en egen, enkelt uppbyggd Section.

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

Exemplet är en fullständig banner-variant. För en andra variant placerar du dess HTML-kod efter den sista separeringsmarkeringen och avslutar även denna variant med samma markering. Den faktiska sektionen kan du därefter utforma efter dina behov.

Klass sectionAll behöver du inte själv lägga till: bluetronix-editorn lägger automatiskt till den när en sidosektion sätts in.

5. Kopiera klientmall och ändra rubriken

Öppna den befintliga SectionClients-mallen i filhanteraren och titta på dess HTML-kod. I vårt exempel innehåller den en rubrik, en beskrivning och flera partner-rutor.

Kopiera den motsvarande mallen som SectionClients_own.txt och öppna kopian via Redigera. Lägg till strängen NEW!!!! till rubriken för vårt test. Du kan även individuellt ändra texten, antalet kort, symbolerna eller CSS.

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

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

Klicka på Spara och öppna sedan urvalet Infoga → Sidosektion → Klienter igen. Där känner du igen den egna versionen på den ändrade rubriken. Den andra klientvarianten kan väljas och redigeras oberoende av detta.

6. Erbjud egen mall under nytt namn

Du kan istället för en namngiven ersättningsfil även skapa en separat mall. Kopiera till exempel en klientvariant och spara den som SectionMyTemplate_own.txt. Delen bakom Section är det egna mallnamnet; detta avgör det nya urvalet i editorn. Den ursprungliga Klient-mallen kommer inte att ersättas om den får ett annat namn.

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

Så kan du utveckla fasta sektioner för specifika sidtyper för en kund, utan att behöva ändra innehållet i alla medföljande mallar.

7. Visa endast egna mallar med Only_own.txt

Om slutanvändaren bara ska använda dina godkända mallar, skapa en flaggfil Only_own.txt i mappen /bx_Layout/. Enligt den visade mallkonfigurationen kommer därmed endast lämpliga egna filer med tillägget _own att erbjudas i mallurvalet. Filen kräver ingen HTML-kod för denna funktion.

/bx_Layout/Only_own.txt

Exempel: Om det finns i katalogen SectionClients.txt, SectionBanner.txt och SectionMyTemplate_own.txt, ska urvalet efter aktivering av denna inställning endast innehålla den passande egna mallen. På så sätt kan du erbjuda en riktad, projektbaserad urval för en kund.

8. Egna tag-mallar för textblock

Samma _own-princip gäller för de mindre Textblocken. Deras filer börjar med Tag. Från TagTemplate.txt blir det till exempel TagTemplate_own.txt. Denna variant kan du erbjuda via posten Textblock i editorn.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplicera redigerbara kolumner med colAll

Om en sektion innehåller flera repetitiva kolumner kan en kolumn med klassen colAll kännas igen som en självständig block. Därmed finns funktionen Artikelkolumn → Duplicera tillgänglig i snabbmenyn.

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

Vid dupliceringen kommer den aktuella blocket att infogas som en andra kolumn. För en repetitiv karta eller artikelkolumn måste du därför sätta colAll på rätt container. Den överordnade sectionAll-klassen kommer å sin sida automatiskt från editorn.

10. Textmarkeringar och flerspråkiga mallar

De tillhandahållna standardsektionerna innehåller i exempeltexter strängarna ­, till exempel före och efter rubriker. Dessa textmarkeringar får inte förväxlas med separeringsmarkeringen <!--__SP_SectionTemplate__-->. Vid kopiering av befintliga mallar bör sådana CMS-markeringar först behållas om det tidigare editorbeteendet ska bibehållas.

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

Vid flerspråkiga projekt kan ytterligare översättningsmarkeringar vara meningsfulla, så att redaktörerna kan underhålla innehåll på de behovsområdena språken. bluetronix CMS är utformat för 24 språk. För en enkel, enbart enspråkig projektmall kan du utelämna onödiga ytterligare översättningsmarkeringar; de som krävs för editorn behålls.

11. Egna funktioner och nödvändiga includes

Om du utökar en mall med PHP-funktioner eller modulutdata, använd unika namn för egna funktioner. En befintlig funktion får inte deklareras igen under samma namn. Du kan skydda deklarationen med function_exists() till exempel:

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

Nödvändiga includes bör vara inkluderade minst en gång per sektion. En passande inkluderingsmarkör kan kopieras via editorn:

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

De interna mallfilerna med ändelserna .txt respektive .bx är i den beskrivna CMS-serverkonfigurationen inte avsedda för direkt åtkomst via offentliga HTTP-/HTTPS-URL:er. De läses och behandlas serverbaserat.

12. Varför begränsade mallar för redaktionsteam är meningsfulla

Med egna sektioner och Only_own.txt bestämmer du vilka färdiga layoutelement slutanvändaren kan välja. Dessutom kan redigeringsfunktioner som typsnitt- eller färgändring begränsas i användarinställningarna. Redaktörerna kan då framför allt infoga angivna sektioner, redigera texter och byta ut bilder utan att behöva ombygga det fastställda sidupplägget fritt.

Detta arbetssätt passar särskilt bra för större kundprojekt, företagsportaler och team med flera redaktörer. Utformningen förblir enhetlig medan innehållet kan underhållas flexibelt.

13. Resultat och sammanfattning

Du öppnar /bx_Layout/, kopierar en befintlig sektionfil, lägger till _own, justerar HTML-koden och kontrollerar utmatningen under Infoga → Sidosektion. För nya urvalskategorier använder du ett eget filnamn som börjar med Section.

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

Om du dessutom aktiverar Only_own.txt och begränsar redigeringsrättigheterna på rätt sätt, kan dina redaktörer arbeta målmedvetet med de tillhandahållna egna HTML-sektionmallarna.