Găsim în folderul C:/xampp/htdocs/site/www/assets/templates/ fișierul templatemo_style.cssși deschideți-l cu Notepad++. Căutăm o descriere a clasei curente din acest fișier, acesta se află în 198 linia:

#templatemo_menu li .current(
umplutură-stânga: 40px
culoare: #ffffff;
}

Pentru ca meniul să nu afișeze documentele copil pe care le vom crea în lecțiile următoare, să adăugăm un parametru la apelul snippet nivel, care determină numărul de niveluri din meniu, toate nivelurile vor fi afișate implicit, îl vom limita la un singur nivel:

Să începem lecția MODx Revolution 8 pentru începători. Vă reamintesc că facem un site pentru a învăța MODx Revolution. În ultima lecție, ne-am uitat la conceptul de fragmente, care sunt bucăți de cod PHP care ne permit să adăugăm funcționalități site-ului nostru. În acest tutorial, ne vom uita la un fragment special - Wayfinder și îl vom folosi pentru a crea un meniu dinamic pentru site-ul nostru.

Ce este Wayfinder?

Wayfinder este un fragment care afișează o listă nesortată de linkuri către resurse în arborele site-ului dvs., tipul de ieșire a listei depinde de apelul fragmentului și de parametrii acestui apel. În termeni generali, asta înseamnă că atunci când apelezi la Wayfinder în șablonul tău, acesta începe să caute resurse care se potrivesc cu parametrii specificați în acesta și returnează o listă de link-uri către aceste resurse în formatul unei liste nesortate sau în formatul specifici tu.

De ce să folosiți Wayfinder?

De obicei folosesc Wayfinder pentru a crea o navigare dinamică pe site, adică un meniu. Deoarece majoritatea șabloanelor HTML folosesc liste neordonate pentru a crea meniuri, Wayfinder este instrumentul perfect pentru acest lucru. Când creați un site, puteți introduce cu grijă adresele URL în meniul de navigare, așa cum ați făcut înainte într-un site HTML static. În același timp, de fiecare dată când trebuie să ștergeți sau să creați o pagină, trebuie să faceți modificările corespunzătoare în meniul dvs., să modificați adresele URL. Utilizarea fragmentului Wayfinder pentru a vă genera dinamic meniurile evită această durere de cap, deoarece detectează automat modificările și vă modifică meniul în consecință.

Wayfinder este destul de flexibil și vă permite să definiți ce resurse să includeți sau să excludeți din meniu, care este șablonul de meniu, cât de profund este meniul site-ului dvs. Limitele dvs. sunt determinate de codul dvs. HTML/CSS.

Cum se utilizează Wayfinder?

După cum am menționat în lecția anterioară, sintaxa pentru apelarea fragmentelor arată astfel: [[!somesnippet]]

Acesta este doar un apel de bază și nu este suficient, în afară de faptul că trebuie să definim unele proprietăți ale acestui apel. În cazul Wayfinder, minimul care trebuie definit în proprietăți este locul unde în arborele de resurse Wayfinder ar trebui să înceapă să construiască lista de resurse. Astfel, în apelul snippet Wayfinder trebuie specificat cel puțin un parametru - ID-ul inițial. Apelul de bază către fragmentul Wayfinder în acest caz ar arăta astfel:

Acest apel îi spune lui Wayfinder să înceapă de la rădăcina arborelui ( ID 0 înseamnă rădăcina site-ului) și arată toate resursele care sunt publicate și nu au o bifă în caseta de selectare Ascunde din meniuri (Ascunde din meniu).

Dacă ne uităm la șablonul pe care îl folosim, putem vedea un meniu de sus cu mai multe elemente și meniuri derulante.

Să aruncăm o privire la șablonul și codul care redă acest meniu:

După cum puteți vedea, aceasta este o listă neordonată imbricată. Să înlocuim acest cod cu un apel Wayfinder de bază și să vedem ce se întâmplă. Ștergeți codul de mai sus și inserați în locul lui:

[[!Wayfinder? &startId=`0` ]]

Dacă utilizați același șablon ca mine, atunci codul dvs. va arăta cam așa:

Salvați șablonul și aruncați o privire pe pagina de pornire, ar trebui să arate astfel:

Fictiune! Puteți vedea că meniul nostru anterior, care avea mai multe elemente, a fost acum înlocuit cu un meniu simplu cu un singur element - Acasă. Acest lucru ne spune că Wayfinder funcționează conform așteptărilor și preia o pagină de pe site-ul nostru și își afișează titlul ca element de meniu.

Să mai creăm câteva resurse. Voi adăuga o pagină Despre cu 3 pagini copil (PAgini MODx, Tutoriale, Contact și Întrebări frecvente). Puteți crea orice resurse sau pagini pentru site-ul dvs. Scopul acestui exercițiu este de a crea niște resurse, astfel încât Wayfinder să aibă ceva de afișat.

Am terminat cu crearea paginilor și arborele de resurse a site-ului meu arată astfel:

