Ενσωμάτωσε δικά σου JavaScript και CSS αρχεία στο bluetronix CMS
Σε αυτό το σεμινάριο, θα ενσωματώσεις ένα δικό σου αρχείο JavaScript και ένα δικό σου stylesheet στη διάταξη της ιστοσελίδας σου. Θα γνωρίσεις τον κανόνα _own και θα μάθεις πώς η έκδοση αρχείων βοηθά σε αλλαγές.
Προϋποθέσεις και στόχος
Για αυτό το σεμινάριο χρειάζεστε μια πρόσβαση προγραμματιστή στο bluetronix CMS και πρέπει να γνωρίζετε τη δομή των διατάξεων και των φακέλων προγραμματιστών. Θα μάθετε πώς να προσθέτετε τα δικά σας JavaScript και CSS αρχεία εκτός από τα υπάρχοντα αρχεία CMS, χωρίς να τροποποιείτε τα πρωτότυπα αρχεία του συστήματος.
Χρησιμοποιούμε τα αρχεία BxHeadScript_own.js και BxStyle_own.css που εμφανίζονται στα στιγμιότυπα οθόνης. Και τα δύο αρχεία ενσωματώνονται ρητά στη διάταξη, ώστε το CMS να τα λάβει υπόψη κατά τη φόρτωση της ιστοσελίδας.
1. Άνοιγμα διάταξης
Ανοίξτε την ενότητα Διάταξη στο CMS και επιλέξτε Διάταξη - HTML. Έπειτα ανοίξτε τη διάταξη στην οποία θέλετε να ενσωματώσετε τα αρχεία JavaScript και CSS σας. Σε αυτό το παράδειγμα χρησιμοποιούμε τη βασική διάταξη.
Στον ορισμό της διάταξης θα βρείτε ήδη ενσωματωμένες τις κεντρικές αρχεία CMS, όπως το BxHeadScript.js και το BxStyle.css. Μπορείτε να προσθέσετε τα πρόσθετα δικά σας αρχεία ακριβώς δίπλα.
2. Δημιουργία δικού σου αρχείου JavaScript στον Διαχειριστή Αρχείων
Ανοίξτε τον Διαχειριστή Αρχείων και μεταβείτε στον φάκελο συστήματος bx_script, που έχει σημειωθεί με κόκκινο. Εκεί θα βρείτε τα κεντρικά αρχεία JavaScript του bluetronix CMS και αν χρειαστεί, γλωσσικές παραλλαγές.
Δημιουργήστε εκεί το δικό σας αρχείο BxHeadScript_own.js ή επιλέξτε το αν υπάρχει ήδη. Μπορείτε να αντιγράψετε ένα κατάλληλο υπάρχον αρχείο ως πρότυπο.
Επιλέξτε Επεξεργασία για να ανοίξετε τον κώδικα JavaScript του δικού σας αρχείου στον επεξεργαστή κειμένου.
Στο εμφανιζόμενο παράδειγμα το αρχείο περιέχει τον δικό του κώδικα JavaScript για την επιλογή μεταξύ Dark Mode και Light Mode. Στον επεξεργαστή κειμένου μπορείτε να διατηρήσετε τον συγκεκριμένο κώδικα JavaScript του πρότζεκτ σας και στη συνέχεια να τον αποθηκεύσετε.
Μην τροποποιείτε το πρωτότυπο BxHeadScript.js για τις δικές σας επεκτάσεις. Αρχεία εντός των bx_ φακέλων συστήματος μπορεί να αντικατασταθούν κατά την αναβάθμιση του CMS. Σημειώστε τα δικά σας αρχεία εκεί με _own.
3. Ενσωμάτωση δικού σου αρχείου JavaScript στη διάταξη
Επιστρέψτε στο Διάταξη - HTML. Συμπληρώστε το δικό σας αρχείο JavaScript επιπλέον από το υπάρχον αρχείο CMS. Αν θέλετε το σκριπτ σας να φορτωθεί νωρίς, προσθέστε το όπως απεικονίζεται στο στιγμιότυπο στον τομέα head μετά το υπάρχον Head-Script.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
Η επιπλέον γραμμή φορτώνει τον δικό σας κώδικα JavaScript. Το αρχικό BxHeadScript.js παραμένει αμετάβλητο. Η διαδρομή αρχείου και η ορθογραφία του δικού σας αρχείου πρέπει να συμφωνούν με το αρχείο στον διαχειριστή αρχείων.
4. Δημιουργία δικού σου αρχείου CSS στον Διαχειριστή Αρχείων
Ανοίξτε στο Διαχειριστή Αρχείων το φάκελο συστήματος bx_style. Εκεί βρίσκεται μεταξύ άλλων το κεντρικό stylesheet BxStyle.css. Για τις δικές σας προσαρμογές χρησιμοποιούμε ένα ξεχωριστό αρχείο που ονομάζεται BxStyle_own.css.
Δημιουργήστε το αρχείο BxStyle_own.css ή ανοίξτε το υπάρχον δικό σας αρχείο. Το αρχείο του συστήματος BxStyle.css παραμένει ανέπαφο.
Μέσω του Επεξεργασία μπορείτε σε αυτό το αρχείο να καταχωρήσετε και να αποθηκεύσετε τους δικούς σας κανόνες CSS.
5. Ενσωμάτωση δικού σου αρχείου CSS στη διάταξη
Ανοίξτε ξανά το Διάταξη - HTML. Στον τομέα head προσθέτετε το δικό σας αρχείο CSS μετά το υπάρχον stylesheet. Η σειρά είναι σημαντική εάν οι δικοί σας κανόνες θα πρέπει να υπερκαλύψουν τη βασική μορφοποίηση.
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
Η βασική CSS διατηρείται, ενώ εσείς διαχειρίζεστε ξεχωριστά τις επιπλέον ή αποκλίνουσες μορφοποιήσεις στο BxStyle_own.css.
6. Χρήση JavaScript στο Head ή στο τέλος της σελίδας
Τα αρχεία JavaScript μπορούν να ενσωματωθούν είτε στον τομέα head ή στο τέλος της σελίδας πριν από το κλείσιμο της ετικέτας body, ανάλογα με την εργασία τους. Το αναφερόμενο BxHeadScript_own.js φορτώνεται στο Head. Για άλλα σκριπτ μπορείτε επίσης να χρησιμοποιήσετε έναν δικό σας φάκελο πρότζεκτ και να ενσωματώσετε το αρχείο αργότερα στη διάταξη.
Παράδειγμα για ένα επιπλέον αρχείο από έναν δικό σας φάκελο στο τέλος της σελίδας:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Αυτό το παράδειγμα δείχνει ένα επιπλέον αρχείο. Αντί να αντικαταστήσετε ένα σύστημα αρχείου με μια δική σας έκδοση, πρέπει να ρυθμίσετε τις αντίστοιχες ενσωματώσεις στη διάταξή σας συνειδητά και να ελέγξετε ότι δεν έχουν αφαιρεθεί απαραίτητες λειτουργίες του CMS.
7. Διαφορετικοί φάκελοι συστήματος και δικοί σας φακέλοι πρότζεκτ
Οι κόκκινα επισημασμένοι bx_ φάκελοι ανήκουν στο bluetronix CMS. Τα δικά σας αρχεία εντός αυτών των φακέλων πρέπει να σημειώνονται με _own, ώστε να μην αντιμετωπίζονται όπως τα αρχεία συστήματος κατά τις κανονικές αναβαθμίσεις του CMS.
Μπορείτε εναλλακτικά να τοποθετήσετε τα δικά σας αρχεία JavaScript και CSS σε αυτοδημιούργητους φακέλους πρότζεκτ χωρίς κατάλληλο πρόθεμα bx_, όπως /script/ ή /my_scripts/. Εκεί η σημείωση _own δεν είναι υποχρεωτική. Θα πρέπει να χρησιμοποιήσετε τη σωστή διαδρομή στη διαμόρφωση της διάταξής σας.
Η σημείωση _own δεν αντικαθιστά την ενσωμάτωση στη διάταξη: Ένα ξεχωριστά δημιουργημένο αρχείο θα φορτωθεί μόνο όταν ενσωματωθεί μέσω της κατάλληλης γραμμής script ή link.
8. Αυτόματη εκδοχή αρχείου
Στις εμφανιζόμενες συνδέσεις σχεδίασης, το CMS bluetronix χρησιμοποιεί την επισήμανση __FV_…__. Μέσω αυτού, το CMS μπορεί να προσθέτει έναν παράμετρο έκδοσης βάσει της ημερομηνίας τροποποίησης. Μετά από αλλαγή, ο περιηγητής φορτίζει το τρέχον αρχείο JavaScript ή CSS, αντί να χρησιμοποιεί μια παλαιότερη έκδοση που έχει αποθηκευτεί στην cache.
Παράδειγμα: Ένα αρχικό μονοπάτι όπως /script/MyScript.js μπορεί να συμπληρωθεί με μια παράμετρο έκδοσης μετά τη διαδικασία. Δεν χρειάζεται να ενημερώνεις χειροκίνητα τον αριθμό έκδοσης σε κάθε συνδεδεμένο αρχείο σε κάθε διάταξη.
9. Αποθήκευση και έλεγχος αλλαγών
Αρχικά, αποθήκευσε τα δικά σου αρχεία JavaScript και CSS και στη συνέχεια τη επεξεργασμένη διάταξη. Ανανεώστε την ιστοσελίδα σου και έλεγξε αν οι JavaScript λειτουργίες σου εκτελούνται και οι δικοί σου κανόνες CSS εφαρμόζονται.
Αν ένα αρχείο δεν φορτώνεται, έλεγξε πρώτα το όνομα του αρχείου, τα κεφαλαία και πεζά γράμματα, το φάκελο και την ενσωμάτωσή του στη διάταξη. Αν χρησιμοποιούνται πολλές διατάξεις, έλεγξε επίσης αν έχεις επεξεργαστεί τη διάταξη που έχει ανατεθεί στην αντίστοιχη σελίδα.
Περίληψη
Για τις δικές σου επεκτάσεις, για παράδειγμα, δημιούργησε το BxHeadScript_own.js στον φάκελο bx_script και το BxStyle_own.css στον φάκελο bx_style. Στη συνέχεια, ενσωμάτωσε και τα δύο αρχεία στο Layout - HTML εκτός από τα αρχικά αρχεία CMS. Έτσι, τα αρχεία προτύπου παραμένουν αμετάβλητα, ενώ διαχειρίζεσαι τον συγκεκριμένο για το έργο JavaScript και CSS κώδικα ξεχωριστά.
Συχνές Ερωτήσεις
τι ρωτούν συχνά οι πελάτες μας
Χρειάζομαι πρόσβαση προγραμματιστή για να ενσωματώσω τα δικά μου JavaScript και CSS αρχεία;
Ναι. Αυτό το σεμινάριο απευθύνεται σε προγραμματιστές που έχουν πρόσβαση στον ορισμό διάταξης και στους φακέλους προγραμματιστών του bluetronix CMS.
Πού μπορώ να βρω τις ενσωματώσεις για JavaScript και CSS;
Άνοιξε το Layout και επίλεξε το Layout - HTML. Εκεί μπορείς να προσθέσεις τις ενσωματώσεις στην επιθυμητή διάταξη.
Πού αποθηκεύω ένα δικό μου αρχείο JavaScript;
Στο δείγμα που παρουσιάζεται, δημιουργείς το BxHeadScript_own.js στον φάκελο bx_script και το ενσωματώνεις επιπλέον στο υπάρχον BxHeadScript.js στη διάταξη.
Πού αποθηκεύω ένα δικό μου αρχείο CSS;
Στο δείγμα που παρουσιάζεται, το δικό σου αρχείο BxStyle_own.css βρίσκεται στον φάκελο bx_style. Στη διάταξη, ενσωματώνεται μετά το υπάρχον stylesheet.
Γιατί θα πρέπει τα δικά μου αρχεία να περιλαμβάνουν _own στο όνομά τους;
Οι φάκελοι συστήματος bx_ που είναι επισημασμένοι με κόκκινο μπορεί να αντικατασταθούν κατά τις ενημερώσεις. Με το _own επισημαίνεις τα δικά σου αρχεία που είναι συγκεκριμένα για το έργο.
Φορτώνεται αυτόματα ένα _own αρχείο μόλις δημιουργηθεί;
Όχι. Πρέπει να προσθέσεις το δικό σου αρχείο JavaScript ή CSS στη διάταξη με μια κατάλληλη ενσωμάτωσή script ή link.
Μπορώ να χρησιμοποιήσω έναν δικό μου φάκελο αντί για έναν φάκελο συστήματος bx_;
Ναι. Σε έναν αυτοδημιούργητο φάκελο έργου χωρίς bx_ πρόθεμα, το _own δεν είναι απαραίτητο. Χρησιμοποιήστε στη διάταξη τη πραγματική διαδρομή αρχείου.
Πρέπει να φορτώσω το δικό μου αρχείο CSS πριν ή μετά το αρχείο προτύπου;
Στο δείγμα που παρουσιάζεται, το BxStyle_own.css ενσωματώνεται μετά το BxStyle.css. Έτσι οι δικοί σου κανόνες με την ίδια συγκεκριμένη προτεραιότητα μπορούν να αντικαταστήσουν τους κανόνες προτύπου που έχουν φορτωθεί νωρίτερα.
Ποιο είναι το νόημα της επισήμανσης __FV_…__ στους διαδρομές αρχείων;
Το bluetronix CMS μπορεί έτσι να προσθέσει μια παράμετρο έκδοσης αρχείου, ώστε οι περιηγητές να φορτώνουν το τρέχον αρχείο μετά από μια αλλαγή.
Τι πρέπει να ελέγξω αν το δικό μου αρχείο δεν λειτουργεί;
Ελέγξτε το όνομα του αρχείου, τα κεφαλαία και πεζά γράμματα, τη διαδρομή καθώς και την ενσωμάτωσή του και την επιλογή της σωστής διάταξης.