Wielopoziomowe menu MODX wykorzystujące Bootstrap. PdoMenu - tworząc menu w MODX Wayfinder, nazwy pomiędzy zakresami nie są wyświetlane

Dom / Instalacja urządzenia

Ale to nie dla nas ;).

Zrobimy wszystko od podstaw. Dlaczego my (ja) tego potrzebowaliśmy, skoro istnieją już gotowe opcje? Bo tak mi się bardziej podoba. Ponieważ uważam, że takie podejście jest jak najbardziej prawidłowe. Bo wiedząc, jak opracować własny, możemy łatwo zrozumieć cudzy kod, zmienić go, naprawić błędy, czy uzupełnić go o niezbędną w konkretnym przypadku funkcjonalność. I w końcu tworzenie własnych jest często bardzo przyjemne!

W poniższej narracji założono, że czytelnik ma minimalną wiedzę na temat programowania w języku PHP. Teoretycznie osoby, które w ogóle nie rozumieją kodu, będą mogły skopiować kod i odtworzyć wszystkie działania, które zostaną omówione poniżej. Może jednak lepszym rozwiązaniem będzie dla nich skorzystanie z gotowych fragmentów a la Ditto, gdyż dostarczają one sporo możliwości zewnętrznej konfiguracji bez wchodzenia w główny kod.

Nie chcę tu dyskutować, co jest lepsze dla użytkownika – wziąć gotowy, czy opracować własny… Obydwa przypadki mają swoje wady i zalety. Dla mnie osobiście zalet tej drugiej opcji jest więcej. Także każdy czytelnik podejmie decyzję sam.

Przyjrzyjmy się więc jeszcze raz naszemu. Ponieważ na naszej stronie internetowej znajduje się sporo różnych części oprogramowania i musimy od czegoś zacząć, zaprogramujmy więc...

Górne menu

Pod pojęciem „górne menu” rozumiem zestaw linków do stron znajdujących się w górnej części witryny (patrz rysunek poniżej):

Pierwszy przykład tworzenia fragmentu opiszę bardzo szczegółowo; w przyszłości skupię się głównie na najistotniejszych szczegółach.

Porównajmy to z naszym drzewem witryn w systemie zarządzania, które zbudowaliśmy w poprzednim artykule:

Jak widać na rysunku, w drzewie witryny wyróżnione są cztery dokumenty (mianowicie „Blog”, „O autorach”, „Zdjęcia” i „ Informacja zwrotna"), które następnie utworzą linki w górnym menu.

Przypomnę też, że wcześniej ukryliśmy dokumenty, których nie chcemy pokazywać w menu. Przykładowo w ustawieniach dokumentu o nazwie „Wyszukiwanie w witrynie” usunęliśmy pole wyboru „Pokaż w menu”, a pozostałe dwa dokumenty „Linki” i „Kategorie” ukryliśmy na stronie odznaczając pole wyboru „Publikuj” w ustawienia dokumentu (zakładka „Ustawienia strony”) w ustawieniach dokumentu).

Dlatego w poprzednim artykule przygotowaliśmy menu górne w systemie sterowania.

Przejdźmy teraz do kwestii wyświetlania naszych działań bezpośrednio na stronie.

Większość programów znajdujących się w serwisie realizowana jest poprzez tzw. " ", tj. poszczególne fragmenty kodu (można je również rozumieć jako pojedyncze funkcje lub podprogramy) w PHP. Dlatego też, aby zaimplementować wyświetlanie górnego menu w MODx, musimy także stworzyć nowy fragment, zaprogramować go i dodać wywołanie tego fragmentu w szablonie w odpowiednim miejscu.

Przejdźmy do systemu zarządzania, otwórzmy zakładkę „Zasoby” -> „Zarządzanie zasobami” -> zakładkę „Snippets” i klikamy w link „Nowy fragment”. W polu „Nazwa fragmentu” wpisz „TopMenu” bez cudzysłowów i na razie po prostu zapisz pusty fragment bez kodu. Po zapisaniu, w zakładce „Snippets” zobaczymy nazwę naszego fragmentu.

Przypomnę, że w naszym szablonie górne menu umieściliśmy w kawałku „TOPMENU”. Przejdźmy do zakładki „Chunks” i otwórzmy fragment „ ”. W zawartości tego fragmentu zobaczymy następujący kod:


  • Blog

  • O autorach

  • Zdjęcia

  • Informacja zwrotna

