Změna horního menu. Změna horní nabídky Rozbalovací nabídka na wayfinder modx

Začněme lekcí 8 MODx Revolution pro začátečníky. Dovolte mi připomenout, že děláme web pro studium 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 této lekci 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ž do své šablony umístíte volání Wayfinder, začne hledat zdroje, které splňují parametry v ní uvedené, a vrátí seznam odkazů na tyto zdroje ve formátu netříděného seznamu nebo ve formátu, který definujete.

Proč používat Wayfinder?

Wayfinder obvykle používám k vytváření dynamické navigace na webu, tedy menu. Od většiny HTML šablona Pokud k vytváření nabídek používáte neuspořádané seznamy, Wayfinder je pro tento účel perfektní nástroj. 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é nabídce, změnit adresy URL. Použitím úryvku Wayfinder k dynamickému generování vašich nabídek se těmto bolestem vyhnete, protože automaticky detekuje změny a odpovídajícím způsobem změní vaši nabídku.

Wayfinder je poměrně flexibilní nástroj a umožňuje vám určit, jaké zdroje zahrnout nebo vyloučit z nabídky, jaká je šablona nabídky, jak hluboká je nabídka vašeho webu. Limit vašich schopností je určen vaším HTML/CSS kódem.

Jak používat Wayfinder?

Jak jsme již 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 to minimum, které je potřeba definovat ve vlastnostech: kde ve stromu zdrojů by měl Wayfinder začít vytvářet seznam zdrojů. Proto při volání úryvku Wayfinderu musíte zadat alespoň jeden parametr – počáteční ID. Základní volání fragmentu Wayfinderu bude v tomto případě vypadat 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 které nemají zaškrtávací políčko Skrýt z nabídek.

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

Pojďme se podívat na šablonu a kód, který vystupuje toto menu:

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 dostaneme. 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 domovská stránka, mělo by to vypadat takto:

Fantastický! Můžete vidět, že naše předchozí menu, které mělo několik možností, 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. Cílem tohoto cvičení je vytvořit několik zdrojů, aby měl Wayfinder co zobrazovat.

Dokončil jsem vytváření stránek 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 všechny naše stránky se objevily v nabídce a kliknutím na každou položku nabídky se dostanete na odpovídající stránku. (Chcete-li tento prvek otestovat, přidejte na každou stránku nějaký text, například na stránku O aplikaci můžete přidat „Toto je stránka O aplikaci“ a tato zpráva se zobrazí, když stránku otevřete. Nezapomeňte, že pro každou stránku musíme definovat šablonu stránce, ale v tento moment Nebudu si s tím dělat starosti).

Špatná zpráva je, že formátování nabídky je nefunkční, ale můžeme to opravit. Klikněte klikněte pravým tlačítkem myši přejděte myší na webovou stránku a podívejte se zdroj(nebo k tomu použijte firebug), nyní 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. To je také jasné
  • 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 aktuální-stránka-položka, který není zastoupen 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

    Při pohledu na to, jak Wayfinder generuje kód, vyvstává velmi přirozená otázka: „Jak můžeme přidat 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ýstup. Některé obecné parametry umožňují určit, na jaké úrovni začít sestavovat menu, které položky do menu nezahrnout atd. Další možnosti jsou možnosti šablony, které vám umožňují specifikovat html kódšablonu pro vaše menu atd. Popis druhého lze nalézt v oficiální dokumentaci – http://rtfm.modx.com/display/ADDON/Wayfinder.

    Vzít na vědomí: Některé parametry Wayfinderu mají výchozí hodnoty.

    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 je všechny prozkoumali a procvičili si je co nejvíce, abyste pochopili všechny jejich schopnosti. Vzhledem k tomu, že výchozí nastavení Wayfinderu jsou jasně zdokumentována 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 pracovat na šabloně 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 ho dynamické prvky plniva(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áš externí ul kontejner.

      [[+wf.wrapper]]

    Vidíte, že jsem přidal třídu pro vnější ul. Alternativní způsob Chcete-li to provést, použijte zástupný symbol wf.classes a poté přidejte název třídy k aktuálnímu volání wayfinder pomocí parametru vnější třída. Ale pro jednoduchost použijme první metodu, ale obě 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.

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

      [[+wf.wrapper]]

    Nabídka 7v1InnerRow– bude obsahovat HTML kód pro řádky položek interní ú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 umístil do samostatné kategorie):

    Nyní můžeme změnit volání Wayfinderu, abychom mohli použít tyto mini šablony k výstupu Wayfinderu. Pokud se podíváte na seznam parametrů šablony (bylo by užitečné mít před sebou otevřený http://rtfm.modx.com/display/ADDON/Wayfinder nebo jej vytisknout a ponechat blízko obrazovky), uvidím, že jsem své kousky nazval 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í 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]

    Hodnoty parametrů jsou umístěny v apostrofech (`) spíše než v jednoduchých uvozovkách (').

    Skvělé, pojďme se na tuto výzvu podívat. Můžete vidět, že používáme volby šablony k volání našich chunků, aby Wayfinder vydával HTML, který potřebujeme, se správnými třídami. Definoval jsem volaného zdeTřída parametr a dal mu hodnotu aktuální_položka_stránky tak, aby odpovídal statické HTML šabloně. Můžete si všimnout, že jsem nechal parametry první třída A Poslední třída prázdný. Důvodem je, že moje šablona HTML nenastavuje třídu pro první a poslední bod menu, 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 spolu s Wayfinder pro vytváření vašich menu. V následujících lekcích se podíváme na komplexní nabídky a na to, jak je integrovat do Wayfinderu. Abychom to shrnuli: naše webové stránky již nabyly určité formy a máme funkční a dynamické menu.

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

    Vytvořte dynamické menu v MODX použijeme ú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. Nyní se podívejme na nejtypičtější volání menu.

    Zavolejte PdoMenu

    Možnost 1. Místo tohoto statického menu zavolejte fragment pdoMenu, za tímto účelem ve stromu prostředků na kartě „ Elementy” v sekci úryvky rozbalte vlákno pdoTools a poté klikněte na pdoMenu levé tlačítko myši (tlačítko neuvolňujte) a přetáhněte tento úryvek na místo, kde chcete nabídku vyvolat, poté vyplňte okno, které se otevře požadované parametry a stiskněte " Uložit«.

    Možnost 2. Hovor napíšeme ručně.

    Typické příklady

    Pravidelné 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 pro vyvolání nabídky:

    []

    • &parents=`0` - seznam rodičů (v mém případě neomezuji výběr, protože stejně vytisknu jen určité stránky);
    • &level=`1` — úroveň vnoření (v v tomto případě ona tam není);
    • &resources=`2,3,4,5` — seznam zdrojů, které je třeba zobrazit 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=`current-menu-item` — třída pro aktivní položku menu (nahrazeno li);
    • &rowClass=`menu-item` — třída jednoho řádku menu (nahrazeno li).

    Dvouúrovňové vlastní bootstrap menu

    Statický html kód vypadá takto:

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

` &tplInner=`@INLINE
    [[+wrapper]]
` &tplStart=`@INLINE [[+menutitle]][[+wrapper]]` ]]