Ατομική προσαρμογή προτύπων τμημάτων HTML

Προϋποθέσεις και στόχος του tutorial

Χρειάζεσαι πρόσβαση στον HTML-Editor και τον Διαχειριστή Αρχείων του bluetronix CMS, καθώς και τα αντίστοιχα δικαιώματα προγραμματιστή για το φάκελο προτύπων. Σε αυτό το σεμινάριο θα μάθεις πώς να προσαρμόζεις υπάρχοντες σελίδες, να δημιουργείς τα δικά σου HTML Section Templates και, εφόσον χρειαστεί, να προσφέρεις στους συντάκτες σου αποκλειστικά εγκεκριμένα πρότυπα.

Δουλεύουμε με τα παραδείγματα προτύπων Clients και Banner. Τα πρότυπα προτεινόμενων αρχείων παραμένουν αμετάβλητα; οι ατομικές αλλαγές γίνονται με την ένδειξη _own.

1. Βρες τα πρότυπα τμημάτων στον επεξεργαστή

Άνοιξε μια υπάρχουσα σελίδα CMS, επέλεξε Επεξεργασία και άνοιξε την επιλογή προτύπων μέσω Εισαγωγή → Σελίδα-Τμήμα. Το μενού περιβάλλοντος προσφέρει επίσης την επιλογή Κείμενο-Μέρος για μικρότερες επαναχρησιμοποιήσιμες περιεχόμενα. Αυτό το σεμινάριο καλύπτει αρχικά τα τμήματα σελίδας.

Στο παράθυρο Σελίδας-Τμήμα εμφανίζονται τα διαθέσιμα πρότυπα με προεπισκόπηση. 

Επίλεξε ως παράδειγμα την κατηγορία Clients. Υπάρχουν διάφορες εκδόσεις διάταξης διαθέσιμες.

2. Πού αποθηκεύονται τα πρότυπα

Τα αρχεία προτύπων βρίσκονται στο φάκελο προγραμματιστή /bx_Layout/. Άνοιξε αυτόν τον φάκελο στον Διαχειριστή Αρχείων. Εκεί θα βρεις, μεταξύ άλλων, αρχεία για τμήματα σελίδας (Section*.txt) και κείμενα (Tag*.txt).

Το όνομα αρχείου καθορίζει τη σύνδεση με την επιλογή προτύπων. Ένα πρότυπο τμήματος σελίδας ξεκινά πάντα με Section; ακολουθεί το μοναδικό του όνομα. Για ιδιωτικές παραλλαγές χρησιμοποιείται ο επιπλέον _own πριν από την κατάληξη του αρχείου.

Μπορείς επίσης να δημιουργήσεις ένα εντελώς νέο πρότυπο. Για αυτό επιλέγεις ένα δικό σου όνομα μετά το Section. Αν δεν υπάρχει κάποιο πρότυπο με το ίδιο όνομα, το νέο πρότυπο θα εμφανιστεί επιπλέον, αντί να αντικαταστήσει κάποιο υπάρχον.

3. Γιατί δεν πρέπει να επεξεργάζεσαι απευθείας τα πρότυπα

Τα πρότυπα που παρέχονται με το CMS από το /bx_Layout/ θα αντικατασταθούν κατά τις ενημερώσεις συστήματος. Οι αλλαγές απευθείας στο SectionClients.txt ή στο SectionBanner.txt δεν είναι μόνιμες. Αντίγραφε το επιθυμητό πρότυπο και κάνε την δική σου έκδοση με το _own. Οι αντίστοιχες παραλλαγές _own προορίζονται για τις προσωπικές, ανθεκτικές σε ενημερώσεις προσαρμογές σου.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Αν υπάρχουν και τα δύο αρχεία, το CMS θα χρησιμοποιήσει το κατάλληλο SectionClients_own.txt αντί του προτύπου SectionClients.txt. Δεν χρειάζεται να μετονομάσεις την κατηγορία Clients στον επεξεργαστή.

Αν δημιουργήσεις ένα δικό σου αρχείο με ένα νέο όνομα, για παράδειγμα SectionMyTemplate_own.txt, το πρότυπο Clients θα παραμείνει επίσης διαθέσιμο.

4. Δημιουργία προτύπου HTML Section: η διαχωριστική ένδειξη

Ένα αρχείο Section μπορεί να περιέχει πολλές παραλλαγές διάταξης της ίδιας κατηγορίας. Για να αναγνωρίσει ο επεξεργαστής CMS τις διαφορετικές παραλλαγές, θα πρέπει να διαχωρίζονται με την εξής σήμανση:

<!--__SP_SectionTemplate__-->

Η σήμανση τοποθετείται στην αρχή, μεταξύ των παραλλαγών και στο τέλος του παραδείγματος αρχείου. Αντέγραψε την γραφή ακριβώς. Αν λείπει η σήμανση διαχωρισμού, ο επεξεργαστής δεν μπορεί να εμφανίσει με συνέπεια τις παραλλαγές ως ξεχωριστές επιλογές.