Ten kod tworzy nasze menu. Skomentujmy to i dodajmy wywołanie fragmentu „TopMenu” we fragmencie:


[]

Tutaj znowu będziemy musieli zrobić małą dygresję, aby wyjaśnić znaczenie tej konstrukcji []. Faktem jest, że za pomocą konstrukcji takich jak [] lub [!SnippetName!] możemy wywoływać fragmenty w dowolnym miejscu w naszych szablonach, fragmentach, a nawet na dowolnej pojedynczej stronie witryny.

W tym przypadku konstrukcja [] oznacza wywołanie buforowane fragment, tj. wywołanie podprogramu dynamicznego, którego wynik zostanie obliczony i wykonany jednorazowo, a następnie przy ładowaniu strony, na której wywołany jest ten fragment, wynik pozostanie niezmieniony, ponieważ fragment nie jest już wywoływany ponownie. W ten sposób oszczędzamy zasoby na naszym serwerze WWW (a to zawsze jest bardzo ważne, gdy na zasobie panuje duży ruch).

Są jednak sytuacje, gdy trzeba za każdym razem ponownie wykonywać fragment kodu i nie można buforować wyników. W takich przypadkach używana jest konstrukcja [!SnippetName!], która zawsze wymusi wykonanie fragmentu kodu bez buforowania. Przez analogię ta konstrukcja nazywa się wezwaniem niebuforowalne skrawek.

Zapiszmy więc fragment „TOPMENU” i zaktualizujmy stronę witryny. Hmm, co dziwne, menu górne zniknęło. Ale czy to naprawdę jest takie zaskakujące? Komentując kod HTML menu we fragmencie, ukryliśmy jego wyświetlanie w przeglądarce (sprawdź to, patrząc na kod źródłowy Strony HTML). Ale nasz fragment „TopMenu” nic nie robi, ponieważ nic jeszcze do niego nie dodano. Poprawmy to niedociągnięcie :).

Wróćmy do zakładki „Snippets”, otwórz utworzony fragment „TopMenu” i spróbujmy przetestować jego możliwości... Cierpliwości, moi zaawansowani czytelnicy, nie każdy zna te szczegóły.

Najpierw napiszmy najprostszy kod (zwykły kod PHP):

echo "Testuję...";
?>

Przed zapisaniem wybierz „Kontynuuj edycję”, ponieważ będziemy musieli zmienić treść naszego fragmentu więcej niż raz, a potem zapiszemy fragment. Odświeżmy stronę serwisu i zobaczmy w miejscu górnego menu... cóż, szczerze mówiąc, na pierwszy rzut oka nie dostrzeżemy prawie żadnych zmian, poza lekko powiększonym niebieskim tłem menu. Naciśnijmy „CRTL+A”, aby zaznaczyć cały tekst na stronie witryny, a zobaczymy, że nasz fragment mimo wszystko wyświetla tekst „Testowanie…” zamiast menu, tylko kolor tekstu odpowiada kolorowi tła .

Zmieńmy fragment kodu na następujący:

echo” Testowanie...";
?>

Teraz wyraźnie widać, że nasz fragment działa i nawet (!) wyświetla jakiś tekst. Cóż, to świetnie, ale nie wystarczy do naszego zadania, ponieważ musimy zadbać o to, aby nasz fragment wyświetlał linki z systemu sterowania i dokładnie w tym samym kodzie HTML, który skomentowaliśmy w fragmencie „TOPMENU”.

I znowu mała odskocznia...

Cały system powiązań dokumentów w MODx zbudowany jest na zasadzie: każdy „dokument nadrzędny” zawiera od zera do wielu „dokumentów podrzędnych” („rodzic” -> „podrzędne”).

Każdy dokument w bazie MODx posiada swój unikalny identyfikator „ID” – jest to numer, który widzimy w nawiasach w drzewie serwisu obok każdego dokumentu.

Nawiasem mówiąc, ten unikalny identyfikator ma tylko jedno znaczenie - jednoznacznie identyfikuje konkretny dokument w systemie zarządzania i nic więcej! Szczególnie podkreślam ten fakt, ponieważ spotkałem się z wielokrotnymi próbami zmiany tych identyfikatorów w najróżniejszych celach... Trzeba od razu pamiętać, że jest to po prostu bezcelowe, więc nie próbuj zmieniać tych numerów. Nie należy w ogóle zwracać na nie szczególnej uwagi; zazwyczaj liczby te służą po prostu do generowania linków do określonych dokumentów.

