MODx Revolution dla początkujących Część 6 - Praca ze zmiennymi szablonów

Witamy w części 6 serii MODx Revolution for Complete Beginners. W ostatniej części zbadaliśmy koncepcję kawałków. Stworzyliśmy wiele kawałków i nauczyliśmy się, jak używać ich do organizowania naszego szablonu. Wspomnieliśmy również o kilku innych zastosowaniach kawałków i poznaliśmy ich składnię znaczników oraz sposób wywoływania ich w szablonie. W tej części omówimy jedną z ciekawszych funkcji MODx - Zmienne szablonowe (telewizory) .

Dogonić:

Część 1: Wprowadzenie
Część 2: Instalacja
Część 3: Podstawowa konfiguracja i instalowanie dodatków
Część 4: Praca z szablonami
Część 5: Praca z kawałkami

Podczas pracy nad tą serią budujemy strona zasobów do nauki MODx Revolution . W ostatnich kilku ratach rozpoczęliśmy proces przenoszenia szablon które uzyskaliśmy z Themeforest na naszej stronie MODx iw ten sposób poznaliśmy podstawy pracy z szablonami i kawałkami. Nasza strona do tej pory wygląda całkiem nieźle, ale nadal jest to sztuczna strona w tym sensie, że żadna z jej treści nie jest naszą zawartością, a żadna z nich nie należy do strony internetowej, ale raczej jest osadzona w szablonie.

W dzisiejszej odsłonie rozpoczniemy proces zastępowania tej fałszywej zawartości statycznej dynamiczną treścią, która wychodzi z naszych stron internetowych, a nie z szablonu.

Praca z zawartością w MODx Revolution

Jeśli spojrzymy na obszar zawartości naszego szablonu strony internetowej, zobaczymy trzy regiony, które mają wyraźnie oddzielną zawartość.

Moim celem jest, aby pod koniec tej części zastąpić zawartość w tych trzech regionach treścią, którą wprowadzamy na stronie głównej w karcie zasobów, a nie treścią statycznie osadzoną w szablonie. W tym procesie zaczniemy uczyć się podstaw zmiennych szablonu, więc zanurkujmy w 🙂

Tworzenie treści w MODx Revolution

Zacznijmy od przyjrzenia się podstawowemu zasobowi w MODx Revolution. Jeśli przejdziesz do karty zasobów i otworzysz zasób Home do edycji, pojawi się kilka pól. W skrócie przyjrzeliśmy się temu w części 4, kiedy przypisaliśmy zasób domowy szablonowi. Spójrzmy na to ponownie (pamiętaj, że możesz kliknąć obraz, aby uzyskać większy widok):

Jak widać z tego obrazu, domyślnie masz do dyspozycji kilka wbudowanych pól. W zakładce Ustawienia dostępnych jest również więcej pól:

Każde pole ma podpowiedź, która mówi, co to jest znacznik szablonu, oraz krótki opis (dla większości z nich) pola. Możesz zobaczyć te wskazówki, unosząc się krótko nad polem:

Możesz wypełnić wszystkie te pola za każdym razem, gdy utworzysz nowy zasób lub tylko niektóre z nich, w zależności od potrzeb. Następnie możesz uzyskać dostęp do wypełnionych pól za pomocą odpowiedniego tagu szablonu. Na przykład można użyć pola opisu do opisów meta, a następnie wywołać to pole w znaczniku opisu meta w nagłówku szablonu i tak dalej. Zobaczysz, że pole tytułu menu jest ważne, gdy zaczynamy pracować z Wayfinder do tworzenia nawigacji w witrynie (wkrótce 🙂)

Jak widać, domyślny zasób zapewnia nam jedno główne pole treści.

Rozsądnie jest wywnioskować, że w tym miejscu my lub edytor stron internetowych wpisujemy główną treść, którą chcą wyświetlać w witrynie. Dostęp do treści tu wpisanych uzyskujemy za pomocą tagu [[* content]] . Na prostej stronie z jednym głównym obszarem treści byłoby to proste. Na przykład, jeśli spojrzymy na stronę Informacje, która pochodzi z szablonu, z którym pracujemy, widzimy, że istnieje tylko jeden główny obszar treści:

Teraz, w przypadku naszego szablonu strony głównej, możemy wybrać kodowanie tych trzech obszarów w obszarze zawartości, kopiując kod HTML do naszego zasobu. Jednak dla mnie bardziej sensowne jest uczynienie tych trzech obszarów niezależnymi, ponieważ każdy z nich ma swój własny obszar treści. Osiągamy to za pomocą zmiennych szablonu.

Czym są zmienne szablonowe (telewizory)?

Zmienne szablonowe to po prostu niestandardowe pola, które dodajesz do szablonu. Są one specyficzne dla szablonu, do którego są przypisane, i nie zostaną zastosowane do innych szablonów, chyba że zostaną przypisane do tych szablonów. Pozwalają one na dużą elastyczność i wykraczają poza dostarczone pola w zasobie domyślnym.

Zmienne szablonowe , ponieważ są po prostu polami dodawanymi do zasobu, mają taką samą składnię znaczników jak pola domyślne: [[* TVName]] .

Telewizory mają wejścia i wyjścia, które wykraczają poza proste pola tekstowe. Mogą to być obszary tekstu sformatowanego, pola obrazów, pola adresu URL, pola daty itp. Można nawet tworzyć niestandardowe typy telewizorów. Ale nie dajmy się wyprzedzić. Dotykamy tylko podstawowych informacji w tym poście i zachęcam do zapoznania się z telewizorami w linkach na końcu tego postu. W przyszłych samouczkach zbadamy więcej na temat telewizorów, ponieważ są one dość mocne i elastyczne, ale na razie zagrajmy w podstawach.

Najlepszym sposobem na nauczenie się oczywiście są ręce.

Zamierzamy użyć głównego pola zawartości zasobu dla obszaru 1 w naszym szablonie (zobacz pierwszy rysunek w tej części). Następnie stworzymy dwa telewizory dla pozostałych dwóch obszarów treści 2 i 3. Najpierw zapełnijmy region 1 treścią, abyśmy mogli śledzić, co robimy.

Dla odniesienia są to ponownie regiony:

Otwórz szablon do edycji i przewiń w dół, aby dowiedzieć się, gdzie pojawia się kod i treść w regionie 1. W tym celu możesz również użyć Firebug. W moim przypadku wygląda to mniej więcej tak:

<div class = "special widget_text"> <div class = "sp_title_m"> <div class = "sp_title_l"> <div class = "sp_title_r"> <h3 class = "special_title"> Funkcje motywu </h3> </ div > </div> </div> <div class = "textwidget"> <p> <span class = "dropcap"> S </span> earch Engine Optimization stało się priorytetem przy projektowaniu <em> sukcesu biznesowego < / em> motyw. W hierarchii kodu główny blok treści jest umieszczany przed paskiem bocznym, niezależnie od pozycji paska bocznego, więc jest najpierw przeszukiwany przez wyszukiwarki. </p> <div style = "float: left; width: 50%;"> < ul class = "list-2"> <li> SEO Friendly </li> <li> Łatwe dostosowywanie </li> <li> Style typografii </li> <li> Lewe / prawe paski boczne </li> </ ul> </div> <div style = "float: left; width: 50%;"> <ul class = "list-2"> <li> Układ 2D lub 3D </li> <li> Dyskretne menu </ li> <li> PSD dla wszystkich 7 stylów </li> <li> Obsługa wielu przeglądarek </li> </ul> </div> <div class = "clear"> </div> </div> </ div>

Jeśli teraz to edytuję, aby móc zastąpić zawartość statyczną tagiem treści, mój kod będzie wyglądał następująco:

<div class = "special widget_text"> <div class = "sp_title_m"> <div class = "sp_title_l"> <div class = "sp_title_r"> <h3 class = "special_title"> Funkcje motywu </h3> </ div > </div> </div> <div class = "textwidget"> [[* treść]] </div> </div>

A teraz moja strona wygląda tak:

Teraz możesz zobaczyć, że region 1 jest pusty. Dzieje się tak, ponieważ w polu Zawartość zasobu domowego nie ma żadnych treści. Więc włóżmy tam trochę treści. Otwórz zasób Home w celu edycji i dodaj wybrane treści:

Zapisz zasób domowy, a następnie przejrzyj naszą witrynę. Tekst wprowadzony w głównym polu zasobów pojawia się teraz w obszarze zawartości regionu 1.

OK, więc mamy teraz sortowany region 1. Przejdźmy do regionów 2 i 3. Chcemy, aby były to również dynamiczne obszary treści edytowalnych. W tym celu musimy utworzyć dwie nowe zmienne szablonu, które mają pole wprowadzania tekstu w formacie RTF.

Tworzenie zmiennych szablonu w MODx Revolution

