Skreddersy HTML-avsnittmaler

Forutsetninger og mål for veiledningen

Du trenger tilgang til HTML-redigeringsverktøyet og Filbehandleren i bluetronix CMS samt de nødvendige utviklerrettighetene for malmappen. I denne guiden lærer du hvordan du tilpasser eksisterende sideelementer, lager egne HTML-seksjonsmaler og gir redaktørene dine kun tilgang til godkjente maler ved behov.

Vi jobber med eksempelmalene Clients og Banner. Standardfilene forblir uendret; individuelle endringer gjøres ved hjelp av merking _own.

1. Finn sideavsnittmaler i redigereren

Åpne en eksisterende CMS-side, velg Rediger og åpne malvalget via Sett inn → Side-Seksjon. Konntextmenyen tilbyr også posten Tekstblokk for mindre gjenbrukbare innhold. Denne guiden tar først for seg sideelementene.

I vinduet Side-Seksjon vises de tilgjengelige malene med en forhåndsvisning. 

Velg for eksempel kategorien Clients. Der finner du flere layoutvarianter.

2. Hvor malene er lagret

Malfilene ligger i utviklermappen /bx_Layout/. Åpne i Filbehandleren denne mappen. Der finner du blant annet filer for sideelementer (Section*.txt) og tekstblokker (Tag*.txt).

Filnavnet bestemmer tilknytningen til malvalget. En seksjonsmal begynner alltid med Section; deretter følger dens individuelle navn. For egne varianter brukes tillegg _own før filtypen.

Du kan også opprette en helt ny mal. For denne velger du et eget navn bak Section. Hvis det ikke finnes en standardfil med samme navn, vil den nye malen vises i tillegg, i stedet for å erstatte en eksisterende mal.

3. Hvorfor du ikke bør redigere standardfiler direkte

Standardfilene som følger med CMS fra /bx_Layout/ vil bli overskrevet ved systemoppdateringer. Endringer direkte i SectionClients.txt eller SectionBanner.txt er derfor ikke permanente. Kopier den ønskede standardfilen og merk din egen versjon med _own. De tilknyttede _own-variantene er ment for dine individuelle, oppdateringsbestandige tilpasninger.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Eksisterer begge filer, bruker CMS den passende SectionClients_own.txt i stedet for standardmalen SectionClients.txt. Du må ikke endre navnet på kategorien Clients i redigeringsverktøyet.

Hvis du derimot oppretter en egen fil under et nytt navn, for eksempel SectionMyTemplate_own.txt, forblir standardmalen Clients også tilgjengelig.

4. Oppbyggingen av en HTML seksjonsmal: skilletegnet

En seksjonsfil kan inneholde flere layoutvarianter av samme kategori. For at CMS-redigeringsverktøyet skal gjenkjenne de enkelte variantene, blir de adskilt med følgende avskjæringsmarkering:

<!--__SP_SectionTemplate__-->

Merket står i starten, mellom variantene og på slutten av eksempel-filen. Bruk skrivemåten nøyaktig. Hvis avskjæringsmarkeringen mangler, kan redigeringsverktøyet ikke pålitelig vise flere varianter som adskilte valg.

Standardmalen SectionBanner.txt viser dette prinsippet med flere forskjellige banneroppsett. Du kan bruke dem som grunnlag for en egen, enkelt oppbygd seksjon.

<!--__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 fullstendig banner-variant. For en andre variant plasserer du HTML-koden etter den siste skilletegnet og avslutter også denne varianten med den samme markeringen. Den faktiske seksjonen kan du deretter utforme etter dine krav.

Klassen sectionAll trenger du ikke å legge til selv: bluetronix-editoren legger den automatisk til når du setter inn et seksjonsavsnitt.

5. Kopiere klientmal og endre overskriften

Åpne den eksisterende SectionClients-malen i filbehandleren og se på HTML-koden. I vårt eksempel inneholder den en overskrift, en beskrivelse og flere partner-fliser.

Kopier den aktuelle malen som SectionClients_own.txt og åpne kopien via Rediger. Legg til tegnstrengen NEW!!!! til overskriften for vår test. Du kan også endre teksten, antall kort, symbolene 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>

Klikk på Lagre og åpne deretter valget Sett inn → Seksjonsavsnitt → Klienter på nytt. Der vil du kjenne igjen den egen versjonen på den endrede overskriften. Den andre klientvarianten kan velges og redigeres uavhengig av dette.

6. Tilby egen mal under nytt navn

Du kan i stedet for en erstatningsfil med samme navn også opprette en egen mal. Kopier for eksempel en klientvariant og lagre den som SectionMyTemplate_own.txt. Delen bak Section er ditt eget malenavn; dette bestemmer det nye valget i editoren. Den opprinnelige Klienter-malen vil ikke bli erstattet hvis den har et annet navn.

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

Slik kan du utvikle faste seksjoner for bestemte sidetyper for en kunde, uten å måtte endre innholdet i alle medfølgende maler.

7. Vis kun egne maler med Only_own.txt

Hvis sluttkunde bare skal bruke dine frigitte maler, opprett i mappen /bx_Layout/ flaggfilen Only_own.txt. Ifølge den viste malkonfigurasjonen vil det dermed kun bli tilbudt passende egne filer med tillegget _own i malvalget. Filen trenger ingen HTML-kode for denne funksjonen.

/bx_Layout/Only_own.txt

Eksempel: Hvis SectionClients.txt, SectionBanner.txt og SectionMyTemplate_own.txt finnes i katalogen, skal valget etter aktivering av denne innstillingen kun inneholde den passende egne malen. Dermed kan du gi en kunde et målrettet, prosjektspesifikt valg.

8. Egne tag-maler for tekstblokker

Det samme _own-prinsippet gjelder for de mindre Tekst-modulene. Deres filer begynner med Tag. Fra TagTemplate.txt blir for eksempel TagTemplate_own.txt. Denne varianten kan du gjøre tilgjengelig via posten Tekst-modul i editoren.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplisere redigerbare kolonner med colAll

Når en seksjon inneholder flere repeterbare kolonner, kan en kolonne med klassen colAll gjenkjennes som en selvstendig blokk. Dermed står funksjonen Artikkel-kolonne → Dupliser tilgjengelig i kontekstmenyen.

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

Ved duplisering blir den aktuelle blokken satt inn som en andre kolonne. For en repeterbar kort- eller artikkel-kolonne må du derfor plassere colAll i riktig container. Den overordnede sectionAll-klassen kommer derimot automatisk fra editoren.

10. Tekstmarkeringer og flerspråklige maler

De tilgjengelige standardseksjonene inneholder i eksempelet tekststrengen ­, for eksempel før og etter overskrifter. Disse tekstmarkeringene er ikke å forveksle med skilletegnet <!--__SP_SectionTemplate__-->. Når du kopierer eksisterende maler, bør du først beholde slike CMS-markeringer hvis den tidligere editoren oppførselen skal bevares.

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

Ved flerspråklige prosjekter kan ekstra oversettelsesmarkeringer være fornuftige, slik at redaktører kan vedlikeholde innhold på nødvendige språk. bluetronix CMS er tilrettelagt for 24 språk. For en enkel, utelukkende enspråklig prosjektmal kan du utelate unødvendige ekstra oversettelsesmarkeringer; de for editoren nødvendige seksjonskilletegnene må bevares.

11. Egen funksjoner og nødvendige inkluderingsfiler

Når du utvider en mal med PHP-funksjoner eller modulutganger, bruk unike navn for egne funksjoner. En eksisterende funksjon må ikke deklareres flere ganger med samme navn. Du kan sikre deklarasjonen med function_exists():

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

Nødvendige inkluderer bør være inkludert minst én gang per seksjon. En tilsvarende inkluderermerke kan kopieres via editoren:

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

De interne malfilene med endelsene .txt eller .bx er i den beskrevne CMS-serverkonfigurasjonen ikke ment for direkte tilgang via offentlige HTTP-/HTTPS-URL-er. De leses og behandles på serversiden.

12. Hvorfor begrensede maler er fornuftige for redaksjonsteam

Med egne seksjoner og Only_own.txt bestemmer du hvilke ferdige layoutmoduler sluttkunden kan velge. I tillegg kan redigering av redaktørfunksjoner som skrifttype- eller fargeendringer begrenses i brukerinnstillingene. Redaktørene kan deretter spesielt sette inn forhåndsdefinerte seksjoner, redigere tekster og bytte ut bilder, uten å måtte bygge om det bestemte sideskjemaet fritt.

Denne arbeidsmetoden er spesielt egnet for større kundeprosjekter, bedriftsportaler og team med flere redaktører. Utformingen forblir enhetlig, mens innholdet kan vedlikeholdes fleksibelt.

13. Resultat og oppsummering

Du åpner /bx_Layout/, kopierer en eksisterende seksjonsfil, legger til _own, justerer HTML-koden og kontrollerer utskriften under Sett inn → Seksjonsavsnitt. For nye valgkategorier bruker du et eget filnavn som begynner med Section.

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

Når du også aktiverer Only_own.txt og begrenser redaktørrettighetene tilsvarende, kan redaktørene dine arbeide målrettet med de tilgjengelige egne HTML-seksjonsmalene.