Räätälöi HTML-osio mallipohjat

Oppaan vaatimukset ja tavoite

Tarvitset pääsyn HTML-editoriin ja Tiedostohallintaan bluetronix CMS:ssä sekä tarvittavat kehittäjäoikeudet mallihakemistoon. Tässä oppaassa opit, miten voit muokata olemassa olevia sivuosioita, luoda omia HTML Section Templateja ja tarjota toimittajillesi tarvittaessa vain hyväksyttyjä malleja.

Työskentelemme esimerkkimalleilla Clients ja Banner. Oletustiedostot pysyvät muuttumattomina; yksilölliset muutokset tehdään merkinnän _own avulla.

1. Löydä sivuosion mallipohjat editorista

Avaa olemassa oleva CMS-sivu, valitse Muokkaa ja avaa Lisää → Sivun-osa -valikosta mallivalinta. Kontekstivalikossa on myös merkintä Tekstiblokki pienille uudelleenkäytettäville sisällöille. Tämä opas käsittelee aluksi sivuosioita.

Sivun-osa -ikkunassa on käytettävissä olevat mallit esikatselulla. 

Esimerkiksi valitse kategoria Clients. Sieltä löytyy useita asetteluvaihtoehtoja.

2. Missä mallipohjat on tallennettu

Mallilaskentatiedostot sijaitsevat kehittäjäkansiossa /bx_Layout/. Avaa Tiedostohallinnassa tämä kansio. Sieltä löydät muun muassa tiedostoja sivuosioille (Section*.txt) ja tekstiblokeille (Tag*.txt).

Tiedostonimi määrittää sen, miten se liittyy mallivalintaan. Sivun osamalli alkaa aina sanalla Section; sen jälkeen seuraa sen yksilöllinen nimi. Omille variantteille käytetään tiedostopäätteen edessä lisänimeä _own.

Voit myös luoda täysin uuden mallin. Valitset sille oman nimen Section jälkeen. Jos ei ole olemassa saman nimistä oletustiedostoa, uusi malli näkyy lisäyksenä vanhan mallin sijasta.

3. Miksi et pitäisi muokata suoraan oletustiedostoja

CMS:n mukana toimitettavat oletustiedostot /bx_Layout/ ylitetään järjestelmäpäivitysten yhteydessä. Muutokset suoraan SectionClients.txt tai SectionBanner.txt -tiedostoihin eivät siis ole pysyviä. Kopioi haluamasi oletustiedosto ja merkitse oma versiosi lisämerkinnällä _own. Liittyvät _own-variantit on tarkoitettu yksilöllisiin, päivityksille kestäviin muokkauksiin.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Mikäli molemmat tiedostot ovat olemassa, CMS käyttää sopivaa SectionClients_own.txt -tiedostoa oletusmallin SectionClients.txt sijasta. Sinun ei tarvitse vaihtaa kategorian Clients nimeä editorissa.

Jos kuitenkin luot oman tiedoston uudella nimellä, esimerkiksi SectionMyTemplate_own.txt, oletusmalli Clients on edelleen käytettävissä.

4. HTML-osio mallipohjan rakenne: erotusmerkki

Sectio-tiedosto voi sisältää useita asetteluvaihtoehtoja samasta kategoriasta. Jotta CMS-editori tunnistaa yksittäiset vaihtoehdot, ne erotellaan seuraavalla erotusmerkinnällä:

<!--__SP_SectionTemplate__-->

Erotusmerkki on sijoitettu alussa, vaihtoehtojen väliin ja esimerktiedoston loppuun. Ota kirjoitustapa täsmälleen samaan tapaan. Jos erotusmerkki puuttuu, editori ei voi luotettavasti esittää useita vaihtoehtoja erillisinä valintoina.

Oletusmalli SectionBanner.txt näyttää tämän periaatteen useilla erilaisilla bannerimuodoilla. Voit käyttää sitä pohjana omalle, yksinkertaiselle osalle.

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

Esimerkki on täydellinen banneriversio. Toista versiota varten lisää sen HTML-koodi viimeisen erotinmerkinnän taakse ja sulje tämä versio myös samalla merkinnällä. Varsinaisen osion voit sitten muokata tarpeidesi mukaan.

Luokkaa sectionAll ei tarvitse lisätä itse: bluetronix-editori lisää sen automaattisesti, kun lisäät sivuosan.

5. Kopioi asiakkaan mallipohja ja muuta otsikko

Avaa olemassa oleva SectionClients -malli tiedostonhallinnassa ja katso sen HTML-koodia. Esimerkissämme se sisältää otsikon, kuvauksen ja useita kumppanikortteja.

Kopioi vastaava malli nimellä SectionClients_own.txt ja avaa kopio Muokkaa-valikon kautta. Lisää testimme otsikkoon merkkijono NEW!!!!. Voit myös muokata tekstiä, korttien määrää, symboleja tai CSS-tyylejä yksilöllisesti.

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

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

Napsauta Tallenna ja avaa sitten uudelleen valikko Lisää → Sivujakso → Asiakkaat. Sieltä tunnistat oman version muokattavasta otsikosta. Toista asiakasmallia voidaan valita ja muokata riippumatta siitä.

6. Tarjoa oma mallipohja uudella nimellä