Baza danych MODx tworzy także dla każdego dokumentu specjalne pole „rodzic”. Wartością tego pola jest liczba wskazująca albo unikalny identyfikator dokumentu nadrzędnego, albo, jeśli dokument znajduje się w korzeniu drzewa, zero. Dzięki temu zawsze można jednoznacznie określić, który dokument jest dokumentem nadrzędnym dla danego dokumentu.

Aby wyraźnie zobaczyć o czym właśnie rozmawialiśmy, otwórz phpMyAdmin, wybierz swoją bazę danych i znajdź tabelę (PREFIX)site_content, gdzie (PREFIX) to Twój prefiks wprowadzony podczas instalacji. Zobaczysz wiele pól przechowujących określone dane dokumentu, w tym „ID” – unikalny identyfikator, „rodzic” – numer dokumentu nadrzędnego, „tytuł strony” – tytuł strony i inne.

Korzystając więc z informacji o zasadzie przechowywania i łączenia dokumentów w MODx, możemy zrozumieć, jak uzyskać dane niezbędne do wyświetlenia linków do górnego menu: musimy znaleźć w bazie danych wszystkie dokumenty, które znajdują się w katalogu głównym witryny drzewo, tj. mieć wartość zero w polu „rodzic”.

Używanie Język SQL, podobne żądanie jest opisane mniej więcej tak (Możesz spróbować wpisać tę prośbę w polu wejściowym SQL w phpMyAdmin, po zastąpieniu „modx_” swoim prefiksem):

WYBIERAĆ *
Z `modx_site_content`
GDZIE „rodzic” = 0;

Jednak takie żądanie zwróci nam absolutnie wszystkie dokumenty z katalogu głównego witryny, co nie jest do końca poprawne, biorąc pod uwagę główne zadanie - wyświetlanie linków tylko do tych dokumentów, które mają:

  • status opublikowany (w bazie pozycja ta reprezentowana jest przez pole „opublikowany”, gdzie wartość = 1 oznacza, że ​​dokument jest opublikowany, a wartość = 0 oznacza niepublikowany).
  • nieusunięte (pole „usunięte”, gdzie 1 jest usuwane, a 0 nie jest usuwane),
  • i które mają ustawioną opcję „Pokaż w menu” (pole „ukryj menu”, gdzie 1 oznacza ukryj, a 0 oznacza pokaż w menu).

Dodatkowo patrząc trochę w przyszłość od razu posortujemy dokumenty po parametrze „Pozycja w menu”, który określi położenie każdego linku w naszym menu.

Cóż, z punktu widzenia SQL jest to całkowicie proste zadanie i można je rozwiązać w ten sposób:

WYBIERAĆ *
Z `modx_site_content`
GDZIE „opublikowano” = 1
ORAZ „rodzic” = 0
ORAZ „usunięte” = 0
ORAZ „ukryjmenu” = 0
ZAMÓW PRZEZ `menuindex` ASC;

Teoretycznie wszystkie zapytania SQL można wykonać we fragmentach bezpośrednio za pomocą Skrypty PHP, za każdym razem łącząc bazę danych na nowo i wykonując wiele innych rutynowych operacji, powtarzając je w kółko... Ale, widzisz, to zaprzeczałoby celowi używania frameworka, którym z pewnością jest nasz system zarządzania, ponieważ MODx, wśród innych zalet, zapewnia gotowy zestaw fundusze interfejs oprogramowania(API, interfejs programowania aplikacji). API to funkcje oprogramowania, które ujednolicają i ułatwiają wiele procesów przetwarzania danych.

Wykorzystajmy w naszym fragmencie jedną z wymienionych funkcji API „getDocumentChildren”. Funkcja „getDocumentChildren” jako parametry otrzymuje następujące dane:

  • $id - numer dokumentu nadrzędnego,
  • $active - wybierz tylko dokumenty opublikowane lub niepublikowane (odpowiednio 1 lub 0),
  • $usunięte - zaznacz tylko dokumenty usunięte lub nieusunięte (1 | 0),
  • $pola - pola wybrane z bazy danych,
  • $where - warunki specjalne, tj. GDZIE warunek w Zapytanie SQL,
  • $sort - pole, według którego mają zostać posortowane wyniki
  • $kierunek - kierunek sortowania, może przyjmować wartości ASC lub DESC, tj. sortuj od najmniejszej do największej wartości i odwrotnie
  • $limit - limit żądań, tj. Warunek LIMIT w zapytaniu SQL

