Jak vytvořit horizontální menu v modx. Víceúrovňové menu MODX pomocí Bootstrap. Co je Wayfinder

Začněme lekcí 8 MODx Revolution pro začátečníky. Připomínám, že děláme stránky pro výuku MODx Revolution. V minulé lekci jsme se podívali na koncept snippetů, což jsou kousky PHP kódu, které nám umožňují přidat funkcionalitu na náš web. V tomto tutoriálu se podíváme na speciální úryvek – Wayfinder, a použijeme jej k vytvoření dynamického menu pro náš web.

Co je Wayfinder?

Wayfinder je úryvek, který zobrazuje netříděný seznam odkazů na zdroje ve stromu vašeho webu, typ výstupu seznamu závisí na volání úryvku a parametrech tohoto volání. Obecně to znamená, že když ve své šabloně zavoláte Wayfinder, začne hledat zdroje, které odpovídají parametrům v ní uvedeným, a vrátí seznam odkazů na tyto zdroje ve formátu netříděného seznamu nebo ve formátu určíte.

Proč používat Wayfinder?

Wayfinder obvykle používám k vytvoření dynamické navigace na webu, tedy nabídky. Protože většina šablon HTML používá k vytváření nabídek neuspořádané seznamy, Wayfinder je pro to dokonalým nástrojem. Při vytváření webu můžete své adresy URL pečlivě vkládat do navigační nabídky, stejně jako jste to dělali dříve na statickém webu HTML. Zároveň pokaždé, když potřebujete smazat nebo vytvořit stránku, musíte provést příslušné změny ve svém menu, změnit adresy URL. Použitím úryvku Wayfinderu k dynamickému generování vašich nabídek se těmto bolestem vyhnete, protože automaticky detekuje změny a podle toho změní vaši nabídku.

Wayfinder je poměrně flexibilní a umožňuje vám definovat, jaké zdroje zahrnout nebo vyloučit z nabídky, jaká je šablona nabídky, jak hluboká je nabídka vašeho webu. Vaše limity jsou určeny vaším HTML/CSS kódem.

Jak používat Wayfinder?

Jak jsme zmínili v předchozí lekci, syntaxe pro volání úryvků vypadá takto: [[!somesnippet]]

Toto je pouze základní volání a nestačí, kromě toho musíme definovat některé vlastnosti tohoto volání. V případě Wayfinderu je minimum, které je třeba definovat ve vlastnostech, kde ve stromu zdrojů by měl Wayfinder začít sestavovat seznam zdrojů. Ve volání úryvku Wayfinder tedy musí být zadán alespoň jeden parametr – počáteční ID. Základní volání fragmentu Wayfinder by v tomto případě vypadalo takto:

Toto volání říká Wayfinderu, aby začal u kořene stromu ( ID 0 znamená kořenový adresář webu) a zobrazuje všechny zdroje, které jsou publikovány a nemají zaškrtávací políčko Skrýt z nabídek (Hide from the Menu).

Pokud se podíváme na šablonu, kterou používáme, můžeme vidět horní nabídku s několika položkami a rozevíracími seznamy.

Pojďme se podívat na šablonu a kód, který vykresluje tuto nabídku:

Jak vidíte, jedná se o vnořený neuspořádaný seznam. Pojďme tento kód nahradit základním voláním Wayfinderu a uvidíme, co se stane. Smažte výše uvedený kód a vložte jej na jeho místo:

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

Pokud používáte stejnou šablonu jako já, bude váš kód vypadat nějak takto:

Uložte šablonu a podívejte se na domovskou stránku, měla by vypadat takto:

Fantastický! Vidíte, že naše předchozí menu, které mělo několik položek, bylo nyní nahrazeno jednoduchým menu s jedinou položkou - Home. To nám říká, že Wayfinder funguje podle očekávání a bere jednu stránku z našeho webu a zobrazuje její název jako položku nabídky.

Vytvořme několik dalších zdrojů. Chystám se přidat stránku About se 3 podřízenými stránkami (MODx, Tutorials, Contact a FAQ). Pro svůj web můžete vytvořit libovolné zdroje nebo stránky. Účelem tohoto cvičení je vytvořit nějaké zdroje, aby měl Wayfinder co zobrazovat.

S vytvářením stránek jsem skončil a můj strom zdrojů webu vypadá takto:

Nyní máme několik stránek, podívejme se, jak volání Wayfinderu vygeneruje nabídku pro náš web:

Dobrou zprávou je, že se v nabídce objevily všechny naše stránky a kliknutím na každou položku nabídky se dostaneme na odpovídající stránku. (Chcete-li otestovat tento prvek, přidejte na každou stránku nějaký text, například na stránce O aplikaci můžete přidat „Toto je stránka O aplikaci“ a tato zpráva se zobrazí po otevření stránky. Nezapomeňte, že musíme definovat šablonu pro každou stránku, ale v tuto chvíli si s tím nebudu dělat starosti).

Špatná zpráva je, že formátování nabídky je nefunkční, ale můžeme to opravit. Klikněte pravým tlačítkem na webovou stránku a podívejte se na zdrojový kód (nebo k tomu použijte firebug), hned to uvidíte Wayfinder generuje HTML takto:

• Domov
• O
  • CMS MODX
  • Kódovací podložka
    • Blog
    • Služby
• Kontaktujte nás
• Tutoriály
• FAQ

Jak můžete vidět, vypadá to velmi podobně jako náš počáteční statický kód s několika výjimkami. Nejprve vygeneroval Wayfinder

položka bez třídy sf-menu který byl použit v našem statickém kódu. Šablona potřebuje tuto třídu pro práci s CSS. Je to také vidět
• položky mají parametr rozpětí, který odkazuje na prvky textu odkazu v původním statickém kódu a není přítomen ve vygenerovaném kódu Wayfinder. Náš statický HTML kód má navíc třídu acurrent-page-item, který není obsažen v našem fragmentu kódu Wayfinder. Všechny tyto chybějící kousky způsobují, že naše menu vypadá nevzhledně.

  Jak přizpůsobit styl výstupu úryvku wayfinderu

  Když se podíváme na to, jak Wayfinder generuje kód, máme zcela přirozenou otázku: „Jak přidáme chybějící části kódu, abychom chtěli zobrazit nabídku ve formě, kterou potřebujeme?“ Odpověď je velmi snadná, k formátování výstupu úryvku Wayfinderu používáme kousky šablon.

  Wayfinder je flexibilní nástroj a pomocí parametrů můžete definovat vzhled výstupu. Některé obecné volby vám umožňují určit, na jaké úrovni začít sestavovat nabídku, které položky z nabídky vyloučit a tak dále. Dalšími možnostmi jsou možnosti šablony, které vám umožní nastavit šablonu html kódu pro vaši nabídku atd. Popis druhé možnosti naleznete v oficiální dokumentaci – http://rtfm.modx.com/display/ADDON/Wayfinder.

  Vzít na vědomí: některé možnosti Wayfinderu mají výchozí hodnotu.

  To například vysvětluje, proč v nabídce generované Wayfinderem má položka Domovská stránka název třídy “ první aktivní". Toto je výchozí třída, ale můžeme ji přepsat definováním vlastních tříd v blocích šablony.

  V tomto tutoriálu použijeme několik možností Wayfinderu, ale doporučuji vám, abyste se je naučili všechny a procvičili si je co nejvíce, abyste pochopili jejich plný potenciál. Vzhledem k tomu, že výchozí parametry Wayfinderu jsou jasně zdokumentovány na oficiálních stránkách, bylo by hloupé o nich zde mluvit. Při práci s různými nabídkami jich budeme používat stále více.

  Chcete-li začít se šablonou nabídky, vytvořte několik mini šablon a uložte je po částech. Uvidíte, že v těchto částech používáme kód HTML, ale nahrazujeme dynamické prvky zástupné symboly(nebo zástupné symboly jak se jim také říká), jejichž syntaxe vypadá takto: [[+placeholder]]. Zástupné symboly, které používáme, jsou specifické pro úryvek Wayfinder a jejich definice je zřejmá z názvu, ale vždy se můžete obrátit na dokumentaci MODx, kde najdete úplnější nápovědu.

  

  Zde jsou kousky, které použiji k vytvoření naší šablony:

  Nabídka 7v1Vnější- bude obsahovat HTML kód pro náš vnější ul kontejner.

  [[+wf.wrapper]]

  Vidíte, že jsem přidal třídu pro vnější ul. Alternativním způsobem, jak toho dosáhnout, je použít zástupný symbol wf.classes a poté přidat název třídy k aktuálnímu volání wayfinder pomocí parametru vnější třída. Ale pro jednoduchost použijme první způsob, ale oba budou fungovat dobře...

  Nabídka 7v1Řádek– bude obsahovat HTML kód položek nabídky první úrovně

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