Το πρότυπο SectionBanner.txt δείχνει αυτή την αρχή με αρκετές διαφορετικές διατάξεις banner. Μπορείς να το χρησιμοποιήσεις ως βάση για ένα δικό σου, απλά δομημένο 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__-->

Το παράδειγμα είναι μια πλήρης παραλλαγή banner. Για μια δεύτερη παραλλαγή, τοποθέτησε τον HTML κώδικα πίσω από την τελευταία σήμανση διαχωρισμού και κλείσε και αυτήν την παραλλαγή ξανά με την ίδια σήμανση. Στη συνέχεια, μπορείς να διαμορφώσεις το ίδιο το Section σύμφωνα με τις απαιτήσεις σου.

Δεν χρειάζεται να προσθέσεις εσύ την κατηγορία sectionAll: Ο επεξεργαστής bluetronix την προσθέτει αυτόματα όταν εισάγεις ένα τμήμα σελίδας.

5. Αντίγραψε το πρότυπο πελατών και άλλαξε τον τίτλο

Άνοιξε το υπάρχον πρότυπο SectionClients στον διαχειριστή αρχείων και δες τον HTML κώδικά του. Στο παράδειγμά μας περιέχει έναν τίτλο, μια περιγραφή και πολλές κάρτες συνεργατών.

Αντέγραψε το αντίστοιχο πρότυπο ως SectionClients_own.txt και άνοιξε την αντίγραφη μέσω Επεξεργασία. Πρόσθεσε στον τίτλο για τη δοκιμή μας την ακολουθία χαρακτήρων NEW!!!!. Μπορείς επίσης να αλλάξεις το κείμενο, τον αριθμό των καρτών, τα σύμβολα ή το CSS.

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

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

Κάνε κλικ στο Αποθήκευση και μετά άνοιξε ξανά την επιλογή Εισαγωγή → Τμήμα Σελίδας → Πελάτες. Εκεί θα αναγνωρίσεις την δική σου έκδοση από τον τροποποιημένο τίτλο. Η δεύτερη παραλλαγή Clients μπορεί να επιλεγεί και να επεξεργαστεί ανεξάρτητα.

6. Πρόσφερε το δικό σου πρότυπο με νέο όνομα

Μπορείς αντί για ένα αντικαθιστών αρχείο με το ίδιο όνομα να δημιουργήσεις επίσης ένα ξεχωριστό πρότυπο. Αντέγραψε για παράδειγμα μια παραλλαγή Clients και αποθήκευσε την ως SectionMyTemplate_own.txt. Το μέρος πίσω από το Section είναι το δικό σου όνομα προτύπου; αυτό καθορίζει την νέα επιλογή στον επεξεργαστή. Το αρχικό πρότυπο Clients δεν θα αντικατασταθεί με άλλο όνομα.

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

Έτσι μπορείς να αναπτύξεις σταθερά τμήματα για ορισμένους τύπους σελίδων για έναν πελάτη, χωρίς να χρειάζεται να αλλάξεις περιεχομενικά όλα τα παρεχόμενα πρότυπα.

7. Εμφάνισε αποκλειστικά τα δικά σου πρότυπα με το Only_own.txt

Αν ο τελικός πελάτης πρέπει να χρησιμοποιεί μόνο τα επαγγελματικά πρότυπα που έχεις εγκρίνει, δημιούργησε στον φάκελο /bx_Layout/ το αρχείο σημαίας Only_own.txt. Σύμφωνα με την εμφανιζόμενη διαμόρφωση προτύπων, μόνο οι κατάλληλες δικές σου αρχεία με το επίθημα _own θα προσφέρονται στην επιλογή προτύπων. Το αρχείο δεν απαιτεί HTML κώδικα για αυτή τη λειτουργία.

/bx_Layout/Only_own.txt

Παράδειγμα: Αν υπάρχουν στον κατάλογο SectionClients.txt, SectionBanner.txt και SectionMyTemplate_own.txt, η επιλογή μετά την ενεργοποίηση αυτής της ρύθμισης θα πρέπει να περιέχει μόνο το κατάλληλο δικό πρότυπο. Έτσι μπορείς να προσφέρεις στον πελάτη μια στοχευμένη επιλογή που σχετίζεται με το έργο.

8. Δικές σου ετικέτες προτύπων για κείμενα

Το ίδιο _own-αρχή ισχύει και για τα μικρότερα κείμενα-μπλοκ. Τα αρχεία τους αρχίζουν με Tag. Από το TagTemplate.txt γίνεται για παράδειγμα TagTemplate_own.txt. Αυτή την παραλλαγή μπορείς να την προσφέρεις μέσω της καταχώρησης Κείμενο-μπλοκ στον επεξεργαστή.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Αντίγραψε επεξεργάσιμες στήλες με colAll

Αν ένα τμήμα περιέχει πολλές επαναλαμβανόμενες στήλες, μια στήλη με την κατηγορία colAll μπορεί να αναγνωριστεί ως αυτόνομο μπλοκ. Έτσι στην αναδυόμενη αναφορά είναι διαθέσιμη η λειτουργία Στήλη άρθρων → Διπλασίαση.

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

