Tilpas HTML-sektionsskabeloner individuelt

Forudsætninger og mål for vejledningen

Du har brug for adgang til HTML-editoren og filhåndteringen i bluetronix CMS samt de relevante udviklerettigheder til skabelone-mappen. I denne vejledning lærer du, hvordan du tilpasser eksisterende sideafsnit, opretter egne HTML Section Templates og tilbyder dine redaktører kun de godkendte skabeloner, når det er nødvendigt.

Vi arbejder med eksempel skabelonerne Clients og Banner. Standardfilerne forbliver uændrede; individuelle ændringer foretages ved at tilføje _own.

1. Find sidesektionsskabeloner i editoren

Åbn en eksisterende CMS-side, vælg Rediger og åbn skabelonvalget via Indsæt → Side-afsnit. Kontekstmenuen tilbyder også indstillingen Tekst-blok til mindre genanvendelige indhold. Denne vejledning beskæftiger sig først med sideafsnit.

I vinduet Side-afsnit vises de tilgængelige skabeloner med en forhåndsvisning. 

Vælg som eksempel kategorien Clients. Der er flere layoutvarianter tilgængelige.

2. Hvor skabelonerne er gemt

Skabelonfilerne findes i udviklermappen /bx_Layout/. Åbn denne mappe i filhåndteringen. Her finder du blandt andet filer til sideafsnit (Section*.txt) og tekstblokke (Tag*.txt).

Filnavnet bestemmer tilknytningen til skabelonvalget. En skabelon til sideafsnit starter altid med Section; derefter følger dens unikke navn. For egne varianter tilføjes _own før filendelsen.

Du kan også oprette en helt ny skabelon. For den vælger du et eget navn efter Section. Hvis der ikke findes en standardfil med samme navn, vises den nye skabelon som et supplement i stedet for at erstatte en eksisterende skabelon.

3. Hvorfor du ikke bør redigere standardfiler direkte

De standardfiler, der leveres med CMS'et fra /bx_Layout/, bliver overskrevet ved systemopdateringer. Ændringer direkte i SectionClients.txt eller SectionBanner.txt er derfor ikke permanente. Kopier den ønskede standardfil og mærk din version med _own. De tilhørende _own-varianter er beregnet til dine individuelle, opdateringsbestandige tilpasninger.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Eksisterer begge filer, bruger CMS'et den passende SectionClients_own.txt i stedet for standard skabelonen SectionClients.txt. Du behøver ikke omdøbe kategorien Clients i editoren.

Hvis du derimod opretter en egen fil med et nyt navn, for eksempel SectionMyTemplate_own.txt, forbliver standard skabelonen Clients også tilgængelig.

4. Opbygning af en HTML-sektion skabelon: adskillelsesmærket

En Section-fil kan indeholde flere layoutvarianter af samme kategori. For at CMS-editoren kan genkende de enkelte varianter, adskilles de med følgende separator:

<!--__SP_SectionTemplate__-->

Separatoren står i starten, mellem varianterne og i slutningen af eksempel-filen. Følg skrivemåden præcist. Hvis separatoren mangler, kan editoren muligvis ikke pålideligt vise flere varianter som adskilte valg.

Den standardmal SectionBanner.txt viser dette princip med flere forskellige banner-layouts. Du kan bruge den som grundlag for din egen, enkelt opbyggede sektion.

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

Eksemplet er en komplet banner-variant. For en anden variant tilføjer du dens HTML-kode efter den sidste adskillelsesmarkering og afslutter også denne variant med den samme markering. Den faktiske sektion kan du derefter designe efter dine behov.

Klassen sectionAll skal du ikke selv tilføje: Bluetronix-editoren tilføjer den automatisk, når du indsætter en sideafsnit.

5. Kopiere klient-skabelon og ændre overskriften

Åbn den eksisterende SectionClients-skabelon i filhåndteringen og se dens HTML-kode. I vores eksempel indeholder den en overskrift, en beskrivelse og flere partner-fliser.

Kopier den relevante skabelon som SectionClients_own.txt og åbn kopien via Rediger. Tilføj teksten NEW!!!! til overskriften for vores test. Du kan også ændre teksten, antallet af kort, symbolerne eller CSS'en individuelt.

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

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

Klik på Gem og åbn derefter valget Indsæt → Sideafsnit → Klienter igen. Her kan du genkende din egen version på den ændrede overskrift. Den anden klientvariant kan uafhængigt vælges og redigeres.

6. Tilbyde egen skabelon under nyt navn