$results = $modx->getDocumentChildren(
$id = 0,
$aktywny = 1,
$usunięty = 0,
$gdzie = "ukrytemenu = 0",
$sort="indeks menu",
$katalog="ASC",
$limit
);

Wydrukować("

Foreach($wyniki jako $klucz => $wartość) (
print_r($wartość);
}

Wydrukować("");
?>

Zapisz fragment i odśwież stronę. W wyniku wykonania zaktualizowanego fragmentu „TopMenu” zobaczysz listę tablic wraz z ich wartościami, posortowaną według wartości pola „menuindex” od najmniejszej do największej. Spróbuj zmienić parametr $dir="ASC" na $dir="DESC" - w rezultacie tablice zostaną przebudowane i dokument z największą wartością pola "menuindex" zostanie wyświetlony jako pierwszy dokument.

Doświadczeni programiści zapewne rozumieją, że uzyskany wynik zapewnia już wszystko, czego potrzeba do zbudowania gotowego menu z linkami. No prawie wszystko. W każdym razie będę kontynuował: przepiszmy kod PHP, aby maksymalnie zbliżyć się do pożądanego rezultatu.

$results = $modx->getDocumentChildren(
$id = 0,
$aktywny = 1,
$usunięty = 0,
"id, tytuł strony, opublikowany, indeks menu, usunięty, ukryj menu, tytuł menu",
$gdzie = "ukrytemenu = 0",
$sort="indeks menu",
$katalog="ASC",
$limit
);

$przedmioty = "";
$wyjście = "";

Foreach($wyniki jako $klucz => $wartość) (
$przedmioty.= "


  • „.$wartość[„tytuł strony”].”
    • \N";
    }

    Jeśli ($przedmioty != "") (
    $wyjście = "

      \N";
      $wyjście .= $przedmioty;
      $wyjście.= "
    \N";
    }

    Zwróć $wyjście;

    Nie będziemy szczegółowo analizować kodu, ponieważ jest to najzwyklejszy kod PHP, nic więcej. Jeżeli ktoś nie rozumie znaczenia jakiejś konstrukcji, proszę o pozostawienie komentarza, a jeszcze lepiej o udanie się na odpowiednie fora wsparcia.

    Zapiszmy nowy fragment kodu i odświeżmy stronę. W wyniku wykonania kodu zobaczymy prawie to, co chcieliśmy uzyskać:

    Te. Są to już automatycznie wygenerowane linki, których struktura całkowicie powtarza strukturę dokumentów w drzewie MODx. Aby to przetestować, spróbuj utworzyć dokument testowy w katalogu głównym witryny i odśwież stronę.

    Jednak to nie wszystko. Wielu pewnie już zauważyło, że są linki, ale linków nie ma... Paradoks :). Chodzi mi o to, że w menu wyświetlają się nazwy dokumentów, ale linki do nich nie działają. Jest to logiczne, ponieważ na razie kod łącza wyświetla „#” zamiast rzeczywistych ścieżek.

    Aby rozwiązać ten problem, musisz poznać kolejną niezwykle przydatną funkcję MODx: adres dowolnej wewnętrznej strony serwisu można uzyskać za pomocą następującej konstrukcji [~id~], gdzie id to unikalny numer wymagany dokument, tj. ten sam numer wskazany w nawiasach obok nazwy każdego dokumentu w drzewie serwisu. Zatem dodając taką konstrukcję [~1~] do treści szablonu/fragmentu/strony,

      • indeks – alias dokumentu „Blog”, jeśli jako alias dokumentu wprowadziliśmy „indeks”, lub
      • 1.html, jeśli nie wpisaliśmy nic w polu „Pseudonim” dla dokumentu „Blog”.
    • jeśli przyjazne linki są wyłączone, zobaczymy tekst indeks.php?id=1

    Przepiszmy fragment, korzystając z tych informacji:

    $results = $modx->getDocumentChildren(
    $id = 0,
    $aktywny = 1,
    $usunięty = 0,
    "id, tytuł strony, opublikowany, indeks menu, usunięty, ukryj menu, tytuł menu",
    $gdzie = "ukrytemenu = 0",
    $sort="indeks menu",
    $katalog="ASC",
    $limit
    );

    $przedmioty = "";
    $wyjście = "";

    Foreach($wyniki jako $klucz => $wartość) (
    $przedmioty.= "


  • „.$wartość[„tytuł strony”].”
    • \N";
    }

    Jeśli ($przedmioty != "") (
    $wyjście = "

      \N";
      $wyjście .= $przedmioty;
      $wyjście.= "
    \N";
    }

    Zwróć $wyjście;

    Zmieniliśmy więc # na [~".$wartość["id"].."~], tj. w rzeczywistości dla każdego dokumentu z tablicy jego unikalny identyfikator jest wstawiany wewnątrz konstrukcji [~id~]. W rezultacie otrzymujemy menu z działającymi linkami.

    Już prawie osiągnęliśmy ideał... Jednak nawet teraz pozostaje jeszcze jeden szczegół, na który trzeba zwrócić uwagę: projektant ustalił, że nasze aktywne łącze powinno być podświetlone białym tłem i odpowiednio zmienić kolor łącza na pomarańczowy.

    Aby to osiągnąć, ponownie zdradzimy tajemnice MODx CMS :). W API ukryta jest funkcja $modx->documentIdentifier, która zwraca wartość unikalnego identyfikatora bieżącej strony. Będziemy go potrzebować do ustalenia aktywnej strony i podświetlenia jej w menu:

    $results = $modx->getDocumentChildren (
    $id = 0,
    $aktywny = 1,
    $usunięty = 0,
    "id, tytuł strony, opublikowany, indeks menu, usunięty, ukryj menu, tytuł menu",
    $gdzie = "ukrytemenu = 0",
    $sort="indeks menu",
    $katalog="ASC",
    $limit
    );

    $cid = $modx->identyfikator dokumentu;

    $przedmioty = "";
    $wyjście = "";

    Foreach($wyniki jako $klucz => $wartość) (
    if ($wartość["id"] == $cid) (
    $aktywny = " id=\"aktywny\"";
    }
    w przeciwnym razie(
    $aktywny = "";
    }
    $przedmioty.= "
    „.$wartość[„tytuł strony”].”
    \N";
    }

    Jeśli ($przedmioty != "") (
    $wyjście = "

      \N";
      $wyjście .= $przedmioty;
      $wyjście.= "
    \N";
    }

    Zwróć $wyjście;

    No i jak wyszło? To zadziałało!

    Ale nie myślałeś, że to wszystko się na tym skończy, prawda? I słusznie. Stawiamy sobie najwyższą poprzeczkę, chcemy wykorzystać maksymalne możliwości MODx. Dlatego jest jeszcze jeden mały szczegół, który przeoczyliśmy.

    Przyjrzyjmy się bliżej nazwom pól, o które prosimy za pomocą funkcji getDocumentChildren: „id, tytuł strony, opublikowane, menuindex, usunięte, hidemenu, menutitle”. Wśród nich znajduje się takie pole jak „menutitle”. Jak sama nazwa wskazuje, w tym polu można przechowywać tytuł menu. System sterowania posiada także pole wejściowe „Pozycja menu”. To pole jest opcjonalne. Logika jest jednak taka, że ​​jeśli to pole zostanie wypełnione, to tekst linku w menu musimy zastąpić tym, który wprowadzi użytkownik. Cóż, zróbmy to:

    /********************************
    Nazwa: Menu główne
    Cel: Wyświetlenie górnego menu
    Projekt: Strona demonstracyjna MODx
    ********************************/

    $results = $modx->getDocumentChildren(
    $id = 0, // Identyfikator dokumentu nadrzędnego
    $active = 1, // Wybierz tylko opublikowane dokumenty
    $deleted = 0, // Wybierz tylko nieusunięte dokumenty
    "id, tytuł strony, opublikowany, menuindex, usunięty, ukryj menu, tytuł menu", // Wybierz pola z bazy danych
    $where = "hidemenu = 0", // Wybierz tylko te dokumenty, które mają zostać opublikowane w menu
    $sort="menuindex", // Sortuj dokumenty według pola menuindex
    $dir="ASC", // Sortuj dokumenty w kolejności rosnącej
    $limit = "" // Nie stawiamy ograniczeń (parametr LIMIT w zapytaniu SQL)
    );

    $cid = $modx->identyfikator dokumentu; //pobierz identyfikator bieżącej strony

    $przedmioty = "";
    $wyjście = "";

    Foreach($wyniki jako $klucz => $wartość) (
    if ($wartość["id"] == $cid) (
    $aktywny = " id=\"aktywny\"";
    }
    w przeciwnym razie(
    $aktywny = "";
    }
    if ($wartość["tytuł menu"] != "") (
    $tytuł = $wartość["tytuł menu"];
    }
    w przeciwnym razie(
    $tytuł = $wartość["tytuł strony"];
    }
    $przedmioty.= "
    „.$tytuł.”
    \n"; //zbierz pozycje menu
    }

    // Jeśli udało nam się znaleźć przynajmniej jeden pozycja menu,
    // utwórz kod menu HTML
    if ($elementy != "") (
    $wyjście = "

      \N";
      $wyjście .= $przedmioty;
      $wyjście.= "
    \N";
    }

    // Zwraca wynik fragmentu
    zwróć $wyjście;

    Teraz spróbuj wpisać tekst w polu wejściowym „Element menu” dowolnego dokumentu... Czy wszystko działa? Niesamowity!

    P.S.: Niektórzy czytelnicy mogą być zaskoczeni, że podążając za linkami w naszym menu, zawartość stron się nie zmienia, chociaż wydaje się, że sądząc po ścieżce w adresie przeglądarki, przenosimy się na nowe strony... Uwierz dla mnie jest to całkowicie normalne, ponieważ Absolutnie wszystkie strony używają obecnie tego samego szablonu. W tym szablonie do tej pory zdynamizowaliśmy jedynie górne menu; wszystkie pozostałe szczegóły pozostały niezmienione. Na pewno zajmiemy się tym później, ale na razie - nie panikuj ;).

    Wniosek:

    Tak więc kolejny artykuł doszedł do logicznego wniosku.

    Wyniki szkolenia:

    • Próbowaliśmy zrozumieć cel niektórych pól wejściowych w dokumentach MODx i przyjrzeliśmy się przechowywaniu tych informacji w bazie danych;
    • Dowiedzieliśmy się o nowych specjalnych projektach MODx: [], [!SnippetName!], [~id~];
    • Dowiedzieliśmy się o dostępności specjalnego API i skorzystaliśmy z niektórych funkcji API;
    • I bazując na tej wiedzy stworzyliśmy nasz nowy fragment w MODx!

    Zacznijmy od lekcji 8 MODx Revolution dla początkujących. Przypomnę, że tworzymy stronę internetową do nauki MODx Revolution. Na ostatniej lekcji przyjrzeliśmy się pojęciu fragmentów kodu, czyli fragmentów kodu PHP, które pozwalają nam dodawać funkcjonalności do naszej witryny internetowej. W tej lekcji przyjrzymy się specjalnemu fragmentowi - Wayfinderowi i wykorzystamy go do stworzenia dynamicznego menu dla naszej witryny.

    Co to jest Wayfinder?

    Znalezisko to fragment wyświetlający nieposortowaną listę łączy do zasobów w drzewie witryny. Typ wyniku listy zależy od wywołania fragmentu i parametrów tego wywołania. Ogólnie rzecz biorąc, oznacza to, że gdy umieścisz w swoim szablonie wywołanie Wayfinder, rozpocznie ono wyszukiwanie zasobów spełniających określone w nim parametry i zwróci listę linków do tych zasobów w formacie listy nieposortowanej lub w formacie zdefiniowanym przez Ciebie.

    Dlaczego warto korzystać z Wayfindera?

    Zwykle używam Wayfindera do tworzenia dynamicznej nawigacji stron internetowych, czyli menu. Od większości Szablon HTML ov używaj nieuporządkowanych list do tworzenia menu, a Wayfinder jest idealne narzędzie do tych celów. Tworząc witrynę, możesz starannie wstawić adresy URL do menu nawigacyjnego, tak jak robiłeś to wcześniej w statycznej witrynie HTML. Jednocześnie za każdym razem, gdy chcesz usunąć lub utworzyć stronę, musisz wprowadzić odpowiednie zmiany w swoim menu, zmienić adresy URL. Użycie fragmentu Wayfindera do dynamicznego generowania menu pozwala uniknąć tego bólu głowy, ponieważ automatycznie wykrywa zmiany i odpowiednio zmienia menu.

    Wayfinder jest dość elastycznym narzędziem i pozwala określić, jakie zasoby uwzględnić lub wykluczyć z menu, jaki jest szablon menu, jak głębokie jest menu Twojej witryny. Granicę Twoich możliwości wyznacza Twój kod HTML/CSS.

    Jak korzystać z Wayfindera?

    Jak już wspomnieliśmy w poprzedniej lekcji, składnia wywoływania fragmentów wygląda następująco: [[!somesnippet]]

    To tylko podstawowe wywołanie i to nie wystarczy, poza tym musimy zdefiniować pewne właściwości tego wywołania. W przypadku Wayfindera minimum, które należy zdefiniować we właściwościach, to miejsce w drzewie zasobów, w którym Wayfinder powinien rozpocząć tworzenie listy zasobów. Zatem wywołując fragment kodu Wayfindera, należy podać przynajmniej jeden parametr – początkowy identyfikator. Podstawowe wywołanie fragmentu Wayfindera w tym przypadku będzie wyglądać następująco:

    To wywołanie mówi Wayfinderowi, aby zaczął od korzenia drzewa ( ID 0 oznacza katalog główny witryny) i pokazuje wszystkie opublikowane zasoby, które nie mają zaznaczenia w polu wyboru Ukryj w menu.

    Jeśli spojrzymy na szablon, którego używamy, zobaczymy górne menu z kilkoma opcjami i listami rozwijanymi.

    Przyjrzyjmy się szablonowi i wynikowemu kodowi to menu:

    Jak widać, jest to zagnieżdżona lista nieuporządkowana. Zastąpmy ten kod podstawowym wywołaniem Wayfindera i zobaczmy, co otrzymamy. Usuń powyższy kod i wklej w jego miejsce:

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

    Jeśli używasz tego samego szablonu co ja, Twój kod będzie wyglądał mniej więcej tak:

    Zapisz szablon i spójrz strona główna, powinno to wyglądać tak:

    Fantastyczny! Jak widać, nasze poprzednie menu, które posiadało kilka opcji, zostało teraz zastąpione prostym menu z tylko jedną pozycją – Strona główna. To mówi nam, że Wayfinder działa tak, jak powinien i pobiera jedną stronę z naszej witryny i wyświetla jej tytuł jako pozycję menu.

    Stwórzmy jeszcze kilka zasobów. Zamierzam dodać stronę Informacje z 3 stronami podrzędnymi (MODx, Poradniki, Strony Kontaktowe i FAQ). Możesz utworzyć dowolne zasoby lub strony dla swojej witryny. Celem tego ćwiczenia jest utworzenie kilku zasobów, aby Wayfinder miał coś do wyświetlenia.

    Skończyłem tworzenie stron i drzewo zasobów mojej witryny wygląda następująco:

    Mamy teraz kilka stron, zobaczmy jak wywołanie Wayfindera wygeneruje menu dla naszej witryny:

    Dobra wiadomość jest taka, że ​​wszystkie nasze strony pojawiły się w menu i klikając każdą pozycję menu zostajemy przeniesieni na odpowiednią stronę. (Aby przetestować ten element, dodaj trochę tekstu do każdej strony, na przykład na stronie Informacje możesz dodać „To jest strona Informacje”, a ten komunikat pojawi się po otwarciu strony. Pamiętaj, że musimy zdefiniować szablon dla każdej stronę, ale w w tej chwili nie mam zamiaru się tym przejmować).

    Zła wiadomość jest taka, że ​​formatowanie menu jest zepsute, ale możemy to naprawić. Trzask kliknij prawym przyciskiem myszy najedź kursorem na stronę internetową i spójrz na kod źródłowy (lub użyj do tego Firebuga), teraz to zobaczysz Znalezisko generuje HTML w następujący sposób:

    • Dom
    • O
      • MODxCMS
      • Pad kodujący
        • Blog
        • Siły zbrojne
    • Skontaktuj się z nami
    • Poradniki
    • Często zadawane pytania

    Jak widać, wygląda to bardzo podobnie do naszego początkowego kodu statycznego, z kilkoma wyjątkami. Najpierw wygenerowano Wayfinder

    Wybór redaktora

    © 2024 ermake.ru - O naprawie komputerów PC - Portal informacyjny