Personalizzare i modelli di sezioni HTML

Requisiti e obiettivi del tutorial

Hai bisogno di accesso all'editor HTML e al gestore file del CMS bluetronix, oltre ai diritti di sviluppo necessari per la cartella dei modelli. In questo tutorial imparerai a modificare sezioni di pagina esistenti, creare i tuoi modelli di sezione HTML e offrire ai tuoi redattori esclusivamente modelli approvati, se necessario.

Lavoriamo con i modelli di esempio Clients e Banner. I file standard rimangono invariati; modifiche individuali vengono effettuate tramite la marcatura _own.

1. Trovare i modelli di sezioni nella barra degli strumenti

Apri una pagina CMS esistente, seleziona Modifica e accedi alla selezione dei modelli tramite Inserisci → Sezione pagina. Il menu contestuale offre anche l'elemento Blocco di testo per contenuti riutilizzabili più piccoli. Questo tutorial tratta inizialmente le sezioni di pagina.

Nella finestra Sezione pagina, vengono visualizzati i modelli disponibili con un'anteprima.

Scegli come esempio la categoria Clients. Sono disponibili diverse varianti di layout.

2. Dove sono salvati i modelli

I file di modelli si trovano nella cartella per sviluppatori /bx_Layout/. Apri questa cartella nel gestore file. Qui troverai, tra l'altro, file per sezioni di pagina (Section*.txt) e blocchi di testo (Tag*.txt).

Il nome del file determina l'assegnazione alla selezione dei modelli. Un modello di sezione pagina inizia sempre con Section; dopo segue il suo nome individuale. Per le varianti personali, prima dell'estensione del file si utilizza l'aggiunta _own.

Puoi anche creare un modello completamente nuovo. Per esso scegli un nome personale dopo Section. Se non esiste un file standard con lo stesso nome, il nuovo modello apparirà in aggiunta, anziché sostituire un modello esistente.

3. Perché non dovresti modificare direttamente i file standard

I file standard forniti con il CMS da /bx_Layout/ verranno sovrascritti durante gli aggiornamenti di sistema. Le modifiche dirette a SectionClients.txt o SectionBanner.txt non sono quindi permanenti. Copia il file standard desiderato e contrassegna la tua versione con _own. Le varianti _own associate sono previste per le tue modifiche individuali e resistenti agli aggiornamenti.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Se esistono entrambi i file, il CMS utilizza il corrispondente SectionClients_own.txt al posto del modello standard SectionClients.txt. Non è necessario rinominare la categoria Clients nell'editor.

Se crei invece un file personale con un nuovo nome, ad esempio SectionMyTemplate_own.txt, il modello standard Clients rimarrà comunque disponibile.

4. Struttura di un modello di sezione HTML: il separatore

Un file di sezione può contenere diverse varianti di layout della stessa categoria. Affinché l'editor CMS riconosca le singole varianti, devono essere separate dalla seguente marcatura di delimitazione:

<!--__SP_SectionTemplate__-->

Il marchio si trova all'inizio, tra le varianti e alla fine del file di esempio. Adotta la formattazione esatta. Se manca il segno di separazione, l'editor non può mostrarti più varianti come scelte distinte in modo affidabile.

Il modello standard SectionBanner.txt illustra questo principio con diversi layout di banner. Puoi usarlo come base per creare una tua sezione strutturata.

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

L'esempio è una variante di banner completa. Per una seconda variante, posiziona il suo codice HTML dopo l'ultimo segno di separazione e chiudi anche questa variante con lo stesso segno. La sezione stessa può poi essere strutturata secondo le tue esigenze.

Non è necessario aggiungere tu stesso la classe sectionAll: l'editor bluetronix la aggiunge automaticamente quando inserisci una sezione.

5. Copiare il modello dei clienti e cambiare il titolo

Apri il modello SectionClients esistente nel gestore file e osserva il suo codice HTML. Nel nostro esempio contiene un titolo, una descrizione e diverse tessere partner.

Copia il modello corrispondente come SectionClients_own.txt e apri la copia tramite Modifica. Aggiungi al titolo per il nostro test la stringa NEW!!!!. Puoi anche personalizzare il testo, il numero delle schede, le icone o il CSS.

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

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

Clicca su Salva e poi riapri la selezione Inserisci → Sezione → Clienti. Qui riconoscerai la tua versione dal titolo modificato. La seconda variante clienti può essere selezionata e modificata indipendentemente.

6. Offrire il proprio modello con un nuovo nome