Hlavní myšlenkou je, že jsem přidal tag na text odkazu nabídky jako v původním statickém HTML kódu. Zahrnul jsem také zástupný symbol wf.classes a to mi umožní definovat třídu pro aktuální stránku, která přepíše výchozí „aktivní“ třídu, kterou máme.

Vnitřní nabídka 7v1– bude obsahovat HTML kód vnitřních ul kontejnerů

[[+wf.wrapper]]

Nabídka 7v1InnerRow– bude obsahovat HTML kód pro řádky položek interních úrovní

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

To je vše, nyní jsou naše kousky šablon na místě, jak můžete vidět (pro pořádek jsem je zařadil do samostatné kategorie):



Nyní můžeme upravit volání Wayfinderu, abychom mohli použít tyto mini šablony pro výstup Wayfinderu. Pokud se podíváte na seznam možností šablon (bylo by užitečné mít http://rtfm.modx.com/display/ADDON/Wayfinder otevřený před očima nebo vytisknout a podržet blízko obrazovky), uvidíte, že Volal jsem své kousky podobně jako odpovídající parametry volání úryvků. Udělal jsem to pro pohodlí, pomáhá mi to sledovat, co se děje, když začnu sestavovat hovor. Pojďme přidat parametry a zavolat naše kousky. Volání na Wayfinder bude nyní vypadat takto:

[[!Wayfinder? &startId=`0` &outerTpl=`7in1menuVnější` &rowTpl=`7v1menuŘádek` &innerTpl=`7in1menuVnitřní` &innerRowTpl=`7v1Vnitřnímřádku` &hereClass=`aktuální_položka_stránky` &firstClass=`` &posledníTřída]

Hodnota parametru je uzavřena v apostrofech (`), nikoli v jednoduchých uvozovkách (').

Dobře, pojďme se podívat na tuto výzvu. Můžete vidět, že používáme možnosti šablony k volání našich částí, aby Wayfinder vydával požadované HTML se správnými třídami. Definoval jsem callable zdeTřída parametr a dal mu hodnotu aktuální_položka_stránky aby odpovídala statické HTML šabloně. Vidíte, že jsem nechal parametry první třída A Poslední třída prázdný. Důvodem je to, že moje šablona HTML nenastavuje třídu pro první a poslední položku nabídky, takže abych se vyhnul překrývání, přepsal jsem v nich prázdné řádky.



Je vidět, že naše menu vypadá přesně tak, jak jsme chtěli. V rozbalovací nabídce jsou použity správné styly. Pokud se podíváte na zdrojový kód, uvidíte, že je vygenerován Wayfinder‘om HTML kód se změnil k nepoznání:

• Domov
• O
  • CMS MODX
  • Kódovací podložka
    • Blog
    • Služby
• Kontaktujte nás
• Tutoriály
• FAQ

Tento kód odpovídá původnímu statickému kódu naší šablony, ale byl vygenerován voláním Wayfinder.

Existuje mnoho dalších možností, které můžete použít Wayfinder k sestavení vašich jídelníčků. V následujících návodech se podíváme na komplexní nabídky a na to, jak je integrovat do Wayfinderu. Abych to shrnul: nyní naše stránky nabyly nějaké formy a máme funkční a dynamické menu.

V předchozích tutoriálech jsme již vytvořili nabídku MODX: 1. – a 2. – Zobrazení standardní rozevírací nabídky MODX pomocí Bootstrapu. Dnes se naučíme, jak zobrazit víceúrovňové Bootstrap nabídky s neomezenou úrovní vnoření (3úrovňové menu, 4úrovňové, 5úrovňové atd.).

Například zobrazím 5úrovňovou nabídku Bootstrap, ale můžete ji změnit na 3úrovňovou i 7úrovňovou, alespoň 10, změnou hodnoty úroveň na to, co potřebujete!

Zobrazení víceúrovňové nabídky Bootstrap (s neomezeným vnořováním) v MODX pomocí PdoMenu.

Výstup víceúrovňového menu bude vypadat takto:

[]>[[+wrapper]]

[[+wrapper]]

Po vybalení to nepůjde. Protože Bootstrap 3 ve výchozím nastavení podporuje pouze 2 úrovně vnoření, a chcete-li rozšířit úroveň vnoření nabídky bootstrap 3, musíte zahrnout soubor js s následujícím obsahem.

(function($)( $(document).ready(function()( $("ul.dropdown-menu ").on("click", function(event) ( event.preventDefault(); event.stopPropagation() ; $(this).parent().siblings().removeClass("open"); $(this).parent().toggleClass("open"); )); )); ))(jQuery);

Poté se začne otevírat 3., 4. atd. úrovně vnoření. V zásadě všechno, ale je tu jedna věc, toto menu otevře všechny úrovně, a to podle mého názoru není příliš správné a krásné, ale lze to opravit pomocí CSS.

V mém případě to dopadlo na 2 řádky kódu CSS, takže úrovně vypadly na stranu.

ul.dropdown-menu (vlevo: 100 %; nahoře: -8px;) li.submenu1.dropdown.open>ul.dropdown-menu (vlevo: 0 %; nahoře: 100 %;)

Můžete získat mírně odlišný (ale shodný s tímto) kód a počet jeho řádků může být větší, pokud máte několik větví nabídky s podnabídkami. No a na maličkostech si budete muset upravit css podle svého gusta, mým cílem je ukázat základy. Jak najít potřebné css třídy v kódu, na který chcete styly aplikovat, ukazuje video, ale pro upřesnění je tam ukázán celý proces tvorby víceúrovňového menu.

Zde je menu v mém videu

Pokud potřebujete otočit trojúhelníky v rozbalovací nabídce (ukazují dolů, když položky rozbalují doleva), jak by to vypadalo.

Poté přidejte následující css kód:

Li.submenu2.dropdown>a>span.caret ( -moz-transform: otočit (-95 stupňů); -ms-transform: otočit (-95 stupňů); -webkit-transform: otočit (-95 stupňů); -o-transformovat: otočit(-95 stupňů); transformovat: otočit(-95 stupňů); ) li.podnabídka3.rozbalovací nabídka>a>span.caret ( -moz-transform: otočit(-95 stupňů); -ms-transformovat: otočit(-95 stupňů); - webkit-transform: otočit(-95 stupňů); -o-transformovat: otočit (-95 stupňů); transformovat: otočit (-95 stupňů); ) li.submenu4.dropdown>a>span.caret ( -moz-transform:otočit(- 95 stupňů); -ms-transform: otočit (-95 stupňů); -webkit-transform: otočit (-95 stupňů); -o-transform: otočit (-95 stupňů); transformovat: otočit (-95 stupňů); )

Zdravím vás milí čtenáři. V minulé lekci jsme naplnili stránky nějakým obsahem (), teď je čas na to dát vše do nabídky aby k nim uživatelé mohli přejít.

vytvořit dynamiku menu v MODX budeme používat úryvek PdoMenu z balíčku pdoTools. Než začnete, přečtěte si hlavní dokumentaci.

Dokumentace pdoMenu

Možnosti

Možnosti šablony

Možnosti třídy CSS

Oficiální příklady

Oficiální dokumentaci si můžete přečíst zde. A nyní budeme analyzovat nejtypičtější volání menu.

Zavolejte PdoMenu

Možnost 1. Místo tohoto statického menu volání úryvku pdoMenu, za tímto účelem ve stromu zdrojů na kartě „ Elementy” v sekci úryvky rozbalte větev pdoTools a poté klikněte na pdoMenu levé tlačítko myši (tlačítko nepouštějte) a přetáhněte tento úryvek na místo, kde chcete nabídku vyvolat, poté vyplňte požadované parametry v okně, které se otevře, a klikněte na „ Uložit«.

Možnost 2. Prostě ručně napíšeme výzvu.

Typické příklady

Normální jednoúrovňové menu

Máme například nejběžnější nabídku s následujícím označením html.

Výsledkem je následující kód s voláním nabídky:

• &parents=`0` - seznam rodičů (v mém případě výběr neomezuji, jelikož stejně zobrazím jen určité stránky);
• &level=`1` - úroveň vnoření (v tomto případě není přítomna);
• &resources=`2,3,4,5` - seznam zdrojů k zobrazení v nabídce;
• &firstClass=`0` - třída pro první položku nabídky (ne kterou);
• &lastClass=`0` - třída poslední položky nabídky (ne která);
• &outerClass=`top-menu` — třída obalu nabídky (nahrazena v ul);
• &hereClass=`aktuální-položka-nabídky` - třída pro aktivní položku nabídky (nahrazena v li);
• &rowClass=`menu-item` - třída jednoho pruhu menu (nahrazeno li).

Dvouúrovňové vlastní bootstrap menu

Statický html kód vypadá takto:

Jeho výstupní kód bude vypadat takto:

Také v příští lekci uvedu několik dalších výstupů rozbalovacích nabídek založených na bootstrapu (a to je pro ty, kteří nepochopili podstatu. No, pak uděláme .

Na první pohled vše vypadá složitě, ale není tomu tak, přečtěte si dokumentaci pro další podrobnosti, zeptejte se v komentářích, určitě pomůžu.

Datum zveřejnění: 07.02.2011

V tomto jednoduchém návodu vám ukážu, jak upravit menu.

Jednou jsem byl požádán, abych opravil chybu v nabídce na jednom webu – některé položky se tvrdošíjně nechtěly zarovnat, ale místo toho se při najetí myší vyhrabaly na neočekávaná místa na stránce. Chyba nebyla v křivém css, jak jsem původně předpokládal, ale v křivém volání Wayfinder.

Co je Wayfinder- jedná se o úryvek, který se používá, když je potřeba vypsat dokumenty sekce/ů. Výsledkem úryvku je generování neuspořádaného seznamu. S pomocí různých parametrů můžete s tímto seznamem dělat cokoli :) Více se dočtete v dokumentaci, nebo zadáním do Googlu - “wayfinder modx wiki”.

Důležité poznámky:

1. O tom, co je MODx, jak nainstalovat MODx, jak uspořádat strukturu dokumentů, jak udělat šablonu z html, co je to chunk a tak dále. Otázky pro začátečníky v této lekci neberu v úvahu.

2. Zástupné symboly, které budu používat v tutoriálu, jsou ve formátu, kterému „rozumí“ verze Evo. Jaký je rozdíl, viz příklad:

Pojďme se tedy podívat na vytvoření menu krok za krokem.

Krok 1

Pro lekci jsem načrtl následující menu:

Zde jsem pro přehlednost aplikoval různé styly na různé úrovně menu. Na stránkách, kde se opravovala chyba s menu, to bylo zhruba stejné – každá úroveň menu má svůj styl.

Sazba - podrobnosti o rozvržení nejsou zahrnuty v rozsahu této lekce, takže jsem dostal tento kód:

• Domov
• produkty
  • Sérum pravdy
  • Lék Makropulos
  • Univerzální prostředky
• dodávka
  • Sérum pravdy
  • Lék Makropulos
  • Univerzální prostředky
• Dodavatelé

Po obdivování kódu sami určíme, která třída v naší nabídce je za co zodpovědná (to je, pokud se hrabeš v cizím kódu, mělo by to být jasné i ve tvém):

ul class="menu" - třída celého menu
li class="top" - třída položky nabídky nejvyšší úrovně
a class="top_link" - třída pro odkazy v položkách nejvyšší úrovně
ul class="sub" - třída podnabídky
dobře, span class="down" pro zdobení předmětů nejvyšší úrovně

Krok 2. Vytvořte tři dokumenty

produkty
- Dodávka
- Dodavatelé
V dokumentu "Produkty" vytváříme podřízené dokumenty: "Sérum pravdy", "Makropulos Remedy", "Universal Remedies".

Krok 3. Přesuňte nabídku na samostatný blok

V šabloně na místě, kde byste měli mít menu, odstraníme veškerý nepotřebný kód (html kód samotného menu), místo toho napíšeme

Menu tedy vyjmeme v samostatné části. Poté vytvoříme nový chunk a zavoláme ho Jídelní lístek. Prozatím můžete zkopírovat kód nabídky, který jste vytvořili, do obsahu bloku. Pro přehlednost.

Přejděte na panel administrátora v části „Stránky“-> „Zobrazit“ – zkontrolujte, zda je vše v pořádku s cestami k souboru stylu a obrázky.

Stalo? Dobře, ale ještě to není menu. Pojďme mu vdechnout život pomocí Wayfinderu.

Krok 4

Odstraňte veškerý obsah části nabídky a místo toho zavolejte fragment Wayfinder.
Dokud píšeme:

parametr startId- označuje, od kterého dokumentu začít tvořit seznam. Máme 0 - to znamená, že seznam je tvořen z kořene stromu dokumentů.

Uvidíme, co se stane:

Toto je pracovní a živé menu. Přejmenovat dokumenty, odstranit, přidat - nabídka se vytvoří podle stromu dokumentů.

Krok 5

5.1. Nyní vrátíme vzhled menu do normálu

Wayfinder standardně generuje jednoduchý kód () , všechny třídy seznamů a položek mají při volání speciální parametry.

Na začátku lekce jsme určili, které třídy css v naší nabídce jsou za co zodpovědné. Wayfinder má možnosti, které potřebujeme: vnější třída- třída pro kontejner menu. Při porovnání s naším rozložením dostáváme následující volání Wayfinder:

kromě parametrů s třídami zadejte úroveň vnoření - &level=`2`.

Zaznamenali jsme nedostatky - žádné třídy pro položky nabídky nejvyšší úrovně, žádné značky a třída pro podnabídku.
Všechny tyto nedostatky jsou opraveny přidáním vhodných parametrů do volání Wayfinder.

5.2. Přidávání tříd k položkám a štítkům nejvyšší úrovně

K tomu existuje proměnná rowTpl, která popisuje šablonu pro položku nabídky, vytvoříme takovou šablonu, pro kterou vytvoříme chunk nazvaný rodič:

Ve volání do Wayfinder přidejte &rowTpl=`rodič` .
Nezapomeňte zkontrolovat zdrojový kód - téměř vše je v pořádku, podnabídka zůstává.

Pro nastavení podnabídky používáme proměnnou innerRowTpl.

Vytvořte kus vnitřní:

Přidání proměnné do volání Wayfinder innerRowTpl=`vnitřní` a proměnná, která určuje třídu pro kontejner podnabídky &innerClass=`sub` .

Poslední volání do Wayfinderu vypadá takto:

To je vše, naše menu je připraveno. Hodně štěstí!

• Menu ve formě seznamu, tabulky, obrázků, s ikonami atd.
• Statické nabídky
• Nabídky s různými efekty (rozbalovací, rozevírací atd.)
• Mapa stránek

&rowTpl=`rowTpl`
&outerTpl=`vnějšíTpl`
&hereClass=`aktivní`
&rowClass=`eNav_li`]]

Možnosti úryvku:

&startId- id nadřazené stránky, pokud zadáte 0, bude to z kořenového adresáře webu. Výchozí hodnotou je id aktivní stránky.

&zobrazit Start - zobrazit dokument s startId v názvu nabídky, ve výchozím nastavení false

&úroveň- hloubka vnoření, výchozí 0 - všechny úrovně

&omezit- omezit počet stránek na výstupu (výchozí 0 - bez omezení)

&ignorovatSkrytý- ignorujte zaškrtávací políčko na stránce "Zobrazit v menu", tzn. pokud zadáte 1, zobrazí se všechny stránky. Výchozí hodnota je 0. Zobrazí se pouze stránky, které mají zaškrtnuté políčko „Zobrazit v nabídce“.

&ph - název náhražky, která nahrazuje okamžitý výstup. Výchozí hodnota je 0.

&ladit- režim ladění (výchozí 0)

&skrýt Podnabídku - rozbalit pouze aktivní podnabídku (výchozí 0)

&odstranitNové řádky- odstraní znak konce řádku na výstupu (výchozí 0)

&textOdkazů- pro název odkazu na menu. Možné možnosti:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext . Výchozí název menu

&titleOfLinks- pro název odkazu nabídky. Možnosti:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. Výchozí název stránky

&rowIdPrefix- nastaví id (rowIdPrefix + docId) pro každý prvek. Výchozí 0

&zahrnoutDokumenty- id dokumentů oddělených čárkami, které budou zahrnuty v nabídce (ve výchozím nastavení není uvedeno)

&vyloučitDokumenty - id dokumentů oddělených čárkami, které budou z nabídky vyloučeny (ve výchozím nastavení 0)

&kontexty- kontext pro generování menu. Výchozí hodnota je aktuální.

&startIdContext - Kontextový identifikátor, ze kterého jsou převzaty dokumenty k vytvoření výsledku.

&konfigurovat - Externí soubor PHP pro uložení konfigurace Wayfinder (příklad: core/components/wayfinder/configs).

&systém - Formát pro generování adresy URL. Možné hodnoty (na základě volání makeURL API):

1: (výchozí) URL relativní k site_url;

0: viz http;

1: viz https;

full: absolutní URL začínající site_url;

abs: absolutní URL začínající base_url;

http: absolutní URL, vynucené ve schématu http;

https: absolutní adresa URL, vynucená ve schématu https.

&seřazeno podle - Pole, podle kterého se má seřadit. (výchozí menuindex)

Možnosti:

Příklad šablony: [[+wf.linktext]][[+wf.wrapper]]

Možnosti šablony

Tyto volby určují bloky, které obsahují vzory, které budou generovat výstup Wayfinder.

V aktuální verzi Wayfinder for MODX Revolution můžete přistupovat ke svým vlastním televizorům pomocí zástupných symbolů předpony wf. , například [[+moje_TV]]

V době psaní tohoto článku budou vráceny pouze původní hodnoty TV – nebudou formátovány. Pokud je například vaším televizorem obrázek – typické použití takového televizoru uvnitř vaší šablony vrátí celý tag celého obrázku, ale uvnitř šablony Wayfinder – bude vrácena pouze cesta k obrázku.

Pokud chcete pracovat s televizí, můžete tak učinit voláním úryvku v šabloně řádku Wayfinder (&rowTpl . Například vaše obrazová televize se nazývá ikona a obvykle se pro výstup v šabloně používá něco jako tento kód:

... ...

Ale protože vám to nedovolí ovládat televizi, musíte ji nahradit:

... ...

A nyní do fragmentu processTV umístíme následující kód PHP:

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

V důsledku toho se vrátí plně zpracovaný televizní obraz.

&vnějšíTpl

Název části obsahující šablonu vnějšího kontejneru.

Dostupné zástupné symboly:

• wf.classes - Zobrazí třídy převzaté ze sady voleb Wayfinder (včetně atributu class="").
• wf.classnames - zobrazení názvů tříd (bez class="")
• wf.wrapper - výstup interního obsahu (řádek).

[[+wf.wrapper]]

Parametr &innerTpl obsahuje stejnou sadu zástupných symbolů jako &outerTpl .

&rowTpl

Název bloku obsahujícího šablonu pro prvky řádku nabídky.

Dostupné zástupné symboly:

• wf.classes - výstup třídy (včetně atributu class="")
• wf.classnames - výstup odpovídajících tříd (bez class="")
• wf.link – hodnota atributu href="" pro odkaz na nabídku
• wf.title – název textu nadpisu odkazu z pole zadaného v parametru &titleOfLinks
• wf.linktext - text pro aktivní odkaz zadaný v poli předaném v parametru &textOfLinks
• wf.wrapper - výstup vnitřního obsahu jako podnabídka
• wf.id - výstup jedinečného ID atributu. Aby tento zástupný symbol získal hodnotu, musíte zadat parametr &rowIdPrefix. Hodnota je prefix + docId.
• wf.attributes - Zobrazí odkaz na atribut pro aktuální prvek
• wf.docid - ID dokumentu aktuálního prvku
• wf.description - popis aktuálního prvku
• wf.level - aktuální úroveň vnoření

Příklad použití:

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

Jinou možnost:

Příklady

První úroveň

vnější kód bloku Tpl

[[+wf.wrapper]]

rowTpl blokový kód

[[+wf.wrapper]]

Druhá úroveň (v tomto příkladu byly položky nabídky a podnabídky vizuálně na stejné úrovni

[[!Wayfinder? &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`vnějšíTplNabídka zápatí`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`aktivní`]]

Kód bloku OuterTplFooterMenu

rowTplFooterMenu kód bloku

• 
  
  [[+wf.title]]
  
  

[[+wf.wrapper]]

innerTplFooterMenu blokový kód

[[+wf.wrapper]]

innerRowTplFooterMenu kód bloku