Μενού MODX πολλαπλών επιπέδων χρησιμοποιώντας Bootstrap. Αλλαγή του επάνω μενού Αλλαγή της σειράς των στοιχείων μενού
Σε προηγούμενα μαθήματα έχουμε ήδη δημιουργήσει ένα μενού MODX: 1η - και 2η - Έξοδος ενός τυπικού αναπτυσσόμενου μενού MODX χρησιμοποιώντας το Bootstrap. Σήμερα θα μάθουμε πώς να εμφανίζουμε μενού Bootstrap πολλαπλών επιπέδων με απεριόριστο βαθμό ένθεσης (μενού 3 επιπέδων, 4 επιπέδων, 5 επιπέδων κ.λπ.).
Για παράδειγμα, θα εμφανίσω ένα μενού Bootstrap 5 επιπέδων, αλλά μπορείτε να το κάνετε 3 ή 7 επιπέδων, ακόμη και 10, αλλάζοντας την τιμή επίπεδοσε ότι χρειάζεσαι!
Εμφάνιση ενός μενού Bootstrap πολλαπλών επιπέδων (με απεριόριστη ένθεση) σε MODX χρησιμοποιώντας το PdoMenu.
Η έξοδος του μενού πολλαπλών επιπέδων θα είναι η εξής:
[]>[[+περιτύλιγμα]]` &tplInner=`@INLINE
` &tplParentRow=`@INLINEΔεν θα λειτουργήσει από το κουτί. δεδομένου ότι το Bootstrap 3 από προεπιλογή υποστηρίζει μόνο 2 επίπεδα ένθεσης και για να επεκτείνετε το επίπεδο ένθεσης του μενού bootstrap 3, πρέπει να συμπεριλάβετε ένα αρχείο js με το ακόλουθο περιεχόμενο.
(function($)( $(document).ready(function())($("ul.dropdown-menu").on("click", function(event) ( event.preventDefault(); event.stopPropagation( ) ; $(this).parent().removeClass("open").parent().toggleClass("open" ));
Μετά από αυτό θα αρχίσει να ανοίγει η 3η, η 4η κ.λπ. επίπεδα φωλιάς. Κατ 'αρχήν, όλα, αλλά υπάρχει ένα πράγμα, αυτό το μενού θα ανοίξει όλα τα επίπεδα προς τα κάτω, και αυτό, κατά τη γνώμη μου, δεν είναι ιδιαίτερα σωστό ή όμορφο, αλλά μπορεί να διορθωθεί με Βοήθεια CSS.
Στην περίπτωσή μου, χρειάστηκαν 2 γραμμές κώδικα CSS για να πέσουν τα επίπεδα στο πλάι.
Ul.dropdown-menu (αριστερά: 100%;πάνω: -8px;) li.submenu1.dropdown.open>ul.dropdown-menu (αριστερά: 0%; επάνω: 100%;)
Μπορεί να λάβετε έναν ελαφρώς διαφορετικό (αλλά πανομοιότυπο) κωδικό και ο αριθμός των γραμμών του μπορεί να είναι μεγαλύτερος εάν έχετε πολλούς κλάδους μενού με υπομενού. Λοιπόν, υπάρχουν ακόμα μερικά μικρά πράγματα που θα πρέπει να προσαρμόσετε το CSS για να ταιριάζει με το γούστο σας, στόχος μου είναι να δείξω τα βασικά. Πώς να βρείτε τις απαραίτητες κλάσεις CSS στον κώδικα στον οποίο πρέπει να εφαρμόσετε στυλ φαίνεται στο βίντεο, αλλά για να είμαστε πιο ακριβείς, ολόκληρη η διαδικασία δημιουργίας ενός μενού πολλαπλών επιπέδων εμφανίζεται εκεί.
Αυτό είναι το μενού στο βίντεό μου:
Εάν έπρεπε να περιστρέψετε τα τρίγωνα σε ένα αναπτυσσόμενο μενού (δείχνουν προς τα κάτω όταν τα στοιχεία πέφτουν προς τα αριστερά), θα μοιάζει με αυτό.
Στη συνέχεια, προσθέστε τον ακόλουθο κώδικα css:
Li.submenu2.dropdown>a>span.caret ( -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); rotate(-95deg); -webkit. -transform: rotate(-95deg) -o-transform: rotate(-95deg); 95 μοίρες)
Ημερομηνία δημοσίευσης: 02/07/2011
Σε αυτό το απλό σεμινάριο θα σας δείξω πώς να προσαρμόσετε το μενού.
Κάποτε μου ζητήθηκε να διορθώσω ένα σφάλμα με ένα μενού σε έναν ιστότοπο - ορισμένα στοιχεία δεν ήθελαν πεισματικά να ευθυγραμμιστούν, αλλά αντ' αυτού εμφανίστηκαν σε απροσδόκητα σημεία της σελίδας όταν τοποθετείτε τον κέρσορα. Το σφάλμα δεν ήταν σε στραβά css, όπως υπέθεσα αρχικά, αλλά σε μια στραβά κλήση Wayfinder.
Τι είναι το Wayfinder- αυτό είναι ένα απόσπασμα που χρησιμοποιείται όταν χρειάζεται να εμφανίσετε μια λίστα εγγράφων σε μια ενότητα/ες. Ως αποτέλεσμα του αποσπάσματος, δημιουργείται μια λίστα χωρίς αρίθμηση. Χρησιμοποιώντας διάφορες παραμέτρους, μπορείτε να κάνετε οτιδήποτε με αυτήν τη λίστα :) Μπορείτε να διαβάσετε περισσότερα στην τεκμηρίωση ή πληκτρολογώντας στο Google - "wayfinder modx wiki".
Σημαντικές σημειώσεις:
1. Σχετικά με το τι είναι το MODx, πώς να εγκαταστήσετε το MODx, πώς να οργανώσετε τη δομή των εγγράφων, πώς να φτιάξετε ένα πρότυπο από html, τι είναι ένα κομμάτι κ.λπ. Δεν εξετάζω ερωτήσεις από αρχάριους σε αυτό το μάθημα.
2. Τα σύμβολα κράτησης θέσης που θα χρησιμοποιήσω στο μάθημα υποδεικνύονται με τη μορφή που «καταλαβαίνει» η έκδοση Evo. Ποια είναι η διαφορά, δείτε το παράδειγμα:
Λοιπόν, ας δούμε τη δημιουργία ενός μενού βήμα προς βήμα.
Βήμα 1
Για το μάθημα σκιαγράφησα αυτό το μενού:
Εδώ, για λόγους σαφήνειας, έχω εφαρμόσει διαφορετικά στυλ σε διαφορετικά επίπεδα μενού. Στον ιστότοπο όπου διόρθωσα το σφάλμα με το μενού, ήταν περίπου το ίδιο - κάθε επίπεδο μενού έχει το δικό του στυλ.
Διάταξη - οι λεπτομέρειες της διάταξης δεν περιλαμβάνονται στο πεδίο εφαρμογής αυτού του μαθήματος, αυτός είναι ο κωδικός που πήρα:
Αφού θαυμάσουμε τον κώδικα, προσδιορίζουμε μόνοι μας ποια κατηγορία στο μενού μας είναι υπεύθυνη για τι (αν ψάχνετε στον κώδικα κάποιου άλλου, θα πρέπει να είναι ξεκάθαρο στον δικό σας):
ul class="menu" - κατηγορία ολόκληρου του μενού
li class="top" - κατηγορία στοιχείων μενού ανώτατου επιπέδου
a class="top_link" - κατηγορία για συνδέσμους σε στοιχεία ανώτατου επιπέδου
ul class="sub" - κατηγορία για το υπομενού
Λοιπόν, span class="down" για το σχεδιασμό αντικειμένων ανώτατου επιπέδου
Βήμα 2. Δημιουργήστε τρία έγγραφα
Προϊόντα
- Παράδοση
- Προμηθευτές
Δημιουργούμε παιδικά έγγραφα για το έγγραφο “Προϊόντα”: “Truth Serum”, “Makropoulos Remedy”, “Universal Remedies”.
Βήμα 3. Τοποθετήστε το μενού σε ξεχωριστό κομμάτι
Στο πρότυπο, στο μέρος όπου θα πρέπει να έχετε ένα μενού, αφαιρέστε όλους τους περιττούς κωδικούς (το κώδικας htmlμενού), γράφουμε αντ' αυτού
((μενού))Έτσι, βάζουμε το μενού σε ξεχωριστό κομμάτι. Στη συνέχεια δημιουργούμε ένα νέο κομμάτι και το καλούμε μενού. Προς το παρόν, μπορείτε να αντιγράψετε τον κωδικό μενού που δημιουργήσατε στα περιεχόμενα του κομματιού. Για λογους σαφηνειας.
Μεταβείτε στον πίνακα διαχείρισης στο "Ιστότοπος" -> "Προβολή" - για να ελέγξετε ότι όλα είναι εντάξει με τις διαδρομές προς το αρχείο στυλ και τις εικόνες.
Συνέβη; Εντάξει, αλλά αυτό δεν είναι ακόμα μενού. Ας δώσουμε ζωή σε αυτό με τη βοήθεια του Wayfinder.
Βήμα 4
Καταργήστε όλα τα περιεχόμενα του τμήματος του μενού και καλέστε το απόσπασμα Wayfinder.
Προς το παρόν ας το γράψουμε ως εξής:
παράμετρος startId- υποδεικνύει από ποιο έγγραφο θα ξεκινήσει η δημιουργία της λίστας. Έχουμε καθορίσει το 0 - αυτό σημαίνει ότι η λίστα σχηματίζεται από τη ρίζα του δέντρου εγγράφων.
Ας δούμε τι έγινε:
Αυτό είναι ένα λειτουργικό και ζωντανό μενού. Μετονομασία εγγράφων, διαγραφή, προσθήκη - το μενού θα διαμορφωθεί σύμφωνα με το δέντρο εγγράφων.
Βήμα 5
5.1. Τώρα επαναφέρουμε την εμφάνιση του μενού στο κανονικό
Το Wayfinder από προεπιλογή δημιουργεί έναν απλό κώδικα () , όλες οι κατηγορίες λιστών και στοιχείων καθορίζονται από ειδικές παραμέτρους όταν καλούνται.
Στην αρχή του μαθήματος, καθορίσαμε ποιες κλάσεις CSS στο μενού μας είναι υπεύθυνες για τι. Το Wayfinder έχει τις παραμέτρους που χρειαζόμαστε: outerClass- τάξη για το κοντέινερ μενού. Σε σύγκριση με τη διάταξή μας, λαμβάνουμε την ακόλουθη κλήση Wayfinder:
[[ Wayfinder; &startId=`0` &level=`2` &outerClass=`μενού`]]εκτός από παραμέτρους με κλάσεις, υποδεικνύουμε επίπεδο ένθεσης - &level=`2`.
Σημειώνουμε τις ελλείψεις - δεν υπάρχουν κατηγορίες για στοιχεία μενού ανώτατου επιπέδου, δεν υπάρχουν ετικέτες και μια κλάση για το υπομενού.
Όλες αυτές οι ελλείψεις διορθώνονται προσθέτοντας τις κατάλληλες παραμέτρους στην κλήση Wayfinder.
5.2. Προσθήκη τάξεων σε αντικείμενα και ετικέτες ανώτατου επιπέδου
Υπάρχει μια μεταβλητή για αυτό rowTpl, το οποίο περιγράφει ένα πρότυπο για ένα στοιχείο μενού, φτιάχνουμε ένα τέτοιο πρότυπο, για αυτό δημιουργούμε ένα κομμάτι που ονομάζεται μητρική εταιρεία:
Στην κλήση Wayfinder προσθέτουμε &rowTpl='γονικός' .
Μην ξεχάσετε να ελέγξετε πηγή- σχεδόν όλα είναι καλά, απομένει μόνο ένα υπομενού.
Για να διαμορφώσετε το υπομενού, χρησιμοποιήστε τη μεταβλητή innerRowTpl.
Δημιουργία κομματιού εσωτερικός:
Προσθέστε μια μεταβλητή στην κλήση Wayfinder innerRowTpl=`εσωτερικό`και μια μεταβλητή που καθορίζει την κλάση για το κοντέινερ υπομενού &innerClass=`sub` .
Η τελική κλήση Wayfinder μοιάζει με αυτό:
[ ]Αυτό ήταν, το μενού μας είναι έτοιμο. Καλή τύχη!
Wayfinderχρησιμεύει για την οργάνωση λιστών συνδέσμων για MODX. Χάρη στην υποστήριξη προτύπων, σας επιτρέπει να εμφανίζετε λίστες με οποιαδήποτε επιθυμητή μορφή:
- Μενού με τη μορφή λίστας, πίνακα, εικόνων, εικονιδίων κ.λπ.
- Στατικά μενού
- Μενού με διάφορα εφέ (αναπτυσσόμενο, αναπτυσσόμενο, κ.λπ.)
- Χάρτης τοποθεσίας
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`ενεργό`
&rowClass=`eNav_li`]]
Παράμετροι αποσπάσματος:
&αναγνωριστικό έναρξης- id γονική σελίδα, εάν καθορίσετε 0 θα είναι από τη ρίζα του ιστότοπου. Η προεπιλεγμένη τιμή είναι το αναγνωριστικό της ενεργής σελίδας
&εμφάνισηΈναρξη - εμφάνιση εγγράφου με startId στον τίτλο του μενού, προεπιλογή false
&επίπεδο- βάθος ένθεσης, προεπιλογή 0 - όλα τα επίπεδα
&όριο- περιορίστε τον αριθμό των σελίδων στην έξοδο (προεπιλογή 0 - χωρίς περιορισμούς)
&αγνοεί Κρυφό- αγνοήστε το πλαίσιο ελέγχου της σελίδας "Εμφάνιση στο μενού", π.χ. αν καθορίσετε 1, θα εμφανίσει όλες τις σελίδες. Η προεπιλογή είναι 0. Εμφανίζονται μόνο εκείνες οι σελίδες που έχουν επιλεγμένο το πλαίσιο ελέγχου "Εμφάνιση στο μενού".
&ph - το όνομα του υποκατάστατου που αντικαθιστά τα άμεσα εκτυπωμένα αποτελέσματα. Η προεπιλογή είναι 0.
&εντοπισμός σφαλμάτων- λειτουργία εντοπισμού σφαλμάτων (προεπιλογή 0)
&απόκρυψηΥπομενού - επέκταση μόνο του ενεργού υπομενού (προεπιλογή 0)
&αφαιρέστε Νέες Γραμμές- αφαιρεί τον χαρακτήρα αλλαγής γραμμής κατά την έξοδο (προεπιλογή 0)
&textOfLinks- για το όνομα του συνδέσμου μενού. Πιθανές επιλογές:τίτλος μενού, id, τίτλος σελίδας, περιγραφή, γονέας, ψευδώνυμο, longtitle, introtext . Προκαθορισμένοτίτλος μενού
&titleOfLinks- για τον τίτλο του συνδέσμου μενού:τίτλος μενού, id, τίτλος σελίδας, περιγραφή, γονέας, ψευδώνυμο, longtitle, introtext. Προκαθορισμένοτίτλος σελίδας
&rowIdPrefix- ορίζει το αναγνωριστικό (rowIdPrefix + docId) για κάθε στοιχείο. Προεπιλογή 0
&συμπεριλαμβάνονται Έγγραφα- αναγνωριστικό εγγράφων που χωρίζονται με κόμματα που θα περιλαμβάνονται στο μενού (δεν καθορίζεται από προεπιλογή)
&εξαιρούνται τα Έγγραφα - αναγνωριστικό εγγράφων που χωρίζονται με κόμματα που θα εξαιρεθούν από το μενού (προεπιλογή 0)
&περιεχόμενα- πλαίσιο για τη δημιουργία μενού. Η προεπιλογή είναι τρέχουσα.
&startIdContext - Αναγνωριστικό του περιβάλλοντος από το οποίο λαμβάνονται τα έγγραφα για τη δημιουργία του αποτελέσματος.
&config - Εξωτερικός αρχείο PHP, για να αποθηκεύσετε τη διαμόρφωση του Wayfinder (παράδειγμα: core/components/wayfinder/configs).
&σχέδιο - Μορφή για τη δημιουργία διευθύνσεων URL. Πιθανές τιμές (βάσει της κλήσης makeURL API):
1: (προεπιλογή) διεύθυνση URL σε σχέση με το site_url.
0: βλέπε http;
1: δείτε https;
full: απόλυτη διεύθυνση URL που ξεκινά με site_url.
abs: απόλυτη διεύθυνση URL που ξεκινά με base_url.
http: απόλυτη διεύθυνση URL, υποχρεωτική στο σχήμα http.
https: απόλυτη διεύθυνση URL, υποχρεωτική στο σχήμα https.
&ταξινόμηση κατά - Το πεδίο με το οποίο γίνεται η ταξινόμηση. (Προκαθορισμένοευρετήριο μενού)
Επιλογές:
ταυτότητα, menutitle, pagetitle, introtext, menuindex, δημοσιευμένο, hidemenu, γονέας, isfolder, περιγραφή, ψευδώνυμο, longtitle, type, template&σειρά ταξινόμησης- Σειρά ταξινόμησης."ASC" ή "DESC". Προεπιλεγμένο ASC
&που - Στυλ JSON παραμέτρων φιλτραρίσματος (Αντιστοιχεί στο σημείο της MySQL). Για παράδειγμα, όταν πρέπει να αποκρύψετε ένα ιστολόγιο ή μια είδηση από το πρόσθετο Άρθρα: &where=`[("class_key:!=": "Article")]`
Παραδείγματα:
Μόνο φάκελοι εξόδου: & όπου = `isfolder = 1
&εδώId - Προσδιορίστε το τρέχον αναγνωριστικό που θα χρησιμοποιηθεί στο απόσπασμα. Χρησιμοποιήστε την τιμή [[*id]] εάν το πρότυπο έχει καθοριστεί χρησιμοποιώντας την παράμετρο hereTpl και το activeRowParentTpl δεν εφαρμόζεται σωστά στο στοιχείο μενού. Η προεπιλογή είναι το τρέχον αναγνωριστικό.
Χρειάζεται να καθοριστεί μόνο εάν το ίδιο το σενάριο το ορίζει εσφαλμένα, για παράδειγμα, όταν εμφανίζεται ένα μενού από ένα κομμάτι άλλου αποσπάσματος.
&εδώTpl - Το πρότυπο hereTpl χρησιμοποιείται όταν το τρέχον στοιχείο εμφανίζεται στο μενού.
Πιθανά σύμβολα κράτησης θέσης:
[[+wf.classes]] - μέρος για να καθορίσετε την κλάση CSS που θα χρησιμοποιηθεί (περιλαμβάνει class=" ")
[[+wf.classnames]] - περιέχει μόνο το όνομα της κλάσης CSS (δεν περιλαμβάνει class=" ")
[[+wf.link]] - διεύθυνση (href) για τον σύνδεσμο
[[+wf.title]] - κείμενο για τον τίτλο του συνδέσμου
[[+wf.linktext]] - κείμενο τίτλου συνδέσμου
[[+wf.wrapper]] - μέρος για την εμφάνιση του υπομενού
[[+wf.id]] - έξοδος ενός μοναδικού αναγνωριστικού (id)
[[+wf.attributes]] - εμφάνιση πρόσθετων χαρακτηριστικών συνδέσμων
[[+wf.docid]] - αναγνωριστικό εγγράφου για το τρέχον στοιχείο
[[+wf.subitemcount]] - αριθμός στοιχείων στο φάκελο
[[+wf.description]] - εμφανίζει τις τιμές του πεδίου περιγραφής
[[+wf.introtext]] - εμφανίζει τις τιμές του πεδίου introtext
Παράδειγμα προτύπου:
Επιλογές προτύπου
Αυτές οι παράμετροι καθορίζουν τα κομμάτια που περιέχουν τα μοτίβα που θα δημιουργήσουν έξοδο Wayfinder.
ΣΕ τρέχουσα έκδοσηΤο Wayfinder for MODX Revolution, μπορείτε να αποκτήσετε πρόσβαση στις προσαρμοσμένες τηλεοράσεις σας χρησιμοποιώντας σύμβολα κράτησης θέσης προθέματος wf. , για παράδειγμα [[+my_TV]]
Κατά τη στιγμή της σύνταξης, θα επιστραφούν μόνο οι αρχικές τιμές της τηλεόρασης - δεν θα μορφοποιηθούν. Για παράδειγμα, εάν η τηλεόρασή σας είναι εικόνα - μια τυπική χρήση μιας τέτοιας τηλεόρασης μέσα στο πρότυπό σας θα ήταν να επιστρέψετε ολόκληρη πλήρης ετικέταεικόνα, αλλά μέσα σε ένα πρότυπο Wayfinder - θα επιστραφεί μόνο η διαδρομή προς την εικόνα.
Εάν θέλετε να χειριστείτε τηλεόραση, μπορείτε να το κάνετε καλώντας ένα απόσπασμα μέσα στο πρότυπο σειράς Wayfinder (&rowTpl . Για παράδειγμα, η εικόνα της τηλεόρασής σας ονομάζεται εικόνισμακαι συνήθως το πρότυπο χρησιμοποιεί κώδικα όπως αυτός για έξοδο:
... 
Αλλά επειδή αυτό δεν θα σας επιτρέψει να επεξεργαστείτε την τηλεόραση, πρέπει να την αντικαταστήσετε με:
... 
Και τώρα μέσα στο απόσπασμα processTV τοποθετούμε τον ακόλουθο κώδικα PHP:
getObject("modResource", $myId); επιστροφή $doc->getTVValue($myTV);
Ως αποτέλεσμα, επιστρέφεται μια πλήρως επεξεργασμένη εικόνα τηλεόρασης.
&outerTpl
Το όνομα του κομματιού που περιέχει το εξωτερικό πρότυπο κοντέινερ.
Διαθέσιμα σύμβολα κράτησης θέσης:
- wf.classes - εμφανίζει κλάσεις που λαμβάνονται από το σύνολο παραμέτρων Wayfinder (συμπεριλαμβανομένου του χαρακτηριστικού class="")
- wf.classnames - εμφάνιση ονομάτων κλάσεων (χωρίς class="")
- wf.wrapper - έξοδος εσωτερικού περιεχομένου (σειρά).
Η παράμετρος &innerTpl περιέχει το ίδιο σύνολο συμβόλων κράτησης θέσης με το &outerTpl .
&rowTpl
Το όνομα του κομματιού που περιέχει το πρότυπο για τα στοιχεία της γραμμής μενού.
Διαθέσιμα σύμβολα κράτησης θέσης:
- wf.classes - έξοδος κλάσης (συμπεριλαμβανομένου του χαρακτηριστικού class="").
- wf.classnames - έξοδος των αντίστοιχων κλάσεων (χωρίς class="")
- τιμή χαρακτηριστικού wf.link - href="" για τον σύνδεσμο μενού
- wf.title - όνομα του κειμένου τίτλου για το σύνδεσμο από το πεδίο που καθορίζεται στην παράμετρο &titleOfLinks
- wf.linktext - κείμενο για τον ενεργό σύνδεσμο που καθορίζεται στο πεδίο που μεταβιβάστηκε στην παράμετρο &textOfLinks
- wf.wrapper - εμφάνιση εσωτερικού περιεχομένου, όπως υπομενού
- wf.id - εμφανίζει το μοναδικό αναγνωριστικό του χαρακτηριστικού. Πρέπει να καθορίσετε την παράμετρο &rowIdPrefix προκειμένου αυτό το σύμβολο κράτησης θέσης να λάβει μια τιμή. Η τιμή είναι το πρόθεμα + docId.
- wf.attributes - εμφανίζει τη σύνδεση χαρακτηριστικών για το τρέχον στοιχείο
- wf.docid - αναγνωριστικό εγγράφου του τρέχοντος στοιχείου
- wf.description - περιγραφή για το τρέχον στοιχείο
- wf.level - τρέχον επίπεδο ένθεσης
Παράδειγμα χρήσης:
Αλλη επιλογή:
Παραδείγματα
Πρώτο επίπεδο
[[!Wayfinder? &startId=`0` &level=`1`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`ενεργό`
&rowClass=`eNav_li`]]
Κωδικός κομματιού outerTpl
[[+wf.wrapper]]
Κωδικός τεμαχίου RowTpl
[[+wf.wrapper]]
Δεύτερο επίπεδο (σε αυτό το παράδειγμα, τα στοιχεία μενού και υπομενού ήταν οπτικά στο ίδιο επίπεδο
[[!Wayfinder? &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`ενεργό`]]
Κωδικός τεμαχίου outerTplFooterMenu
[[+wf.wrapper]]
Κωδικός κομματιού rowTplFooterMenu
[[+wf.title]]
[[+wf.wrapper]]
Κωδικός τεμαχίου innerTplFooterMenu
[[+wf.wrapper]]
κωδικός κομματιού innerRowTplFooterMenu
[[+wf.title]]
Χαιρετισμούς, αγαπητοί αναγνώστες. Στο τελευταίο μάθημα γεμίσαμε τον ιστότοπο με κάποιο περιεχόμενο (), τώρα ήρθε η ώρα εμφανίστε τα πάντα στο μενούώστε οι χρήστες να μπορούν να πλοηγηθούν σε αυτά.
Δημιουργία δυναμικής μενού στο MODXθα χρησιμοποιήσουμε ένα απόσπασμα PdoMenuαπό τη συσκευασία pdoTools. Πριν ξεκινήσετε, διαβάστε την κύρια τεκμηρίωση.
Τεκμηρίωση pdoMenu
Επιλογές
Επιλογές προτύπου
Επιλογές κλάσης CSS
Επίσημα παραδείγματα
Μπορείτε να διαβάσετε την επίσημη τεκμηρίωση εδώ. Τώρα ας δούμε τις πιο τυπικές κλήσεις μενού.
Καλέστε το PdoMenu
Επιλογή 1. Στη θέση αυτού του στατικού μενού καλέστε το απόσπασμα pdoMenu, για αυτό στο δέντρο πόρων, στην καρτέλα “ Στοιχεία" στην ενότητα αποσπάσματα, αναπτύξτε το νήμα pdoTools, μετά κάντε κλικ στο pdoMenuαριστερό κουμπί του ποντικιού (μην απελευθερώσετε το κουμπί) και σύρετε αυτό το απόσπασμα στο σημείο όπου θέλετε να ανοίξετε το μενού και, στη συνέχεια, στο παράθυρο που ανοίγει, συμπληρώστε τις απαραίτητες παραμέτρους και κάντε κλικ στο " Αποθηκεύσετε«.
Επιλογή 2. Απλώς γράφουμε την κλήση χειροκίνητα.
Χαρακτηριστικά παραδείγματα
Κανονικό μενού ενός επιπέδου
Για παράδειγμα, έχουμε το πιο κοινό μενού, με την ακόλουθη σήμανση html.
Το αποτέλεσμα είναι ο ακόλουθος κωδικός για την κλήση του μενού:
- &parents=`0` - λίστα γονέων (στην περίπτωσή μου δεν περιορίζω την επιλογή, αφού ούτως ή άλλως θα εμφανίζω μόνο ορισμένες σελίδες).
- &level=`1` — επίπεδο ένθεσης (στην περίπτωση αυτή δεν υπάρχει).
- &resources=`2,3,4,5` — λίστα πόρων που πρέπει να εμφανίζονται στο μενού.
- &firstClass=`0` — κλάση για το πρώτο στοιχείο μενού (όχι ποιο).
- &lastClass=`0` — κατηγορία του τελευταίου στοιχείου μενού (όχι ποιο).
- &outerClass=`top-menu` — κατηγορία περιτυλίγματος μενού (αντικαταστάθηκε στο ul);
- &hereClass=`current-menu-item` — κλάση για το ενεργό στοιχείο μενού (αντικαταστάθηκε σε li);
- &rowClass=`menu-item` — κατηγορία μιας γραμμής μενού (αντικαταστάθηκε σε li).
Προσαρμοσμένο μενού εκκίνησης δύο επιπέδων
Ο στατικός κώδικας html μοιάζει με αυτό:
Ο κωδικός εξόδου του θα είναι ο εξής:
Επίσης στο επόμενο μάθημα θα δώσω μερικές ακόμη εξόδους από αναπτυσσόμενα μενού με βάση το bootstrap (και, αυτό είναι για όσους δεν κατάλαβαν την ουσία. Λοιπόν, τότε θα το κάνουμε.
Με την πρώτη ματιά, όλα φαίνονται περίπλοκα, αλλά δεν είναι έτσι, διαβάστε την τεκμηρίωση με περισσότερες λεπτομέρειες, κάντε ερωτήσεις στα σχόλια, σίγουρα θα βοηθήσω.
Για να δημιουργήσουμε ένα δυναμικό μενού θα χρησιμοποιήσουμε ένα έτοιμο απόσπασμα Wayfinder.Ένα απόσπασμα, όπως ελπίζουμε να θυμάστε από προηγούμενα μαθήματα, είναι ένα κομμάτι κώδικα Php που μπορούμε να συμπεριλάβουμε στο πρότυπό μας. Η διαφορά από τα κομμάτια είναι μόνο στον κωδικό και τη μέθοδο κλήσης. Εάν καλέσουμε ένα κομμάτι χρησιμοποιώντας διπλά σγουρά σιδεράκια, τότε τα αποσπάσματα καλούνται χρησιμοποιώντας τα ακόλουθα [!Snippet_name!]- κλήση χωρίς προσωρινή αποθήκευση ή κάτι τέτοιο [[SnippetName]]- προσωρινή κλήση. Ο κώδικας για κάθε απόσπασμα πρέπει να ξεκινά με και τέλος ?> . Επιπλέον, σε κάθε απόσπασμα μπορούν να περάσουν ειδικές τιμές παραμέτρων που θα επεξεργαστεί. Το MODx έχει ήδη αρκετά έτοιμα αποσπάσματα που θα χρησιμοποιήσουμε στο μέλλον.
Απόσπασμα Wayfinderχρησιμεύει για την οργάνωση λιστών συνδέσμων για MODx. Το μενού του ιστότοπού μας είναι μια λίστα τέτοιων συνδέσμων. Ας βρούμε πρώτα ένα κομμάτι κώδικα υπεύθυνο για την εμφάνιση του μενού μας. Το μενού είναι στο κομμάτι ΕΠΙ ΚΕΦΑΛΗΣ, εδώ είναι:
Ας κόψουμε αυτόν τον κώδικα και ας γράψουμε αντ' αυτού:
((ΜΕΝΟΥ))
Και θα επικολλήσουμε τον κώδικα σε ένα νέο κομμάτι ΜΕΝΟΥ, στην περιγραφή του κομματιού θα γράψουμε μενού τοποθεσίας. Τώρα ας μελετήσουμε αυτόν τον κώδικα.
Το μενού του ιστότοπού μας είναι μια απλή, χωρίς αρίθμηση λίστα που βρίσκεται σε ένα κοντέινερ με id="templatemo_menu". Ας κόψουμε αυτήν τη λίστα από το κοντέινερ και ας εισάγουμε μια κλήση στο απόσπασμά μας:
&startId=`0`είναι μια παράμετρος με τιμή 0, η οποία υποδεικνύει στο απόσπασμα το αναγνωριστικό του φακέλου στον οποίο βρίσκονται τα έγγραφα που έχουν υποστεί επεξεργασία. Όλα τα έγγραφά μας που θα εμφανίσουμε στο μενού βρίσκονται στον ριζικό φάκελο, το αναγνωριστικό του ριζικού φακέλου είναι μηδέν. Ας δούμε τι έχουμε.
Το μενού μας λειτουργεί, μόνο το ενεργό στοιχείο δεν επισημαίνεται πλέον με λευκό:
Για να καταλάβουμε γιατί συνέβη αυτό, πρέπει να δούμε τον πηγαίο κώδικα της σελίδας. Στο Mozilla Firefox αυτό γίνεται ως εξής: Προβολή >> Πηγαίος κώδικας σελίδαςή απλά πατώντας τη συντόμευση πληκτρολογίου Ctrl+U. Βρείτε τον κωδικό για το μενού μας:
Σημειώστε ότι στον πηγαίο κώδικα είχε το ενεργό στοιχείο class = "τρέχον", και το απόσπασμά μας εκχωρεί αυτόματα στο ενεργό στοιχείο class="ενεργός". Παρατηρούμε επίσης ότι στον πηγαίο κώδικα η κλάση εφαρμόστηκε στην ετικέτα
, και τώρα στην ετικέτα
Βρείτε το αρχείο στο φάκελο C:/xampp/htdocs/site/www/assets/templates/ templatemo_style.cssκαι ανοίξτε το χρησιμοποιώντας το Notepad++. Αναζητούμε μια περιγραφή της τρέχουσας κλάσης σε αυτό το αρχείο, βρίσκεται στο 198 γραμμή:
#templatemo_menu li .current(
padding-αριστερά: 40px;
χρώμα: #ffffff;
}
αντικαταστήσει την τάξη ρεύμαεπί ενεργός, χωρίς να ξεχνάτε να το αντιστοιχίσετε ξανά στην ετικέτα :
#templatemo_menu li.active a (
padding-αριστερά: 40px;
χρώμα: #ffffff;
}
Αποθηκεύστε το αρχείο. Ας δούμε τι έγινε.
Το μενού μας λειτούργησε ακριβώς όπως σκόπευαν οι σχεδιαστές. Τώρα μπορούμε να περιηγηθούμε στις σελίδες του ιστότοπού μας χρησιμοποιώντας το κύριο μενού μας. Όταν προσθέτετε άλλα έγγραφα στον ριζικό φάκελο, θα εμφανίζονται αυτόματα στο μενού μας. Για να αποτρέψετε την εμφάνιση ανεπιθύμητων εγγράφων στο μενού, θα πρέπει να καταργήσετε την επιλογή τους Εμφάνιση στο μενού. Μπορείτε να εξαιρέσετε αναγκαστικά ένα ανεπιθύμητο στοιχείο χρησιμοποιώντας την παράμετρο &excludeDocs=`λίστα αναγνωριστικών εξαιρούμενων εγγράφων, διαχωρισμένα με κόμματα`.
Για να μην εμφανίζει το μενού θυγατρικά έγγραφα που θα δημιουργήσουμε στα επόμενα μαθήματα, ας προσθέσουμε μια παράμετρο στην κλήση του αποσπάσματος επίπεδο, το οποίο καθορίζει τον αριθμό των επιπέδων στο μενού, από προεπιλογή θα εμφανίζονται όλα τα επίπεδα, θα το περιορίσουμε μόνο σε ένα επίπεδο:
.jpg "Από τους αριθμούς στις νότες: το καλύτερο φορητό DAC Big σε μικρό")