Puoi anche creare un modello separato invece di un file sostitutivo con lo stesso nome. Ad esempio, copia una variante clienti e salvala come SectionMyTemplate_own.txt. La parte dopo Section è il nome del tuo modello; questo determinerà la nuova selezione nell'editor. Il modello originale Clients non sarà sostituito se si utilizza un altro nome.

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

In questo modo puoi sviluppare sezioni fisse per tipi di pagina specifici per un cliente, senza dover modificare i contenuti di tutti i modelli forniti.

7. Visualizzare esclusivamente i propri modelli con Only_own.txt

Se l'utente finale deve usare solo i tuoi modelli approvati, crea il file flag Only_own.txt nella cartella /bx_Layout/. Secondo la configurazione dei modelli mostrata, verranno offerte solo le file corrispondenti con il suffisso _own nella selezione dei modelli. Questa funzione non richiede alcun codice HTML.

/bx_Layout/Only_own.txt

Esempio: Se nel diretto SectionClients.txt, SectionBanner.txt e SectionMyTemplate_own.txt ci sono, l'attivazione di questa impostazione dovrebbe far sì che la selezione contenga solo il modello proprio corrispondente. In questo modo puoi fornire al cliente una selezione mirata e progettuale.

8. Creare i propri modelli di tag per i blocchi di testo

Lo stesso principio _own si applica ai più piccoli Blocco di Testo. I loro file iniziano con Tag. Ad esempio, TagTemplate.txt diventa TagTemplate_own.txt. Questa variante può essere fornita attraverso la voce Blocco di Testo nell'editor.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplica colonne modificabili con colAll

Se una sezione contiene più colonne ripetibili, una colonna con la classe colAll può essere riconosciuta come blocco autonomo. Di conseguenza, la funzione Colonna Articolo → Duplica è disponibile nel menu contestuale.

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

Durante la duplicazione, il blocco pertinente viene inserito come seconda colonna. Per una scheda ripetibile o una colonna articolo, è necessario posizionare colAll nel contenitore corretto. La classe principale sectionAll viene invece aggiunta automaticamente dall'editor.

10. Evidenziazioni e modelli multilingue

Le sezioni standard fornite contengono all'interno dei testi di esempio la stringa ­, per esempio prima e dopo i titoli. Questi segnali di testo non devono essere confusi con il segno di separazione <!--__SP_SectionTemplate__-->. Quando copi modelli esistenti, dovresti inizialmente mantenere tali segnali CMS se vuoi mantenere il comportamento precedente dell'editor.

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

Nei progetti multilingue, segnali di traduzione aggiuntivi possono essere utili, affinché i redattori possano gestire contenuti nelle lingue necessarie. Il CMS bluetronix è progettato per 24 lingue. Per un modello di progetto semplice e unicamente monolingue, puoi omettere segnali di traduzione aggiuntivi non necessari; i segnali di separazione delle sezioni necessari per l'editor devono rimanere.

11. Funzioni personalizzate e inclusi necessari

Se estendi un modello con funzioni PHP o output di modulo, usa nomi univoci per le tue funzioni. Una funzione esistente non può essere dichiarata nuovamente con lo stesso nome. Puoi proteggere la dichiarazione, ad esempio, utilizzando function_exists():

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

Gli include richiesti devono essere inseriti almeno una volta per sezione. Un segnale di include corrispondente può essere copiato dall'editor:

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

I file di modello interni con le estensioni .txt o .bx non sono previsti per l'accesso diretto tramite URL HTTP/HTTPS pubblici nell'attuale configurazione del server CMS. Vengono letti e elaborati lato server.

12. Perché i modelli limitati sono utili per i team editoriali

Con le tue sezioni e Only_own.txt stabilisci quali blocchi di layout finiti possono essere scelti dal cliente finale. Inoltre, nelle impostazioni utente è possibile limitare le funzioni dell'editor come il cambio di carattere o di colore. Gli editor possono quindi principalmente inserire sezioni predefinite, modificare testi e sostituire immagini, senza dover ristrutturare liberamente il design della pagina stabilito.

Questo metodo di lavoro è particolarmente adatto per progetti clienti più grandi, portali aziendali e team con più redattori. La progettazione rimane uniforme mentre i contenuti possono essere gestiti in modo flessibile.

13. Risultato e sintesi

Accedi a /bx_Layout/, copia un file di sezione esistente, aggiungi _own, adatta il codice HTML e verifica l'output sotto Inserisci → Sezione. Per nuove categorie di selezione, utilizza un nome di file proprio che inizi con Section.

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

Se attivi anche Only_own.txt e restringi correttamente i diritti dell'editor, i tuoi redattori possono lavorare miratamente con i modelli di sezione HTML propri forniti.