Συστήματα πλοήγησης με το Expression Engine 2

Υπάρχουν πολλοί λόγοι να εκθειάσει κάποιος την πολυαναμενόμενη έκδοση του Expression Engine 2, η οποία άργησε πολύ, αλλά αρχίζει να βγάζει τα σπασμένα.

Μία από τις σημαντικές βελτιώσεις της νέας έκδοσης είναι η δημιουργία ημί-δυναμικών μενού που είναι κάτι που έλειπε από την πλατφόρμα. Μπορεί να μην είναι ένα killing feature σαν τα μενού του Wordpress (αληθινά εντυπωσιακή δουλειά), όμως για όσους “σκάβουν” στον κώδικα μπορεί να αποδειχτεί πιο χρήσιμη.

Στο παράδειγμα που ακολουθεί φαίνεται η αρχή του κώδικα του μενού ενός site, όπως θα γραφόταν σε μια static HTML σελίδα:

<ul>
	<li><a href="company.html">Η εταιρεία</a></li>
	<li>...</li>
	<li>...</li>
</ul>

Απλά πράγματα έως εδώ.

Ας κρατήσουμε το <li> που μας ενδιαφέρει κι ας ξεχάσουμε τα υπόλοιπα για την ώρα.
Το να “οδηγήσεις” το link, όχι σε μια στατική σελίδα, αλλά σε μια σελίδα (ή πιο σωστά group) του Expression Engine γίνεται ως εξής:

<li><a href="{path=company}">Η εταιρεία</a></li>

Συνεχίζουν να είναι απλά τα πράγματα.

Το τελευταίο που θέλουμε από το link μας είναι να έχει διαφορετικό χρώμα όταν ο επισκέπτης κάνει κλικ στη σελίδα του, ώστε να κατανοεί εύκολα που βρίσκεται. Ας υποθέσουμε ότι όταν συμβαίνει αυτό το link έχει το class=“selected” κι έτσι αλλάζει χρώμα. Όταν ο επισκέπτης δε βρίσκεται στη σελίδα αυτή, τότε το link απλώς δεν έχει το συγκεκριμένο class.

Το να γράψει κάποιος για 10 διαφορετικές σελίδες 10 διαφορετικές εκδόσεις του μενού, με το class=“selected” να πηγαίνει από link σε link για κάθε σελίδα, δεν είναι και ό,τι πιο βολικό. Τι θα γίνει για παράδειγμα αν προστεθεί μια 11η; Θα πρέπει να επέμβει και στις προηγούμενες 10.

Φανταστείτε τώρα ότι όλο μας το μενού βρίσκεται αποθηκευμένο ως κώδικας σε ένα άλλο σημείο του site με τη μορφή template ας πούμε με το όνομα “nav”. Για να το φέρω στη σελίδα μου πρέπει απλώς να το κάνω μέσω μιας απλής εντολής που λέγεται embed. Έτσι γράφω:

{embed="nav"}

και το μενού έρχεται στη θέση που θα του πω.

Ήρθε η ώρα του δυναμικού μενού. Αρχικά εισάγω μια μεταβλητή. Ας την ονομάσουμε “loc” (από το location).
Όταν βρίσκομαι στη σελίδα “Η εταιρεία” φέρνω το μενού ως εξής:

{embed="nav" loc="company"}

Δηλαδή λέω ”φέρε το μενού και δώσε στη μεταβλητή “loc” την τιμή “company”.

Τώρα κάπως πρέπει να συνδέσω την τιμή αυτή με το link μου. Αυτό γίνεται ως εξής:

<li><a href="{path=company}" {if embed:loc=="company"} class="selected"{/if}>Η εταιρεία</a></li>

Λέω δηλαδή στο link ότι ”αν βρεις τη μεταβλητή loc με τιμή company, τότε δώστης το class=“selected”, αλλιώς μη δίνεις κανένα class.
Το ίδιο κάνω σε κάθε <li> του μενού κι έτσι παίρνω αυτό που θέλω όσο μεγάλο κι αν γίνει το μενού.

Easy peasy!