Aby utworzyć zmienną szablonu, przejdź do karty Elementy i kliknij prawym przyciskiem myszy Zmienne szablonu, aby utworzyć nowy telewizor. Możesz także kliknąć ikonę skrótu Nowa telewizja.

Na ekranie tworzenia zmiennej szablonu znajduje się kilka kart, w których można wprowadzać informacje o nowym telewizorze. Na karcie Informacje ogólne wprowadź nazwę telewizora oraz podpis. Spróbuj nazwać telewizory w dowolny sposób, który pozwoli Ci zapamiętać, do czego służą. Podpis jest ważny, ponieważ pomoże przewodnikowi / twórcy treści wiedzieć, co reprezentuje każde pole.

Możesz także dodać opis, jeśli chcesz.

Na razie możemy pominąć zakładkę Właściwości , ponieważ nie omówiliśmy jeszcze zestawów właściwości i obecnie ich nie potrzebujemy.

Następnie przechodzimy do karty Opcje wprowadzania . Ponieważ chcemy, aby edytor treści witryny mógł korzystać z edytora tekstu sformatowanego podczas wprowadzania treści w tym polu, określamy, że chcemy, aby typem wejścia był tekst sformatowany.

Następnie przechodzimy do zakładki Opcje wyjściowe i na razie możemy to zostawić bez zmian. Jeśli jednak klikniesz opcje rozwijane, zobaczysz kilka opcji (takich jak Date, String, HTML, itp.), Które dadzą Ci pomysły, w jaki sposób możesz to wykorzystać. W przyszłości będziemy mieli okazję zbadać inne opcje wyjścia, ale na razie pozostawmy je jako domyślne.

Jak już wspomniałem, istnieją inne typy danych wejściowych i wyjściowych, które będziemy eksplorować, gdy będziemy kontynuować, i możesz je przeczytać w linkach podanych na końcu tego posta.

Następnym krokiem jest określenie, które szablony mają mieć dostęp do tego telewizora. Jak wspomniano powyżej, telewizory są specyficzne dla szablonu. Aby to ustawić, przejdź do karty Dostęp do szablonów i upewnij się, że wybrałeś szablon z podanej listy, a następnie kliknij Zapisz . W moim przypadku:

Istnieją dwie inne karty, których nie widzieliśmy na tym ekranie, a mianowicie Uprawnienia dostępu i Źródła mediów . Na tym etapie naszej nauki nie musimy się o nie martwić, ale powrócimy do nich później, kiedy będziemy musieli.

Jeśli teraz wrócimy i otworzymy zasób Home do edycji, zauważymy, że mamy teraz nową kartę, a mianowicie kartę Zmienne szablonu . Jeśli zwrócimy uwagę na tę kartę, zobaczymy, że nasze nowe pole tekstu bogatego pojawia się teraz wraz z podpisem, oprócz głównego pola treści, które domyślnie pojawia się.

Możemy teraz dodać trochę treści do naszego nowego pola. W ten sam sposób możemy przejść dalej i utworzyć inną zmienną szablonu dla regionu 3.

Powielanie zmiennych szablonu

WSKAZÓWKA: Jeśli wiesz, że nowy telewizor, który zamierzasz utworzyć, będzie bardzo podobny do tego, który już masz na liście, możesz skrócić ten proces, używając opcji Powiel TV, zamiast tworzyć nowy telewizor.

Tak jest w moim przypadku, ponieważ region 2 i 3 są dość podobne. Po prostu kliknij prawym przyciskiem myszy telewizor, który chcesz powielić, i wybierz Powiel TV:

Na wyświetlonym ekranie wyskakującym zmień nazwę nowego telewizora i wybierz opcję powielania wartości. Twój nowy telewizor będzie miał taki sam dostęp do szablonu, podpis, typ wejścia, typ wyjścia itp. Jak oryginalny. Powinieneś przejść do nowego telewizora i edytować podpis, aby był odpowiedni dla nowego telewizora, a także edytować wszystko, co musisz edytować.

Więc teraz, jeśli otworzę zasób Home do edycji i ponownie przejdę do karty Zmienne szablonu , widzę teraz, że mam dwa dodatkowe bogate obszary treści, jak również domyślne pole zawartości.

Teraz, kiedy mamy już te dwa regiony (i do edytora treści naszej strony), wciągnijmy je do szablonu, aby ich zawartość mogła być dynamicznie analizowana na naszej stronie głównej.