Voit luoda myös erillisen mallin sen sijaan, että käyttäisit yhtä nimeä. Kopioi esimerkiksi asiakasversio ja tallenna se nimellä SectionMyTemplate_own.txt. Osa Section-sanan jälkeen on oma mallin nimesi; tämä määrittää uuden valinnan editorissa. Alkuperäistä Clients-mallia ei vaihdeta eri nimellä.

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

Näin voit kehittää asiakkaille kiinteitä osia tietyille sivutyypeille ilman, että sinun täytyy muuttaa mukana toimitettuja malleja sisällöllisesti.

7. Näytä vain omat mallipohjat Only_own.txt:llä

Jos loppukäyttäjän on tarkoitus käyttää vain hyväksymiäsi malleja, luo kansioon /bx_Layout/ lippufaili Only_own.txt. Näyttämällä mallin kokoonpanolla tarjotaan vain omat tiedostot, joissa on lisäyksikkö _own mallivalikoimassa. Tämä tiedosto ei vaadi HTML-koodia tätä toimintoa varten.

/bx_Layout/Only_own.txt

Esimerkiksi: Jos hakemistossa on SectionClients.txt, SectionBanner.txt ja SectionMyTemplate_own.txt, tulisi tämän asetuksen aktivoimisen jälkeen valinnan sisältää vain sopiva oma malli. Tämän ansiosta voit tarjota asiakkaalle taitavasti räätälöidyn, projektikohtaisen valinnan.

8. Omia tagi-mallipohjia tekstirakenteille

Sama _own-periaate pätee pienempiin Tekstikomponentteihin. Niiden tiedostot alkavat Tag: tai TagTemplate.txt muuttuu esimerkiksi TagTemplate_own.txt. Tätä versiota voit tarjota editorin Tekstikomponentti -kohdassa.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Kaksoiskappaleita muokattavissa sarakkeissa colAll

Jos osio sisältää useita toistettavia sarakkeita, voidaan sarake, jossa on luokka colAll, tunnistaa itsenäiseksi lohkoksi. Tämän ansiosta kontekstivalikosta löytyy toiminto Artikkeli-Sarake → Duplikaatti.

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

Duplikoitaessa kyseinen lohko lisätään toisena sarakkeena. Jotta voit luoda toistettavan kortin tai artikkelisarakkeen, sinun on siksi asetettava colAll oikeaan säilöön. Ylätason sectionAll -luokka tulee sen sijaan automaattisesti editorista.

10. Tekstimerkit ja monikieliset mallipohjat

Tarjotut oletusosiot sisältävät esimerkkiteksteissä merkkijonon ­, esimerkiksi otsikoiden edessä ja takana. Näitä tekstimerkintöjä ei tule sekoittaa erotinmerkkiin <!--__SP_SectionTemplate__-->. Olemassa olevien mallien kopioimisen yhteydessä sinun tulisi aluksi säilyttää tällaiset CMS-merkinnät, jos halutaan säilyttää aiempi editorin toiminta.

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

Monikielisissä projekteissa lisäykset kääntämiskohteisiin voivat olla järkeviä, jotta toimittajat voivat hoitaa sisältöä tarvitsemissaan kielissä. bluetronix CMS on suunniteltu 24 kielelle. Yksinkertaiselle, vain yksikieliselle projektimallille voit jättää tarpeettomat lisäykset pois; editorin tarvitsemat jaksoerotustunnisteet on säilytettävä.

11. Omia toimintoja ja tarvittavia includeja

Kun laajennat mallia PHP-funktioilla tai moduulilähdöillä, käytä omille funktioillesi yksilöllisiä nimiä. Olemassa olevia funktioita ei saa declare uudelleen samalla nimellä. Voit suojata julistuksen esimerkiksi käyttäen function_exists():

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

Tarvittavat liitteet tulisi liittää ainakin kerran per osio. Sopiva liitemerkki voidaan kopioida editorista:

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

Sisäisiä mallitiedostoja, joilla on päätteenä .txt tai .bx, ei ole tarkoitettu suoraan saataviksi julkisista HTTP-/HTTPS-URL-osoitteista kuvatussa CMS-palvelinmäärityksessä. Ne luetaan ja käsitellään palvelimella.

12. Miksi rajoitettujen mallien käyttö toimitustiimeille on järkevää

Omilla osilla ja Only_own.txt voit määrittää, mitä valmiita ulkoasuelementtejä loppukäyttäjä voi valita. Lisäksi käyttäjäasetuksissa voi rajoittaa editoritoimintoja, kuten fontin tai värimuutoksia. Toimittajat voivat sitten pääasiassa lisätä määritettyjä osia, muokata tekstejä ja vaihtaa kuvia ilman, että heidän täytyy muuttaa vahvistettua sivun ulkoasua.

Tämä toimintatapa soveltuu erityisesti suurempiin asiakasprojekteihin, yritysportaaleihin ja useita toimittajia sisältäviin tiimeihin. Ulkoasu pysyy yhtenäisenä, kun taas sisältöä voidaan hoitaa joustavasti.

13. Tulokset ja yhteenveto

Avaat /bx_Layout/, kopioit olemassa olevan osatiedoston, lisäät _own, muokkaat HTML-koodia ja tarkistat ulostulon Lisää → Sivujakso -kohdassa. Uusille valintakategorioille käytät omaa tiedostonimeä, joka alkaa Section-sanalla.

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

Jos aktivoit lisäksi Only_own.txt ja rajoitat editorin oikeuksia asianmukaisesti, toimittajasi voivat työskennellä tarkasti tarjoamiesi omien HTML-osion mallien kanssa.