Începem cea de-a 8-a lecție MODx Revolution pentru începători. Îmi amintesc că facem un site web pentru studierea MODx Revolution. În ultima lecție, am abordat conceptul de fragmente, care sunt fragmente de cod PHP care vă permit să adăugați funcționalități pe site-ul nostru. În această lecție vom examina un fragment special Wayfinder și îl vom folosi pentru a crea un meniu dinamic pentru site-ul nostru.
Ce este Wayfinder?
Wayfinder - acest fragment că ieșirile lista nesortate de link-uri la resurse în copac site-ul dvs., O listă de tip depinde de apel fragmentul și parametrii apelului. În termeni generali, acest lucru înseamnă că, atunci când plasați un Wayfinder'a apel în șablonul dvs., începe să caute resurse care îndeplinesc parametrii specificați în ea și returnează o listă de link-uri către aceste resurse în formatul unei liste neordonata sau în format dvs. specifice.
De ce să folosim Wayfinder?
De obicei, Wayfinder folosesc pentru crearea navigației dinamice pe un site, adică meniul. Deoarece majoritatea șabloanelor HTML utilizează liste neordonate pentru a crea meniuri, Wayfinder este instrumentul ideal pentru aceste scopuri. La crearea unui site, puteți introduce cu atenție URL-urile la meniul de navigare, așa cum ați făcut-o înainte într-un site web HTML static. În același timp, de fiecare dată când trebuie să ștergeți sau să creați o pagină, trebuie să efectuați modificări corespunzătoare în meniu, să modificați adresele URL. Utilizarea Wayfinder fragment pentru a genera dinamic menyushek dvs. de a evita această durere de cap, deoarece detectează automat schimbarea și, astfel, schimba meniul.
Wayfinder este un instrument destul de flexibil și vă permite să determinați ce resurse să includeți sau să excludeți din meniu, ce șablon de meniu este ca adâncimea meniului site-ului dvs. Limita posibilităților dvs. este determinată de codul dvs. HTML / CSS.
Cum se utilizează Wayfinder?
Așa cum am menționat în lecția anterioară, sintaxa de apel a fragmentelor arată astfel: # 91; # Somesnippet # 93; # 93;
Acesta este doar un apel de bază și nu este suficient, cu excepția faptului că trebuie să definim câteva proprietăți ale acestui apel. În cazul lui Wayfinder, minimul care trebuie definit în proprietăți este: unde în arborele de resurse, Wayfinder ar trebui să înceapă să creeze o listă de resurse. Astfel, în apelul la fragmentul Wayfinder, trebuie să specificați cel puțin un parametru - ID inițial. Apelul de bază la Wayfinder fragment va arăta astfel:
Dacă aruncăm o privire la șablonul pe care îl folosim, vedem meniul de sus cu câteva elemente și listele derulante.
Să aruncăm o privire asupra șablonului și a codului care afișează acest meniu:
După cum puteți vedea, aceasta este o listă imbricată neordonată. Să înlocuim acest cod cu un apel de bază către Wayfinder și să vedem ce putem face. Eliminați codul de mai sus și introduceți:
Dacă utilizați același șablon ca mine, atunci codul va arăta astfel:
Salvați șablonul și vedeți pagina de pornire, ar trebui să arate astfel:
Fantastic! Vedeți că meniul nostru anterior, care conținea mai multe articole, este acum înlocuit de un meniu simplu, cu o singură puncție - Acasă. Acest lucru ne spune că Wayfinder funcționează așa cum ar trebui și ia o pagină de pe site-ul nostru și își afișează numele ca element de meniu.
Să creăm încă câteva resurse. Voi adăuga o pagină Despre cu 3 pagini copil (pagini MODx, Tutoriale, Contact și FAQ). Puteți crea orice resurse sau pagini pentru site-ul dvs. Scopul acestui exercițiu este de a crea mai multe resurse, astfel încât Wayfinder să aibă ceva de afișat.
observaţie:
Pentru a crea rapid o resursă copil, faceți clic dreapta pe resursa pe care o luați ca părinte și selectați Creare document aici.
Am ajuns să creez pagini și arborele de resurse al site-ului meu arată astfel:
Acum avem mai multe pagini, să vedem cum va ajunge la un apel către Wayfinder un meniu pentru site-ul nostru:
Vestea bună este că toate paginile noastre au apărut în meniu și făcând clic pe fiecare element din meniu pe pagina respectivă. (Pentru a testa acest element, adăugați un text pe fiecare pagină, de exemplu în pagina Despre, puteți adăuga "Aceasta este pagina Despre" și acest mesaj va apărea când deschideți pagina.) Amintiți-vă că trebuie să definiți un șablon pentru fiecare pagină, dar momentan nu sunt Mă voi îngrijora de acest lucru).
Vestea proastă este că formatarea meniului a fost încălcată, dar o putem rezolva. Faceți clic dreapta pe o pagină web și uita-te la codul sursă (sau de a folosi pentru acest Firebug), veți vedea că acum Wayfinder generează HTML similar cu următorul:
După cum puteți vedea, seamănă foarte mult cu codul nostru static inițial, cu câteva excepții. Mai întâi, Wayfinder a generat
- punct fără clasa sf-meniu care a fost folosită în codul nostru static. Acest șablon cere ca această clasă să funcționeze cu CSS. Este clar și faptul că
- elementele au un parametru span. care se referă la elementele textului legăturii din codul static inițial și nu se află în codul generat de Wayfinder. În plus, codul nostru static HTML are o clasă de pagină acustică. care nu este reprezentat în fragmentul nostru de cod Wayfinder. Toate aceste piese lipsă fac aspectul meniului nostru inestetic.
Cum să personalizați stilul de ieșire al fragmentului Wayfinder
Privind la modul în care Wayfinder generează un cod, avem o întrebare firească: „Cum putem adăuga piesele lipsă de cod pe care dorim să le afișa meniul în direcția cea bună pentru noi ca“ Răspunsul - foarte simplu, vom folosi un șablon de bucăți pentru a formata ieșirea fragmentului Wayfinder .
Rețineți că unii dintre parametrii lui Wayfinder au o valoare implicită.
Aceasta explică, de exemplu, de ce în meniul Wayfinder generat, elementul Pagina de pornire are numele clasei "first active". Aceasta este clasa implicită, dar o putem suprascrie specificând propriile clase în bucățile șablonului.
Vom folosi mai multe opțiuni Wayfinder în acest tutorial, dar vă sfătuiesc să le studiați pe toate și să le folosiți cât mai mult posibil pentru a înțelege toate posibilitățile lor. Din moment ce parametrii impliciți ai Wayfinder sunt documentați în mod clar pe site-ul oficial, ar fi o nebunie să vorbim despre ele aici. Vom folosi din ce în ce mai mult atunci când lucrăm cu meniuri diferite.
Pentru a începe șablonul de meniu, să creeze unele minishablonov și păstrați-le în bucăți. Veți găsi că aceste bucăți, folosim HTML, dar înlocuiți elementele dinamice ale agregatelor (sau substituenților așa cum sunt numite) a căror sintaxa este următoarea: # 91; # 91; + substituent # 93; # 93;. Agregate, pe care le folosim caracteristicile din fragmentul Wayfinder și definiția lor este evident din numele, dar puteți contacta întotdeauna documentația MODx pentru o referință mai completă.
Iată fragmentele pe care le voi folosi pentru a crea șablonul nostru:
7in1menuOuter - va conține codul HTML pentru containerul ul nostru extern.
Vedeți că am adăugat o clasă pentru ul ul extern. O modalitate alternativă de a face acest lucru este să utilizați clasa wf.clasa substituentului și apoi să adăugați numele clasei la apelul în mod curent prin intermediul opțiunii outerClass. Dar pentru simplitate, să folosim prima metodă, dar ambele vor funcționa bine ...
7in1menuRow - va conține codul HTML al elementelor de meniu din primul nivel
Ideea principală aici este că am adăugat o etichetă la textul legăturii de meniu ca și în codul HTML original static. Am inclus, de asemenea, substituentul wf.classes și acest lucru îmi va permite să definim o clasă pentru pagina curentă care va suprascrie clasa "activă" pe care o avem în mod implicit.
7in1menuInner - va conține cod HTML al containerelor interne pentru ul
7in1menuInnerRow - va conține cod HTML pentru linii de elemente de nivel intern
Valoarea parametrilor este plasată în apostrofuri (`) și nu în citate individuale (').
Să aruncăm o privire la această provocare. Puteți vedea că folosim setările șablonului pentru a apela bucățile noastre, astfel încât Wayfinder să afișeze codul HTML de care avem nevoie cu clasele corecte. Am definit parametrul numit hereClass și i-am dat valoarea curentă_page_item. astfel încât să corespundă unui șablon HTML static. Veți observa că am lăsat parametrii firstClass și lastClass empty. Motivul pentru aceasta este faptul că șablonul meu HTML nu specifică o clasă pentru primul și ultimul element de meniu, astfel încât, în scopul de a evita suprapunerea, le-am rescris linii goale.
Să mergem mai departe și să salvăm apelul modificat Wayfinder și să actualizăm pagina și să vedem cum s-a schimbat aspectul meniului nostru:
Se poate observa că meniul nostru arată exact așa cum vrem. Stilurile corecte sunt utilizate în meniul drop-down. Dacă te uiți la codul sursă, vei vedea că codul HTML al lui Wayfinder 'ohm sa schimbat dincolo de recunoaștere:
Acest cod corespunde codului static original al șablonului nostru, dar a fost generat prin apelarea Wayfinder.
Există mulți alți parametri pe care îi puteți utiliza împreună cu Wayfinder pentru a vă construi meniurile. În următoarele lecții, vom examina meniurile complexe și cum să le integrăm în Wayfinder. Să rezumăm: acum site-ul nostru are o formă și avem un meniu funcțional și dinamic.
Materiale înrudite:
Articole similare
Trimiteți-le prietenilor: