Promjena gornjeg izbornika. Promjena gornjeg izbornika Padajući izbornik na wayfinder modx

Započnimo lekciju 8 MODx Revolucije za početnike. Da vas podsjetim da radimo web stranicu za proučavanje MODx Revolucije. U prošloj lekciji pogledali smo koncept isječaka, koji su dijelovi PHP koda koji nam omogućuju dodavanje funkcionalnosti našoj web stranici. U ovoj lekciji ćemo pogledati poseban isječak - Wayfinder, i koristit ćemo ga za izradu dinamičkog izbornika za našu web stranicu.

Što je Wayfinder?

Putokazivač je isječak koji prikazuje nerazvrstan popis poveznica na resurse u stablu vašeg web mjesta; vrsta izlaza popisa ovisi o pozivu isječka i parametrima ovog poziva. Općenito, to znači da kada postavite poziv Wayfindera u svoj predložak, on počinje tražiti resurse koji zadovoljavaju parametre navedene u njemu i vraća popis poveznica na te resurse u nerazvrstanom formatu popisa ili u formatu koji vi definirate.

Zašto koristiti Wayfinder?

Obično koristim Wayfinder za izradu dinamičke navigacije stranicama, odnosno izbornika. Budući da većina HTML predložak Ako koristite neuređene popise za izradu izbornika, Wayfinder je savršen alat za tu svrhu. Prilikom izrade web-mjesta, možete pažljivo umetnuti svoje URL-ove u navigacijski izbornik, baš kao što ste prije radili na statičnom HTML web-mjestu. U isto vrijeme, svaki put kada trebate izbrisati ili stvoriti stranicu, morate napraviti odgovarajuće promjene u svom izborniku, promijeniti URL-ove. Korištenje Wayfinder isječka za dinamičko generiranje vaših izbornika izbjegava ovu glavobolju jer automatski otkriva promjene i mijenja vaš izbornik u skladu s tim.

Wayfinder je prilično fleksibilan alat i omogućuje vam da odredite koje resurse uključiti ili isključiti iz izbornika, kakav je predložak izbornika, koliko je dubok izbornik vaše stranice. Granica vaših mogućnosti određena je vašim HTML/CSS kodom.

Kako koristiti Wayfinder?

Kao što smo već spomenuli u prethodnoj lekciji, sintaksa za pozivanje isječaka izgleda ovako: [[!somesnippet]]

Ovo je samo osnovni poziv i nije dovoljan, osim toga moramo definirati neka svojstva ovog poziva. U slučaju Wayfindera, minimum koji treba definirati u svojstvima: gdje u stablu resursa Wayfinder treba započeti s izgradnjom popisa resursa. Stoga, prilikom pozivanja Wayfinder isječka, morate navesti barem jedan parametar - početni ID. Osnovni poziv Wayfinder isječka u ovom će slučaju izgledati ovako:

Ovaj poziv govori Wayfinderu da počne od korijena stabla ( iskaznica 0 znači korijen stranice) i prikazuje sve resurse koji su objavljeni i koji nemaju kvačicu u potvrdnom okviru Sakrij iz izbornika.

Ako pogledamo predložak koji koristimo, možemo vidjeti gornji izbornik s nekoliko opcija i padajućih popisa.

Pogledajmo predložak i kod koji izlazi ovaj izbornik:

Kao što vidite, ovo je ugniježđeni neuređeni popis. Zamijenimo ovaj kod osnovnim Wayfinder pozivom i vidimo što ćemo dobiti. Izbrišite gornji kod i zalijepite na njegovo mjesto:

[[!Tražilac puta? &startId=`0` ]]

Ako koristite isti predložak kao ja, vaš će kôd izgledati otprilike ovako:

Spremite predložak i pogledajte početna stranica, trebalo bi izgledati ovako:

Fantastičan! Vidite da je naš prethodni izbornik, koji je imao nekoliko opcija, sada zamijenjen jednostavnim izbornikom sa samo jednom stavkom - Home. To nam govori da Wayfinder radi prema očekivanjima i uzima jednu stranicu s naše stranice i prikazuje njezin naslov kao stavku izbornika.

Kreirajmo još par resursa. Dodat ću stranicu About s 3 podređene stranice (MODx, Tutorials, Contact i FAQ stranice). Možete stvoriti bilo koje resurse ili stranice za svoje web mjesto. Cilj ove vježbe je stvoriti nekoliko izvora kako bi Wayfinder imao što prikazati.

Završio sam s izradom stranica i stablo resursa moje stranice izgleda ovako:

Sada imamo nekoliko stranica, pogledajmo kako će pozivanje Wayfindera generirati izbornik za našu stranicu:

Dobra vijest je da su se sve naše stranice pojavile u izborniku i klikom na svaku stavku izbornika dolazimo na odgovarajuću stranicu. (Da biste testirali ovaj element, dodajte malo teksta na svaku stranicu, na primjer, na stranici O stranici možete dodati "Ovo je stranica O" i ova će se poruka pojaviti kada otvorite stranicu. Ne zaboravite da moramo definirati predložak za svaku stranici, ali u ovaj trenutak neću se brinuti oko toga).

Loša vijest je da je formatiranje izbornika pokvareno, ali možemo to popraviti. Klik desni klik mišem dođite do web stranice i pogledajte izvor(ili koristite firebug za ovo), vidjet ćete to sada Putokazivač generira HTML ovako:

Dom
Oko
- MODx CMS
- Podloga za kodiranje
  - Blog
  - Usluge
Kontaktirajte nas
Tutoriali
Pitanja

Kao što vidite, ovo izgleda vrlo slično našem početnom statičkom kodu uz nekoliko iznimaka. Prvo je generiran Wayfinder

sf-izbornik

stavke imaju parametar raspon, koji se odnosi na elemente teksta veze u izvornom statičkom kodu i nije prisutan u generiranom kodu Wayfindera. Osim toga, naš statični HTML kod ima klasu trenutna-stranica-stavka, koji nije predstavljen u našem Wayfinder isječku koda. Svi ovi dijelovi koji nedostaju čine naš jelovnik neuglednim.
Kako prilagoditi izlazni stil Wayfinder isječka
Gledajući kako Wayfinder generira kod, postavlja se vrlo prirodno pitanje: "Kako možemo dodati dijelove koda koji nedostaju tako da želimo prikazati izbornik u obliku koji nam je potreban?" Odgovor je vrlo jednostavan, koristimo dijelove predložaka za formatiranje izlaza Wayfinder isječka.
Wayfinder je fleksibilan alat i uz pomoć parametara možete definirati izgled izlaz. Neki opći parametri omogućuju vam da odredite na kojoj razini započeti izradu jelovnika, koje stavke ne uključiti u jelovnik itd. Ostale opcije su opcije predložaka koje vam omogućuju da odredite html kod predložak za vaš jelovnik itd. Opise potonjeg možete pronaći u službenoj dokumentaciji – http://rtfm.modx.com/display/ADDON/Wayfinder.
Uzeti na znanje: Neki parametri Wayfindera imaju zadane vrijednosti.
Ovo objašnjava, na primjer, zašto u izborniku koji generira Wayfinder, stavka Početna stranica ima naziv klase " prvi aktivni" Ovo je zadana klasa, ali je možemo nadjačati definiranjem vlastitih klasa u dijelovima predloška.
U ovom vodiču koristit ćemo nekoliko opcija Wayfindera, ali potičem vas da ih sve istražite i vježbate ih koristiti što je više moguće kako biste razumjeli sve njihove mogućnosti. Budući da su zadane postavke Wayfindera jasno dokumentirane na službenoj web stranici, bilo bi glupo o njima govoriti ovdje. Koristit ćemo ih sve više i više dok radimo na različitim jelovnicima.
Za početak rada na predlošku izbornika, stvorimo nekoliko mini predložaka i spremimo ih u komadima. Vidjet ćete da u ovim dijelovima koristimo HTML kod, ali zamjenjujemo dinamički elementi punila(ili rezervirana mjesta kako se još nazivaju) čija sintaksa izgleda ovako: [[+placeholder]]. Rezervirana mjesta koja koristimo specifična su za Wayfinder isječak i njihova je definicija očita iz naziva, ali uvijek možete pogledati MODx dokumentaciju za potpuniju pomoć.
Evo dijelova koje ću koristiti za izradu našeg predloška:
7in1menuOuter– sadržavat će HTML kod za naš vanjski ul spremnik.
Vidite da sam dodao razred za vanjsku ul. Alternativni način da biste to učinili, upotrijebite rezervirano mjesto wf.classes i zatim dodajte naziv klase trenutnom pozivu putokazača pomoću parametra vanjskaKlasa. Ali radi jednostavnosti, upotrijebimo prvu metodu, ali obje će dobro funkcionirati...
7in1menuRow– sadržavat će HTML kod stavki izbornika prve razine
[[+wf.linktext]][[+wf.wrapper]]

Glavna ideja ovdje je da sam ja dodao oznaku na tekst veze izbornika kao u izvornom statičkom HTML kodu. Također sam uključio rezervirano mjesto wf.classes i to će mi omogućiti da definiram klasu za trenutnu stranicu koja će nadjačati zadanu "aktivnu" klasu.

7in1menuInner– sadržavat će HTML kod internih ul spremnika

[[+wf.wrapper]]

7in1menuInnerRow– sadržavat će HTML kod za retke stavki unutarnje razine

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

To je to, sada su naši dijelovi predložaka na svom mjestu, kao što vidite (reda radi, stavio sam ih u zasebnu kategoriju):

Sada možemo promijeniti poziv Wayfindera tako da možemo koristiti ove mini predloške za izlaz Wayfindera. Ako pogledate popis parametara šablona (bilo bi korisno imati ispred sebe otvoren http://rtfm.modx.com/display/ADDON/Wayfinder ili ga ispisati i držati blizu ekrana), vidjet će da sam svoje dijelove nazvao sličnim parametrima poziva odgovarajućih isječaka. Učinio sam ovo zbog praktičnosti, pomaže mi pratiti što je što kad počnem konstruirati svoj poziv. Dodajmo parametre i pozovimo naše dijelove. Wayfinder poziv sada će izgledati ovako:

[[!Tražilac puta? &startId=`0` &outerTpl=`7in1menuOuter` &rowTpl=`7in1menuRow` &innerTpl=`7in1menuInner` &innerRowTpl=`7in1InnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` ]]

Vrijednosti parametara stavljaju se u apostrofe (`) umjesto jednostrukih navodnika (').

Sjajno, pogledajmo ovaj izazov. Možete vidjeti da koristimo opcije šablona za pozivanje naših dijelova tako da Wayfinder ispisuje HTML koji nam je potreban s ispravnim klasama. Definirao sam pozivatelja hereClass parametar i dao mu vrijednost trenutna_stavka_stranice tako da odgovara statičkom HTML predlošku. Možda ćete primijetiti da sam ostavio parametre prvi razred I lastClass prazan. Razlog tome je što moj HTML predložak ne postavlja klasu za prvi i zadnja točka izborniku, kako bih izbjegao preklapanja, prebrisao sam prazne retke u njima.

Vidi se da naš jelovnik izgleda baš onako kako smo htjeli. Ispravni stilovi koriste se u padajućem izborniku. Ako pogledate izvorni kod vidjet ćete da je generiran Putokazivač'ov HTML kod se promijenio do neprepoznatljivosti:

Ovaj kod odgovara izvornom statičkom kodu našeg predloška, ali je generiran pozivom Putokazivač.

Postoji mnogo drugih opcija koje možete koristiti zajedno s Putokazivač za izradu vaših jelovnika. U sljedećim lekcijama ćemo pogledati složene izbornike i kako ih integrirati u Wayfinder. Ukratko: naša web stranica je sada poprimila neki oblik i imamo funkcionalan i dinamičan izbornik.

Lijep pozdrav, dragi čitatelji. U prošloj lekciji smo stranicu napunili nekim sadržajem (), sada je vrijeme prikazati sve u izborniku tako da korisnici mogu doći do njih.

Stvorite dinamiku izbornik u MODX-u koristit ćemo isječak PdoMenu iz paketa pdoTools. Prije nego počnete, pročitajte glavnu dokumentaciju.

pdoMenu Dokumentacija

Mogućnosti

Opcije predloška

CSS opcije klase

Službeni primjeri

Službenu dokumentaciju možete pročitati ovdje. Sada pogledajmo najtipičnije pozive izbornika.

Pozovite PdoMenu

opcija 1. Umjesto ovog statičnog izbornika pozovite pdoMenu isječak, za to u stablu resursa, na kartici “ Elementi” u odjeljku s isječcima proširite nit pdoTools, zatim kliknite na pdoMenu lijevu tipku miša (ne puštajte tipku) i povucite ovaj isječak na mjesto gdje želite pozvati izbornik, zatim ispunite prozor koji se otvori traženi parametri i pritisnite " Uštedjeti«.

opcija 2. Samo ručno pišemo poziv.

Tipični primjeri

Obični jelovnik na jednoj razini

Na primjer, imamo najčešći izbornik, sa sljedećim html oznakama.

Rezultat je sljedeći kod za pozivanje izbornika:

&parents=`0` - popis roditelja (u mom slučaju ne ograničavam izbor, jer ću ionako samo ispisati određene stranice);
&level=`1` — razina ugniježđivanja (u u ovom slučaju ona nije tu);
&resources=`2,3,4,5` — popis resursa koji se trebaju prikazati u izborniku;
&firstClass=`0` — klasa za prvu stavku izbornika (ne koju);
&lastClass=`0` — klasa posljednje stavke izbornika (ne koja);
&outerClass=`top-menu` — klasa omotača izbornika (zamijenjena u ul);
&hereClass=`current-menu-item` — klasa za aktivnu stavku izbornika (zamijenjena u li);
&rowClass=`stavka-izbornika` — klasa jedne linije izbornika (zamijenjena u li).

Dvorazinski prilagođeni bootstrap izbornik

Statički html kod izgleda ovako:

Njegov izlazni kod će biti ovakav:

` &tplInner=`@INLINE ` &tplStart=`@INLINE [[+naslov izbornika]][[+omot]]` ]]

Promjena gornjeg izbornika. Promjena gornjeg izbornika Padajući izbornik na wayfinder modx

Što je Wayfinder?

Zašto koristiti Wayfinder?

Kako koristiti Wayfinder?

Kako prilagoditi izlazni stil Wayfinder isječka