Musimy otworzyć szablon i poszukać kodu i treści w regionach 2 i 3, abyśmy wiedzieli, co zastąpić naszymi tagami szablonów (ponownie możemy użyć do tego firebug). W moim przypadku mam:

<div class = "cont_col_1 widget_text"> <h3 class = "cont_col_1_title"> B. Motyw powodzenia </h3> <div class = "textwidget"> Będziesz mógł wybrać spośród 28 różnych efektów przejścia dla suwaka nagłówka. Ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Aenean massa. Cum sociis natoque penatibus et magnis. <img style = "padding-top: 10px;" src = "assets / templates / 7in1 / sample-data / b_success_logo_btn.png" width = "200" height = "92" alt = "b-success-logo" /> </div> </div> </div> <! - end cont_col_1 -> <div id = "cont_col_2" class = "column_1_of_4"> <div class = "cont_col_2 widget_text"> <h3 class = "cont_col_2_title"> WordPress Rocks </h3> <div class = " textwidget "> Będziesz mógł wybrać spośród 28 różnych efektów przejścia dla suwaka nagłówka. Ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Aenean massa. Cum sociis natoque penatibus et magnis. <img style = "padding-top: 10px;" src = "assets / templates / 7in1 / sample-data / wp_logo_btn.png" width = "200" height = "92" alt = "b-wp-logo" /> </div> </div> </div> <! - koniec cont_col_2 ->

które edytuję, aby stać się:

<div class = "cont_col_1 widget_text"> <h3 class = "cont_col_1_title"> B. Temat sukcesu </h3> <div class = "textwidget"> [[* home7in1_home_contentregion2]] </div> </div> </div> <! - end cont_col_1 -> <div id = "cont_col_2" class = "column_1_of_4"> <div class = "cont_col_2 widget_text"> <h3 class = "cont_col_2_title"> MODx Rocks </h3> <div class = "textwidget"> [[* home7in1_home_contentregion3]] </div> </div> < / div> <! - koniec cont_col_2 ->

Jeśli teraz zobaczymy naszą stronę główną, powinniśmy zobaczyć, że trzy regiony, które rozpoczęły się od statycznej zawartości obojętnej, która została osadzona w szablonie, teraz dynamicznie pobierają treść z naszych trzech pól zawartości, z których dwa są nowymi telewizorami, które stworzyliśmy .

Dla uproszczenia nie przejmowałem się kolumnami w pierwszym regionie ani obrazami w drugim i trzecim regionie ani niektórymi specjalnymi klasami formatowania. Możesz to sprawdzić, przeglądając kod szablonu i dodając odpowiedni kod i dodając obrazy do obszarów zawartości za pomocą edytora tekstu sformatowanego.

Nie ma limitu liczby telewizorów, które można dodać do szablonu. Prawdopodobnie pójdę o krok dalej i dodam jeszcze trzy telewizory, po jednym dla każdego regionu, aby tytuły Funkcje motywu, Motyw powodzenia i Skały MODx nie były statyczne, ale można je wprowadzić z karty Zmienne szablonu. Mogłem też zdecydować się na użycie jednego z istniejących pól, np. Długi tytuł, dla jednego z tytułów. To naprawdę zależy od Ciebie i tego, jak chcesz pracować ze swoim szablonem.

Telewizory są oczywiście o wiele więcej niż tutaj omówione, to tylko podstawowe zasady. Zachęcam do zapoznania się z nimi, poznania ich różnych typów danych wejściowych i wyjściowych, przeczytania o niestandardowych typach telewizorów i eksperymentowania. Będziemy uruchamiać więcej i ponownie korzystać z telewizorów, gdy będziemy kontynuować naszą serię MODx, więc bądź na bieżąco i eksperymentuj 🙂

Co dalej?

Teraz, gdy w naszym szablonie zaczynają działać dynamiczne zmiany i dobrze się układamy z naszą budową strony, myślę, że nadszedł czas, aby dodać kilka funkcjonalnych elementów. W MODx dodajemy funkcjonalność do naszej strony za pomocą fragmentów. W następnej odsłonie zaczniemy przeglądać fragmenty i kontynuować tworzenie naszej strony rock and roll 🙂

Czekam na Wasze komentarze, pytania, opinie itp. 🙂

Więcej czytania

Zmienne szablonowe
Typy zmiennych szablonu
Typy zmiennych zmiennych szablonu

Przejdź do części 7: Praca z fragmentami rewolucji MODX