Κατά την διαδικασία διπλασιασμού, το σχετικό μπλοκ εισάγεται ως δεύτερη στήλη. Για μια επαναλαμβανόμενη κάρτα ή στήλη άρθρων, πρέπει να τοποθετήσεις το colAll στο σωστό περιέκτη. Η υπερκατηγορία sectionAll έρχεται αυτόματα από τον επεξεργαστή.

10. Ετικέτες κειμένου και πολυγλωσσικά πρότυπα

Τα διαθέσιμα πρότυπα Sections περιέχουν μέσα στα κείμενα παραδείγματα την ακολουθία ­, για παράδειγμα πριν και μετά από τίτλους. Αυτοί οι χαρακτηρισμοί κειμένου δεν πρέπει να συγχέονται με τη σήμανση διαχωρισμού <!--__SP_SectionTemplate__-->. Κατά την αντιγραφή υπαρχόντων προτύπων, θα πρέπει να διατηρήσεις αυτές τις σήμανσεις CMS αρχικά, αν θέλεις να διατηρήσεις την τρέχουσα συμπεριφορά του επεξεργαστή.

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

Σε πολύγλωσσα έργα, οι επιπλέον σήμανσεις μετάφρασης μπορεί να είναι χρήσιμες, ώστε οι συντάκτες να μπορούν να διαχειρίζονται το περιεχόμενο στις απαραίτητες γλώσσες. Το bluetronix CMS είναι σχεδιασμένο για 24 γλώσσες. Για μια απλή, αποκλειστικά μονογλωσσο έργο πρότυπο, μπορείς να παραλείψεις τις επιπλέον σήμανσεις μετάφρασης που δεν χρειάζονται; οι σήμανσεις διαχωρισμού τμήματος που είναι απαραίτητες για τον επεξεργαστή πρέπει να παραμείνουν.

11. Δικές σου λειτουργίες και απαραίτητες συμπεριλήψεις

Όταν επεκτείνεις ένα πρότυπο με PHP λειτουργίες ή μονάδες, χρησιμοποίησε μοναδικά ονόματα για τις δικές σου λειτουργίες. Μια υπάρχουσα λειτουργία δεν μπορεί να δηλωθεί ξανά με το ίδιο όνομα. Μπορείς να επαληθεύσεις τη δήλωση με το function_exists():

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

Απαιτούμενα includes θα πρέπει να είναι ενσωματωμένα τουλάχιστον μία φορά ανά τμήμα. Ένας αντίστοιχος δείκτης include μπορεί να αντιγραφεί μέσω του επεξεργαστή:

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

Τα εσωτερικά αρχεία προτύπων με καταλήξεις .txt ή .bx δεν προορίζονται για άμεση πρόσβαση μέσω δημόσιων HTTP-/HTTPS-URLs στη καθορισμένη διαμόρφωση διακομιστή CMS. Διαβάζονται και επεξεργάζονται από το διακομιστή.

12. Γιατί οι περιορισμένες προτύπους είναι χρήσιμοι για ομάδες συντακτών

Με δικές σου ενότητες και Only_own.txt καθορίζεις ποιες έτοιμες δομές διάταξης μπορεί να επιλέξει ο τελικός χρήστης. Επιπλέον, στις ρυθμίσεις χρήστη μπορούν να περιοριστούν λειτουργίες επεξεργασίας όπως η αλλαγή γραμματοσειράς ή χρώματος. Οι συντάκτες μπορούν κυρίως να εισάγουν προκαθορισμένα τμήματα, να επεξεργάζονται κείμενα και να αλλάζουν εικόνες χωρίς να χρειάζεται να αναδιαρθρώσουν ελεύθερα τη δεδομένη διάταξη της σελίδας.

Αυτή η εργασία είναι ιδιαίτερα κατάλληλη για μεγάλα πελατειακά έργα, εταιρικές πύλες και ομάδες με πολλούς συντάκτες. Η σχεδίαση παραμένει ομοιόμορφη, ενώ τα περιεχόμενα μπορούν να διαχειρίζονται με ευελιξία.

13. Αποτέλεσμα και σύνοψη

Ανοίγεις /bx_Layout/, αντιγράφεις ένα υπάρχον αρχείο ενότητας, προσθέτεις _own, προσαρμόζεις τον HTML κώδικα και ελέγχεις την έξοδο κάτω από Εισαγωγή → Τμήμα Σελίδας. Για νέες κατηγορίες επιλογών χρησιμοποιείς ένα δικό σου όνομα αρχείου που ξεκινάει με Section.

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

Εάν επίσης ενεργοποιήσεις το Only_own.txt και περιορίσεις κατάλληλα τα δικαιώματα επεξεργασίας, οι συντάκτες σου μπορούν να εργάζονται συγκεκριμένα με τα παρεχόμενα δικά τους HTML Section Templates.