Du kan også oprette en separat skabelon i stedet for en ligeså navngiven erstatningsfil. Kopier for eksempel en klientvariant og gem den som SectionMyTemplate_own.txt. Delen bag Section er navnet på din egen skabelon; dette bestemmer det nye valg i editoren. Den originale Clients-skabelon vil ikke blive erstattet ved et andet navn.

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

På den måde kan du udvikle faste afsnit for bestemte typesider til en kunde uden at skulle ændre indholdet i alle de medfølgende skabeloner.

7. Vis kun egne skabeloner med Only_own.txt

Hvis slutkunden kun skal bruge dine frigivne skabeloner, skal du lægge flagfilen Only_own.txt i mappen /bx_Layout/. Ifølge den viste skabelonkonfiguration vil der således kun blive tilbudt passende egne filer med tilføjelsen _own i skabelonvalget. Filen kræver ikke HTML-kode for denne funktion.

/bx_Layout/Only_own.txt

Eksempel: Hvis der ligger i mappen SectionClients.txt, SectionBanner.txt og SectionMyTemplate_own.txt, skal udvalget, når denne indstilling aktiveres, kun indeholde den passende egen skabelon. På denne måde kan du give en kunde et målrettet, projektbaseret udvalg.

8. Egen tag-skabelon til tekstblokke

Det samme _own-princip gælder for de mindre tekstblokke. Deres filer starter med Tag. Fra TagTemplate.txt bliver for eksempel TagTemplate_own.txt. Denne variant kan du tilgængeliggøre gennem posten Tekstblok i editoren.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplikerbare kolonner med colAll

Hvis en sektion indeholder flere gentagelige kolonner, kan en kolonne med klassen colAll genkendes som en selvstændig blok. Dette giver funktionen Artikel-kolonne → Duplikér i kontekstmenuen.

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

Ved duplikering indsættes den relevante blok som den anden kolonne. For en gentagelig kort- eller artikelkolonne skal du derfor sætte colAll i den rigtige container. Den overordnede sectionAll-klasse kommer derimod automatisk fra editoren.

10. Tekstmarkeringer og flersprogede skabeloner

De udleverede standardsektioner indeholder i eksempelteksterne teksten ­, for eksempel før og efter overskrifter. Disse tekstmarkeringer er ikke at forveksle med adskillelsesmærket <!--__SP_SectionTemplate__-->. Ved kopiering af eksisterende skabeloner bør du i første omgang bevare sådanne CMS-markeringer, hvis den hidtidige editoradfærd skal bevares.

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

I flersprogede projekter kan yderligere oversættelsesmarkeringer være nyttige, så redaktører kan vedligeholde indhold på de nødvendige sprog. Bluetronix CMS er designet til 24 sprog. For en enkel, udelukkende ensproget projektmal kan du undlade unødvendige ekstra oversættelsesmarkeringer; de for editoren nødvendige afsnitsadskillelsesmærker skal dog bevares.

11. Egen funktioner og nødvendige inkluderer

Når du udvider en skabelon med PHP-funktioner eller moduludgivelser, skal du bruge entydige navne til egne funktioner. En eksisterende funktion må ikke deklareres igen under det samme navn. Du kan beskytte deklarationen med function_exists():

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

Nødvendige includes bør være indlæst mindst én gang pr. sektion. En passende include-markør kan kopieres over editoren:

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

De interne skabelonfiler med endelserne .txt eller .bx er i den beskrevne CMS-serverkonfiguration ikke beregnet til direkte adgang via offentlige HTTP-/HTTPS-URL'er. De læses og behandles server-side.

12. Hvorfor begrænsede skabeloner er fornuftige for redaktionsteams

Med egne sektioner og Only_own.txt bestemmer du, hvilke færdige layoutmoduler slutkunden kan vælge. Derudover kan editorfunktioner som skrifttype- eller farveskift begrænses i brugernes indstillinger. Redaktørerne kan så primært indsætte forudbestemte sektioner, redigere tekster og udskifte billeder uden at skulle ombygge det fastlagte side-design.

Denne arbejdsgang er især velegnet til større kundeprojekter, virksomhedsportaler og teams med flere redaktører. Designet forbliver ensartet, mens indholdet kan vedligeholdes fleksibelt.

13. Resultat og opsummering

Du åbner /bx_Layout/, kopierer en eksisterende sektion-fil, tilføjer _own, justerer HTML-koden og kontrollerer outputtet under Indsæt → Sideafsnit. For nye udvalgskategorier bruger du et eget filnavn, der begynder med Section.

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

Hvis du også aktiverer Only_own.txt og begrænser editorrettighederne passende, kan dine redaktører målrettet arbejde med de tilvejebragte egne HTML sektion skabeloner.