Acum avem câteva pagini, să vedem cum apelarea Wayfinder va genera 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 de meniu ajungem la pagina corespunzătoare. (Pentru a testa acest element, adăugați ceva text în fiecare pagină, de exemplu, pe pagina Despre puteți adăuga „Aceasta este o pagină Despre” și acest mesaj va apărea când pagina este deschisă. Rețineți că trebuie să definim un șablon pentru fiecare pagină, dar momentan nu am de gând să-mi fac griji).

Vestea proastă este că formatarea meniului este întreruptă, dar o putem remedia. Faceți clic dreapta pe pagina web și uitați-vă la codul sursă (sau utilizați firebug pentru asta), veți vedea asta acum Wayfinder generează HTML astfel:

• Acasă
• Despre
  • MODX CMS
  • Padul de codare
    • Blog-ul
    • Serviciile
• Contactaţi-ne
• Tutoriale
• FAQ

După cum puteți vedea, arată foarte asemănător cu codul nostru static inițial, cu câteva excepții. În primul rând, Wayfinder a generat

articol fără clasă sf-meniu care a fost folosit în codul nostru static. Șablonul are nevoie de această clasă pentru a funcționa cu CSS. Se vede si ca
• articolele au un parametru span, care se referă la elementele textului linkului din codul static original și nu este prezent în codul generat de Wayfinder. În plus, codul nostru HTML static are o clasă acurrent-page-item, care nu este prezent în codul nostru fragment Wayfinder. Toate aceste piese lipsă fac meniul nostru să arate inestetic.

  Cum să personalizați stilul de ieșire a fragmentului wayfinder

  Privind modul în care Wayfinder generează cod, apare o întrebare complet firească: „Cum adăugăm bucățile de cod lipsă, astfel încât să dorim să afișăm meniul în forma de care avem nevoie?” Răspunsul este foarte ușor, folosim bucăți de șablon pentru a formata ieșirea fragmentului Wayfinder.

  Wayfinder este un instrument flexibil și cu ajutorul parametrilor puteți defini aspectul ieșirii. Unele opțiuni generale vă permit să specificați la ce nivel să începeți construirea meniului, ce elemente să excludeți din meniu și așa mai departe. Alte opțiuni sunt opțiunile de șablon care vă permit să setați codul html șablon pentru meniul dvs. etc. Descrierile acestuia din urmă pot fi găsite în documentația oficială - http://rtfm.modx.com/display/ADDON/Wayfinder.

  Ia-ti notite: unele opțiuni Wayfinder au o valoare implicită.

  Aceasta explică, de exemplu, de ce în meniul generat de Wayfinder, elementul din pagina de pornire are numele clasei „ primul activ". Aceasta este clasa implicită, dar o putem suprascrie definindu-ne propriile clase în bucăți de șablon.

  Vom folosi câteva opțiuni Wayfinder în acest tutorial, dar vă încurajez să le învățați pe toate și să exersați să le folosiți cât mai mult posibil pentru a vă simți întregul potențial. Deoarece parametrii impliciti ai Wayfinder sunt documentați în mod clar pe site-ul oficial, ar fi o prostie să vorbim despre ei aici. Vom folosi din ce în ce mai multe dintre ele pe măsură ce lucrăm cu diferitele meniuri.

  Pentru a începe cu șablonul de meniu, să creăm câteva mini-șabloane și să le stocăm în bucăți. Veți vedea că în aceste bucăți folosim codul HTML, dar înlocuim elementele dinamice substituenți(sau substituenți așa cum sunt numite și) a căror sintaxă arată astfel: [[+substituent]]. Substituenții pe care îi folosim sunt specifici fragmentului Wayfinder și definiția lor este evidentă din nume, dar puteți oricând să consultați documentația MODx pentru ajutor mai complet.

  

  Iată fragmentele pe care le voi folosi pentru a crea șablonul nostru:

  7in1meniuExterior- va conține codul HTML pentru containerul nostru exterior ul.

  [[+wf.wrapper]]

  Puteți vedea că am adăugat o clasă pentru ul exterior. O modalitate alternativă de a face acest lucru este să utilizați substituentul wf.classes și apoi să adăugați numele clasei la apelul curent al wayfinder folosind parametrul outerClass. Dar pentru simplitate, să folosim prima modalitate, dar ambele vor funcționa bine...

  7 în 1 rând de meniu– va conține codul HTML al elementelor de meniu de primul nivel

