Schimbați meniul de sus. Meniu Bagatory MODX cu sortare suplimentară Bootstrap Modx în funcție de poziție în meniu

Astăzi vom crea un meniu pentru blogul nostru folosind fragmentul suplimentar Wayfinder (documentația despre Wayfinder snippe). Navigarea de sus și capul de pe blogul nostru constă din două părți:

• Mobil
• Zvichaina

Deci va trebui să lucrăm la navigarea în lumea interlopă). Deci, ne împărțim navigarea capului în bucăți. Probabil că au mai rămas 4 bucăți înainte de documentare (nu uitați să curățați golurile):

&outerTpl=`wayOuterTpl` - bucată din lista principală

[[+wf.wrapper]]

&innerTpl=`wayInnerTpl` - o bucată din listă care apare

[[+wf.wrapper]]

&rowTpl=`wayRowTpl` - bucată pentru afișarea elementelor din listă

[[+wf.linktext]]

&parentRowTpl=`wayHasChildTpl` - bucată pentru afișarea elementelor listei părinte

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

Voi face clic pe fragmentul din antet:

[ ]

&startId=`0` - setează începutul fragmentului de fragment, în secțiunea noastră de la rădăcina site-ului.
&level=`2` - numărul de niveluri din meniul nostru.

Nou sosire – afișarea meniului nostru mobil. Principiul este asemanator cu cel pe care l-am folosit mai sus, aici avem nevoie si de 4 bucati.

&outerTpl=`wayOuterMobileTpl` - o bucată din lista principală.

[[+wf.wrapper]]

&innerTpl=`wayInnerMobileTpl` - bucată din lista internă.

[[+wf.wrapper]]

&rowTpl=`wayRowMobileTpl` - bucată pentru afișarea elementelor din listă.

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

&innerRowTpl=`wayInnerRowMobileTpl` - bucată pentru afișarea elementelor listei interne.

- [[+wf.linktext]][[+wf.wrapper]]

Wiklik Wayfinder este acum vizibil:

[ ]

Totuși, doar bucățile s-au schimbat. Acum avem navigare pe mobil, o puteți verifica cu instrumentul suplimentar Responsive Web Design Tester pentru Opera și Chrome.

Iată codul complet pentru porțiunea antetului:

Navigația noastră este gata! În videoclip ne-am uitat și la meniul de categorii al blogului. Deoarece principiul este același, nu m-am oprit să mă uit la el, dar mă minunez de videoclip) Ne vedem în lecțiile următoare!

Să începem lecția 8 din MODx Revolution pentru începători. Permiteți-mi să vă reamintesc că avem un site web pentru Revoluția MODx. În cele din urmă, ne-am uitat la conceptul de fragmente, care sunt bucăți de cod PHP care adaugă funcționalitate site-ului nostru. În această lecție ne vom uita la un fragment special - Wayfinder și îl vom folosi pentru a crea un meniu dinamic pe site-ul nostru.

Ce este Wayfinder?

Wayfinder– acesta este un fragment pentru afișarea unei liste nesortate de mesaje trimise către resurse din arborele site-ului dvs., tipul de listă afișat este în fragment și parametrii acestui apel. Aceasta înseamnă că atunci când plasați un Wayfinder faceți clic pe șablonul dvs., acesta începe să caute resurse care se potrivesc cu parametrii setați și rotește lista la acele resurse fie în formatul de listă nesortat, fie în cel selectat.

Doriți să vikorizați Wayfinder?

Utilizați Wayfinder pentru a crea meniuri și navigare dinamică pe site. Majoritatea fragmentelor șablon HTML Dacă doriți să creați liste neordonate pentru meniuri personalizate, Wayfinder este un instrument ideal în acest scop. Când creați un site, puteți introduce direct adresele URL în meniul de navigare, ceea ce ați făcut înainte într-un site HTML static. În același timp, de fiecare dată când trebuie să vizualizați sau să creați o pagină, trebuie să faceți modificări suplimentare în meniul dvs. și să modificați adresele URL. Utilizarea fragmentului Wayfinder pentru a vă genera dinamic meniurile elimină această durere de cap, deoarece detectează automat modificările și modifică prompt meniul.

Wayfinder este un instrument puternic care vă permite să determinați ce resurse să includeți sau să dezactivați din meniu, ce șablon de meniu și profunzimea meniului pentru site-ul dvs. Limita capabilităților dvs. este determinată de codul dvs. HTML/CSS.

Yak vikoristovati Wayfinder?

După cum am ghicit deja în lecția anterioară, sintaxa fragmentelor arată astfel: [[! un fragment]]

Este mai mult decât un simplu clic de bază și asta nu este suficient, cu excepția faptului că suntem vinovați pentru acțiunile autorităților de acest clic. În cazul Wayfinder, există cel mai mare minim care trebuie luat în considerare de către autorități: în arborele de resurse, Wayfinder este responsabil pentru pornirea unei liste de resurse. Astfel, în clic pe fragmentul Wayfinder, trebuie să setați un parametru - ID-ul cob. Wiki de bază al fragmentului Wayfinder arată astfel:

Acest wiklik îi spune Wayfinder-ului să înceapă de la rădăcina copacului ( ID 0 înseamnă rădăcina site-ului) și arată toate resursele care sunt publicate și care nu au bifări în casetele de selectare Ascundeți din meniuri.

Dacă ne uităm la șablonul pe care îl folosim, putem vedea meniul de sus cu o serie de elemente și liste care se derulează.

Să aruncăm o privire la șablonul și codul pentru a afișa acest meniu:

Yak vibachite, lista de investiții tse a dezorganizărilor. Să înlocuim acest cod cu clicul de bază Wayfinder și să vedem ce obținem. Ștergeți codul de direcționare și înlocuiți-l cu unul nou:

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

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

Salvați șablonul și admirați pagina principala, ea este vinovată că arată așa:

Fantastic! Puteți vedea că meniul nostru frontal, care are doar câteva elemente, a fost acum înlocuit cu un meniu simplu cu un singur element – ​​Acasă. Deci spuneți-ne că Wayfinder funcționează după cum este necesar și luați o pagină de pe site-ul nostru și afișați-i numele în elementul 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. În partea dreaptă puteți crea o mulțime de resurse, astfel încât Wayfinder să poată fi afișat.

Am terminat cu paginile principale și arborele de resurse ale site-ului meu arată astfel:

Acum avem o grămadă de pagini, este uimitor cum clicul lui Wayfinder generează un meniu pentru site-ul nostru:

Vestea bună este că toate paginile noastre au apărut în meniu și făcând clic pe elementul de meniu, suntem retrogradați pe cealaltă pagină. (Pentru a testa acest element, adăugați ceva text pe partea de piele, de exemplu, pe pagina Despre puteți adăuga „Acest aspect despre partea” și va apărea când pagina este deschisă. Rețineți că trebuie să specificăm un șablon pentru piele. side , ale in Narazi Nu știu despre acest turbo).

Vestea proastă este că formatarea meniului este întreruptă, dar îl putem repara. presa butonul corect intră pe site și admiră codul de ieșire(sau vikorist pentru acest firebug), îl puteți obține chiar acum Wayfinder generează HTML în următorul format:

• 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 original, cu excepția unei mici erori. În primul rând, Wayfinder a generat

articol fără clasă sf-meniu Care este stagnarea codului nostru static. Șablonul are nevoie de o clasă pentru lucrul cu CSS. De asemenea, este clar că
• parametru punctat span, care este inclus în elementele textului trimis în codul static original și nu este prezent în codul Wayfinder generat. În plus, codul nostru HTML static este elegant element-pagină-curent, care nu este reprezentat în codul fragmentului nostru Wayfinder. Toate acestea s-au întâmplat și aspectul meniului nostru este neatractiv.

  Cum să personalizați stilul fragmentului Wayfinder

  Privind modul în care Wayfinder generează cod, ne rămâne cu o întrebare complet firească: „Cum putem adăuga lucruri la cod, ce să respingem, astfel încât să dorim să afișăm meniul în modul în care avem nevoie?” Este și mai ușor, vom folosi fragmentele vikoriste ale șablonului pentru formatarea fragmentului Wayfinder.

  Wayfinder este un instrument flexibil și puteți selecta parametri suplimentari aspect exterior vivedennya. Acești parametri suplimentari vă permit să selectați de la orice nivel pentru a începe meniul zilnic, care elemente nu ar trebui să fie incluse în meniu. Alți parametri – aceștia sunt parametrii șablonului care vă permit să specificați cod htmlșablonul pentru meniul dvs. este același. O descriere a celor rămase poate fi găsită în documentația oficială - http://rtfm.modx.com/display/ADDON/Wayfinder.

  Ia-ti notite: Parametrii Wayfinder pot varia în funcție de industrie.

  Așa se explică, de exemplu, de ce în meniul generat de Wayfinder elementul din pagina de pornire se numește clasa „ primul activ" Aceasta este clasa pentru zamovchuvannyam, dar o putem rescrie atribuind puterea în bucăți șablonului.

  Vom trece în revistă o serie de parametri Wayfinder în această lecție, dar aș dori să-i înveți pe toți și să înveți din ei cât mai mult posibil pentru a le înțelege toate capacitățile. Unii dintre parametrii din spatele operațiunilor Wayfinder sunt documentați clar pe site-ul oficial, așa că ar fi neînțelept să vorbim despre ei aici. Vom încerca din ce în ce mai multe dintre ele dacă vom lucra cu meniuri diferite.

  Pentru a începe să lucrați la șablonul de meniu, să creăm o grămadă de șabloane de meniu și să le salvăm în bucăți. Veți observa că în aceste bucăți folosim codul HTML în loc să înlocuim elementele dinamice rezerve(sau substituenți așa cum sunt numite) sintaxa arată astfel: [[+substituent]]. Amintiți-vă, după cum știm, este special pentru povestea Wayfinder și semnificația sa este evidentă din nume, dar puteți oricând să reveniți la documentația MODx pentru mai multe detalii.

  

  Axa bucăților pe care le-am folosit pentru a crea șablonul nostru:

  7in1meniuExterior– codul HTML corect pentru containerul nostru extern ul.

  [[+wf.wrapper]]

  Știți că am adăugat o clasă pentru strada exterioară. Mod alternativ creați un wf.classes vikoristan și apoi adăugați un nume la clasă înainte de parametrul wayfinder vikoryst link link stream outerClass. Dar, de dragul simplității, să folosim prima metodă, altfel este normal să fii jignit de ele.

  7în1rând de meniu– Mister codul HTML pentru articolele din meniul de prim nivel

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

Principalul gând aici este că am adăugat eticheta Înainte ca textul meniului să fie scris ca în codul HTML static original. Am adăugat și wf.classes la listă și îmi va permite să definesc o clasă pentru partea fluxului, care va suprascrie clasa „activă”, care se află în spatele calculelor noastre.

7in1meniu Interior– codul HTML local al containerelor ul interne

[[+wf.wrapper]]

7in1menuInnerRow– cod HTML adecvat pentru rândurile de puncte din regiunile interne

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

Gata, acum șablonul nostru de bucăți este la locul lor, după cum citiți (de dragul comenzii, le-am plasat în aceeași categorie):



Acum putem schimba clicul Wayfinder, astfel încât să putem folosi aceste șabloane pentru a afișa Wayfinder. Yakshcho Vee uită-te la lista de parametri -mierni (Bulo Bulo boulawed în fața purimusului http://rtfm.modx.com/display/addon/wayfinder vіdkritim ab -rzdrukuvati ib trimati baly Ekran), vyu, parametrii Idpovіdnі pentru fragment video. După ce am creat acest lucru de dragul ușurinței, mă ajută să îmi dau seama ce să fac când încep să-mi construiesc apelul. Să adăugăm mai mulți parametri și să ne selectăm bucățile. Wiklik Wayfinder este acum matime vidlyad:

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

Valorile parametrilor sunt plasate în apostrofe (`), și nu în picioare simple (').

E grozav, haideți să aruncăm o privire pe acest blog. Puteți vedea că am personalizat parametrii șablonului pentru clicurile bucăților noastre, astfel încât Wayfinder să afișeze HTML-ul necesar pentru noi cu clasele corecte. Am numărat clicurile aiciClasa parametru și dându-i o valoare element_pagină_actuală Pentru a evita utilizarea unui șablon HTML static. Puteți observa că am șters parametrii clasa întâiі ultima ora gol. Motivul pentru aceasta este că șablonul meu HTML nu inserează o clasă pentru primul și ultimul element de meniu, astfel încât să nu existe suprapuneri, le suprascriu rândurile goale.



Se vede că meniul nostru arată exact așa cum ne-am dorit. Stilurile corecte sunt selectate din meniul care apare. Dacă te uiți la codul de ieșire, vei vedea că este generat Wayfinder Codul HTML de volum s-a schimbat dincolo de recunoaștere:

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

Acest cod este similar cu codul static original al șablonului nostru, dar nu este generat prin clic Wayfinder.

Există o mulțime de alți parametri pe care îi puteți controla în același timp Wayfinder pentru a vă solicita meniurile. În lecțiile următoare ne vom uita la meniurile pliabile și cum să le integrăm cu Wayfinder. Să aruncăm o privire: site-ul nostru este acum în plină formă și avem un meniu funcțional și dinamic.

În ultimele lecții am creat deja un meniu MODX: 1-a și 2-a - O adaptare a meniului derulant MODX standard cu wiki-uri Bootstrap. Astăzi începem să afișăm meniuri Bootstrap bogate cu niveluri nelimitate de contribuție (meniu cu 3 niveluri, 4 niveluri, 5 niveluri etc.).

De exemplu, voi afișa un meniu Bootstrap pe 5 niveluri, puteți crea un meniu cu 3 și 7 nivele, sau chiar 10, schimbând valorile nivel pentru nevoile tale!

A introdus un meniu Bootstrap bogat (cu intrare nelimitată) în MODX folosind PdoMenu suplimentar.

Meniul bogat va arăta astfel:

[]>[[+wrapper]]

` &tplInner=`@INLINE

[[+wrapper]]

` &tplParentRow=`@INLINE

[[+titlu meniu]] [[+wrapper]]

` ]]

Trei cutii nu merită. Deoarece Bootstrap 3 acceptă doar 2 niveluri de intrare, pentru a extinde nivelul de intrare al meniului Bootstrap 3, trebuie să conectați fișierul js cu următorul loc.

(funcție($)( $(document).ready(funcție()) ( $("ul.dropdown-menu ").on("clic", funcție(eveniment) ( event.preventDefault(); event.stopPropagation( ) $(this).parent().frați().removeClass(„deschis”); $(this).parent().toggleClass(„deschis”); )); )); ))(jQuery);

După aceea, vor începe să se deschidă al 3-lea, al 4-lea etc. contribuții egale. În principiu, totul, cu excepția unui singur lucru, acest meniu se va deschide în jos toate nivelurile, dar nu este deosebit de corect sau frumos, dar poate fi corectat Ajutor CSS.

Meniul meu drop-down sa terminat cu 2 rânduri de cod CSS, astfel încât liniile să cadă lateral.

Ul.dropdown-meniu (stânga: 100%; sus: -8px;) li.submenu1.dropdown.open>ul.dropdown-meniu (stânga: 0%; sus: 100%;)

Puteți selecta câteva coduri diferite (sau identice), iar numărul de rânduri poate fi mai mare dacă selectați un meniu dintr-un submeniu. Ei bine, încă se întâmplă să corectez CSS-ul după gustul meu, meta mea este să arăt baza. Cum să găsiți clasele CSS necesare în cod, înainte de care trebuie setate stilurile, este prezentat în videoclip, dar pentru a fi mai precis, întregul proces de creare a unui meniu bogat este afișat acolo.

Videoclipul meu are acest meniu

Dacă trebuie să rotiți elementele din meniul care scade (articolele sunt drept în jos dacă elementele cad la stânga), astfel încât axa să apară așa.

Apoi adăugați următorul cod CSS:

Li.submenu2.dropdown>a>span.caret (-moz-transform: rotire(-95deg); -ms-transform: rotire(-95deg); -webkit-transform: rotire(-95deg); -o-transform: rotire(-95deg); transformare: rotire(-95deg); ) li. webkit-transform: rotire(-95deg); -o-transform: rotire(-95deg); transformare: rotire(-95deg); )li. 95deg);-ms-transform: rotire(-95deg); -webkit-transform: rotire(-95deg); -o-transform: rotire(-95deg);

Wayfinder Serviți în organizarea listelor de corespondență pentru MODX. O gamă largă de șabloane vă permite să afișați liste în orice format dorit:

• Meniurile afișează liste, tabele, imagini cu pictograme etc.
• Meniu static
• Meniu cu diverse efecte (scădere, deschidere etc.)
• Harta site-ului

Wikliku fund:

&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`activ`
&rowClass=`eNav_li`]]

Parametrii Snipe:

&startId- ID-ul site-ului tatălui, dacă introduceți 0 va fi rădăcina site-ului. În spatele intrărilor se află o valoare ID a paginii active

&displayStart - afișați documentul cu startId la titlul meniului, pentru articolele promoționale false

&nivel- adâncimea depunerii, după spălare 0 - toate nivelurile

&limită- delimitarea unui număr de laturi la ieșire (pentru implicit 0 - fără delimitare)

&ignoreHidden- Ignorați caseta de selectare din partea „Afișați meniul”, atunci. Dacă introduceți 1, veți vedea toate paginile. Pentru detalii 0. Vor fi afișate doar acele pagini, ceea ce va activa caseta de selectare „Afișare în meniu”.

&ph - Există un înlocuitor care înlocuiește rezultatele care sunt afișate imediat. De obicei 0.

&depanare- modul de configurare (după instalare 0)

&hideSubMeniuri - Afișați submeniul activ (în spatele 0)

&Eliminare linii noi- elimină simbolul rândului transferat la ora eliminării (după eliminare 0)

&textOfLinks- Denumiți meniul. Opțiuni posibile:menutitle, id, pagetitle, descriere, părinte, alias, longtitle, introtext. Pentru restul titlul meniului

&titleOfLinks- pentru titlul meniului. Opțiuni:menutitle, id, pagetitle, descriere, părinte, alias, longtitle, introtext. Pentru restul titlul paginii

&rowIdPrefix- Setați id-ul (rowIdPrefix + docId) pentru elementul skin. Pentru curatare 0

&includeDocs- ID-ul documentelor prin intermediul cui, care vor fi incluse în meniu (nu indicați niciun detaliu)

&excludeDocs - ID-ul documentelor prin intermediul cui, care vor fi excluse din meniu (pentru setările 0)

&contexte- Context pentru generarea meniului. Asigurați-vă că țineți un ochi pe Promochans.

&startIdContext - Un identificator pentru contextul din care sunt luate documentele pentru a formula rezultatul.

&config - Extern fișier PHP pentru a salva configurația Wayfinder (exemplu: core/components/wayfinder/configs).

&sistem - Format pentru crearea adreselor URL. Valori posibile (pe baza API-ului makeURL):

1: (prin definiție) URL relativ la site_url;

0: minune http;

1: minune https;

full: URL absolută care începe cu site_url;

abs: URL absolută care începe cu base_url;

http: URL absolută, sarcini atribuite schemei http;

https: URL absolută, sarcinile sunt atribuite schemei https.

&filtrează după - Domeniul în care se realizează sortarea. (pentru curățare index meniu)

Opțiuni:

id, Menutitle, pagetitle, introtext, menuindex, published, hidemenu, parent, isfolder, description, alias, longtitle, type, template

&ordinea de sortare- Ordinea de sortare.„ASC” și „DESC”. De obicei ASC

&Unde - Stilul JSON al parametrilor de filtrare (Arată unde în MySQL). De exemplu, dacă trebuie să adăugați un blog sau articole noi Articole: &where=`[("class_key:!=": "Articol")]`
Aplica:
Afișați numai folderele: & unde = `isfolder = 1

&aiciId - Selectați ID-ul curent pentru motorul de căutare al fragmentului. Vikorist [[*id]] deoarece șablonul de comandă pentru ajutor aiciTpl și activeRowParentTpl nu este plasat corect în elementul de meniu. Pentru articole promoționale, vă rugăm să ne contactați.
Este necesar să indicați dacă scriptul în sine îl interpretează greșit, de exemplu, când un meniu este afișat dintr-o bucată dintr-un alt fragment.

&aiciTpl - Șablonul HereTpl este selectat în momentul în care articolul curent este afișat în meniu.
Substituenți posibili:
[[+wf.classes]] - loc pentru inserarea unei clase CSS personalizate (inclusiv class=" ")
[[+wf.classnames]] - eliminați numele clasei CSS (nu include class=" ")
[[+wf.link]] - adrese (href) pentru trimitere
[[+wf.title]] - text pentru titlu
[[+wf.linktext]] - denumește textul
[[+wf.wrapper]] - loc pentru afișarea submeniului
[[+wf.id]] - nou identificator unic (id)
[[+wf.attributes]] - afișarea atributelor suplimentare trimise
[[+wf.docid]] - identificatorul documentului pentru elementul de flux
[[+wf.subitemcount]] - numărul de elemente pe care le are tata
[[+wf.description]] - afișați valorile câmpului de descriere
[[+wf.introtext]] - afișează valorile câmpurilor pentru intratext

Model de fund: [[+wf.linktext][[+wf.wrapper]]

Parametrii șablonului

Acești parametri specifică bucățile care sunt utilizate pentru a crea șabloane și pentru a genera șabloane Wayfinder.

În versiunea actuală a Wayfinder pentru MODX Revolution, puteți refuza accesul la televizoarele personalizate folosind substituenții de prefix wf. , de exemplu [[+my_TV]]

În momentul scrierii, numai valorile TV de weekend vor fi rotite - nu vor fi formatate. De exemplu, dacă televizorul dvs. este o imagine - în primul rând, televizorul din mijlocul șablonului dvs. va roti noua etichetă de imagine, iar în mijlocul șablonului Wayfinder - singura cale către imagine va fi rotită.

Dacă doriți să afișați televizorul, puteți face clic pe fragmentul din șablonul rând Wayfinder (&rowTpl . De exemplu, imaginea dvs. TV se numește pictogramaȘi setați șablonul vikory pentru a afișa ceva de genul acesta:

... ...

Dacă fragmentele nu vă permit să ștergeți televizorul, va trebui să îl înlocuiți cu:

... ...

Și acum, la mijlocul fragmentului processTV, plasăm următorul cod PHP:

getObject("modResource", $myId); return $doc->getTVValue($myTV);

Ca rezultat, întreaga imagine a televizorului se rotește.

&exteriorTpl

Numele bucății se bazează pe șablonul containerului curent.

Substituenți disponibili:

• wf.classes - afișează clasele luate dintr-un set de parametri Wayfinder (inclusiv atributul class="")
• wf.classnames - nume de clasă afișate (fără class="")
• wf.wrapper – afișarea celui intern (rând).

[[+wf.wrapper]]

Parametrul &innerTpl conține același set de substituenți ca și &outerTpl .

&rowTpl

Numele bucății este un șablon pentru elementele rândului de meniu.

Substituenți disponibili:

• wf.classes - afișarea claselor (inclusiv atributul class="")
• wf.classnames - afișarea unor clase specifice (fără class="")
• wf.link – valoarea atributului href="" pentru link-ul meniului
• wf.title - numele textului titlului care urmează să fie trimis în câmpul specificat în parametrul &titleOfLinks
• wf.linktext - textul pentru mesajul oficial introdus în câmp va fi trecut la parametrul &textOfLinks
• wf.wrapper - afișarea internă în loc de, de exemplu, submeniul
• wf.id – o versiune a atributului ID unic. Va trebui să specificați parametrul &rowIdPrefix pentru ca această înregistrare să poată prelua valorile. Valoarea este prefix + docId.
• wf.attributes - afișează atributele elementului flux
• wf.docid – identificatorul documentului elementului de flux
• wf.description - descriere pentru elementul de flux
• wf.level – nivelul actual de contribuție

fundul Vikoristan:

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

Altă opțiune:

[[+wf.linktext]] - [[+wf.description]] [[+wf.wrapper]]

Aplică-l

Prima Rivnya

[[! Wayfinder? &startId=`0` &level=`1`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`activ`
&rowClass=`eNav_li`]]

Cod de bucată OuterTpl

[[+wf.wrapper]]

Cod fragment RowTpl

[[+wf.wrapper]]

Un alt nivel (în care meniul aplicației și elementele din submeniu erau vizual la același nivel

[[! Wayfinder? &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`activ`]]

Cod fragment exteriorTplFooterMenu

rowTplFooterMenu cod de bucată

• 
  
  [[+wf.title]]
  
  

[[+wf.wrapper]]

cod de bucată innerTplFooterMenu

[[+wf.wrapper]]

cod fragment innerRowTplFooterMenu

[[+wf.title]]

Vă respect, dragi cititori. Săptămâna trecută am umplut site-ul cu conținut (), acum este timpul pune totul în meniu pentru ca koristuvachs să poată trece la ei.

Creați dinamic meniu în MODX vom fi acolo pentru ajutor PdoMenu 3 pachete pdoTools. Înainte de a începe, familiarizați-vă cu documentația principală.

Documentație pentru pdoMenu

Parametrii

Parametrii șablonului

Parametrii clasei CSS

Stocuri oficiale

Puteți citi documentația oficială aici. Acum să aruncăm o privire la clicurile tipice din meniu.

Wiklik PdoMenu

Opțiunea 1. Pe site-ul acestui meniu static fragment wiklychemo pdoMenu, când se află în arborele de resurse, în fila „ Elementi„În secțiunea becașului, aprindeți focul 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ă faceți clic pe meniu, apoi completați parametrii necesari în fereastră și faceți clic pe „ Salvați«.

Opțiunea 2. Voi scrie doar de mână Wiklik.

Buttstocks tipice

Meniu primar cu un singur nivel

De exemplu, avem cel mai simplu meniu, cu aspect html avansat.

Axa principală este următorul cod din meniu:

• &parents=`0` — o listă de părinți (în selecția mea, nu separ selecția, așa că încă văd doar povestea cântecului);
• &level=`1` — nivelul contribuției (nu există);
• &resources=`2,3,4,5` — listă de resurse care trebuie afișate în meniu;
• &firstClass=`0` — clasa pentru primul element de meniu (niciunul);
• &lastClass=`0` - clasa elementului de meniu rămas (nici unul);
• &outerClass=`top-menu` - clasa din partea de sus a meniului (inclus în ul);
• &hereClass=`current-menu-item` - clasa pentru elementul de meniu activ (furnizat în li);
• &rowClass=`menu-item` - clasa unui rând de meniu (introdus în li).

Meniu bootstrap dublu personalizat

Codul html static arată astfel:

Codul pentru acest videoclip va fi astfel:

Așadar, în lecția următoare, voi adăuga câteva meniuri care vor renunța, bazate pe bootstrap (și pentru cei care nu înțeleg ideea. Ei bine, să trecem la asta.

La prima vedere, totul arată bine, dar dacă nu este așa, citește raportul și documentația, pune mâncare în comentarii, cu siguranță te voi ajuta.