• [[+wf.linktext][[+wf.wrapper]]

Ideea principală aici este că am adăugat eticheta la textul link-ului meniu ca în codul HTML static original. Am inclus și substituentul wf.classes și acest lucru îmi va permite să definesc o clasă pentru pagina curentă care va suprascrie clasa „activă” implicită pe care o avem.

7in1meniu Interior– va conține codul HTML al containerelor ul interioare

[[+wf.wrapper]]

7in1menuInnerRow– va conține cod HTML pentru rândurile de articole de niveluri interne

• [[+wf.linktext][[+wf.wrapper]]

Gata, acum bucățile noastre de șablon sunt la locul lor, după cum puteți vedea (pentru comandă, le-am pus într-o categorie separată):



Acum putem modifica apelul Wayfinder, astfel încât să putem folosi aceste mini șabloane pentru ieșirea Wayfinder. Dacă aruncați o privire la lista de opțiuni de șabloane (ar fi util să aveți http://rtfm.modx.com/display/ADDON/Wayfinder deschis în fața ochilor sau să tipăriți și să țineți apăsat lângă ecran), veți vedea că Mi-am apelat bucățile similare cu parametrii corespunzători pentru apelul fragmentului. Am făcut acest lucru pentru comoditate, mă ajută să țin evidența ceea ce este atunci când încep să-mi construiesc apelul. Să adăugăm parametri și să ne apelăm bucățile. Apelul către Wayfinder va arăta acum astfel:

[[!Wayfinder? &startId=`0` &outerTpl=`7in1menuOuter` &rowTpl=`7in1menuRow` &innerTpl=`7in1menuInner` &innerRowTpl=`7in1InnerRow` &hereClass=`current_page_item` &firstClass=Class=]``

Valoarea parametrului este cuprinsă între apostrofe (`), nu ghilimele simple (').

Bine, să aruncăm o privire la această provocare. Puteți vedea că folosim opțiuni de șablon pentru a apela bucățile noastre, astfel încât Wayfinder să scoată HTML-ul pe care îl dorim cu clasele corecte. Am definit un apelabil aiciClasa parametru și i-a dat o valoare element_pagină_actuală pentru a se potrivi cu șablonul HTML static. Vedeți că am lăsat parametrii clasa întâiși ultima ora gol. Motivul pentru aceasta este că șablonul meu HTML nu setează o clasă pentru primul și ultimul element de meniu, așa că am suprascris liniile goale din ele pentru a evita suprapunerile.



Se vede că meniul nostru arată exact așa cum ne-am dorit. Stilurile corecte sunt folosite în meniul derulant. Dacă te uiți la codul sursă, vei vedea că este generat Wayfinder Codul HTML s-a schimbat dincolo de recunoaștere:

• Acasă
• Despre
  • MODX CMS
  • Padul de codare
    • Blog-ul
    • Serviciile
• Contactaţi-ne
• Tutoriale
• FAQ

Acest cod se potrivește cu codul static original al șablonului nostru, dar a fost generat prin apelare Wayfinder.

Există multe alte opțiuni cu care puteți utiliza Wayfinder pentru a vă construi meniurile. În următoarele tutoriale, vom analiza meniurile complexe și cum să le integrăm în Wayfinder. Pentru a rezuma: acum site-ul nostru a luat o anumită formă și avem un meniu funcțional și dinamic.

Salutări dragi cititori. În ultima lecție, am umplut site-ul cu ceva conținut (), acum este timpul să pune totul în meniu astfel încât utilizatorii să poată naviga la ele.

creează dinamică meniu în MODX vom folosi fragmentul PdoMenu din pachet pdoTools. Înainte de a începe, citiți documentația principală.

Documentația pdoMenu

Opțiuni

Opțiuni de șablon

Opțiuni de clasă CSS

Exemple oficiale


Puteți citi documentația oficială aici. Și acum vom analiza cele mai tipice apeluri de meniu.

Apelați PdoMenu

Opțiunea 1. În locul acestui meniu static apelați fragmentul pdoMenu, pentru aceasta în arborele de resurse, pe fila „ Elemente” în secțiunea de fragmente, extindeți ramura pdoTools, apoi faceți clic pe pdoMenu butonul stâng al mouse-ului (nu eliberați butonul) și trageți acest fragment în locul în care doriți să apelați meniul, apoi completați parametrii necesari în fereastra care se deschide și faceți clic pe „ Salvați«.

Opțiunea 2. Doar scriem manual provocarea.

Exemple tipice

Meniu normal cu un singur nivel

De exemplu, avem cel mai comun meniu, cu următorul marcaj html.

• Acasă
• Despre companie
• Galeria de lucrări
• Plata si promotii
• Recenzii
• Contacte

Rezultatul este următorul cod cu un apel de meniu:

[]
• &parents=`0` - o listă de părinți (în cazul meu, nu limitez selecția, deoarece voi afișa oricum doar anumite pagini);
• &level=`1` - nivel de imbricare (în acest caz nu este prezent);
• &resources=`2,3,4,5` - o listă de resurse de afișat în meniu;
• &firstClass=`0` - clasa pentru primul element de meniu (nu care);
• &lastClass=`0` - clasa ultimului element de meniu (nu care);
• &outerClass=`top-menu` — clasă de pachet de meniu (înlocuit în ul);
• &hereClass=`current-menu-item` - clasa pentru elementul de meniu activ (inlocuit cu li);
• &rowClass=`menu-item` - clasa unei singure bare de meniu (înlocuită cu li).

Meniu de bootstrap personalizat pe două niveluri

Codul html static arată astfel:

Codul său de ieșire va fi astfel:

[[+wrapper]]