MODx Revolution для пачаткоўцаў Частка 6 - Праца з пераменнымі шаблону

Сардэчна запрашаем у частцы 6 MODx Revolution для поўнай серыі пачаткоўцаў. У апошняй частцы мы даследавалі канцэпцыю Чанк. Мы стварылі шэраг кавалкаў і навучыліся выкарыстоўваць іх, каб арганізаваць наш шаблон. Мы таксама згадвалі аб некаторых іншых відах выкарыстання кавалкаў і пазналі іх сінтаксіс тэгаў і як выклікаць іх у шаблон. У гэтым артыкуле мы збіраемся даследаваць адзін з цікавых функцый MODx - Зменныя шаблону (тэлевізары).

Дагнаць:

Частка 1: Уводзіны
Частка 2: Усталёўка
Частка 3: Базавая канфігурацыя і ўстаноўка Дадаткова
Частка 4: Праца з шаблонамі
Частка 5: Праца з Кавалкамі

Паколькі мы працуем у гэтай серыі, мы будуем сайт рэсурс для вывучэння MODx Revolution , У апошніх пару растэрміноўкі мы пачалі працэс партавання шаблон што мы атрымалі ад ThemeForest на нашым сайце MODx і ў працэсе мы вывучылі асновы працы з шаблонамі і кавалкамі. Наш вэб-сайт да гэтага часу выглядае даволі добра, але гэта ўсё ж такі фіктыўны сайт у тым сэнсе, што ні адзін з ўтрыманьня не наш кантэнт, і ні адзін з іх на самой справе не належыць вэб-сайт, а гэта ўсё убудаваныя ў шаблоне.

У сённяшнім артыкуле мы збіраемся пачаць працэс замены, што фіктыўны статычны кантэнт з дынамічным кантэнтам, які выходзіць з нашых вэб-старонак, а не з шаблону.

Праца з змесцівам ў MODx Revolution

Калі мы паглядзім на вобласць змесціва нашага шаблону сайта вы можаце ўбачыць тры вобласці, якія маюць выразна асобнае ўтрыманне ў іх.

Мая мэта складаецца ў тым, што да канца гэтай партыі мы заменім ўтрыманне ў гэтых трох рэгіёнах, змест якіх мы ўступаем у хатняй старонцы ў закладцы рэсурсаў, а не зместу, якое статычны укладзеная ў шаблоне. У працэсе выканання гэтага мы пачнем вывучаць асновы зменных шаблону, так што давайце пагрузіліся ў 🙂

Стварэнне змесціва ў MODx Revolution

Давайце пачнем з таго, паглядзіце на асноўны рэсурс у MODx Revolution. Калі вы ідзяце на ўкладку рэсурсаў і адкрыць галоўны рэсурс для рэдагавання, вы прадстаўлены з некалькімі палямі. Мы коратка глядзелі на гэта ў частцы 4, калі мы прысвоілі Хатняй рэсурсу шаблон. Давайце зноў паглядзім на яго (памятаеце, вы можаце націснуць на малюнак, каб павялічыць):

Як вы можаце бачыць з гэтай выявы, у вас ёсць, па змаўчанні, некаторыя ўбудаваныя поля даступныя для вас. Ёсць таксама некалькі палёў , даступных на ўкладцы Параметры:

Кожнае поле мае падказку, якая кажа вам, што гэта шаблон тэг, а таксама кароткае апісанне (для большасці з іх) палёў. Вы можаце ўбачыць гэтыя падказкі пры навядзенні на кароткі час над полем:

Вы можаце запоўніць усе гэтыя палі кожны раз, калі вы ствараеце новы рэсурс, ці толькі некаторыя з іх, у залежнасці ад вашых патрэбаў. Вы можаце атрымаць доступ да палях вы запоўненыя, выкарыстоўваючы адпаведны тэг шаблону. Напрыклад, вы можаце выбраць, каб выкарыстоўваць поле апісання для метаописаний, а затым выклікаць гэта поле ў мета-тэгу апісання ў галаве вашага шаблону, і гэтак далей. Вы ўбачыце, што поле загалоўка меню важна, калі мы пераходзім да працы з Wayfinder для стварэння навігацыі па сайце (хутка 🙂)

Як вы можаце бачыць, рэсурс па змаўчанні дае нам адзін асноўны кантэнт поля.

Лагічна зрабіць выснову, што гэта, дзе мы, або рэдактар ​​вэб-сайт будзе ўвесці ў асноўны змест, што яны хочуць, каб з'явіцца на сайце. Мы доступ да змесціва набранаму тут , з дапамогай [[* ўтрыманне]] тэг. У проста выклаў старонку з толькі адзін асноўны вобласці ўтрымання, гэта было б проста. Напрыклад, калі паглядзець на старонцы Пра тое, што адбываецца з шаблонам мы працуем, і мы можам бачыць, што ёсць толькі адна асноўная вобласць кантэнту:

Зараз для нашага шаблону хатняй старонкі, мы маглі б выбраць жорсткі код гэтыя тры вобласці ў вобласць змесціва, скапіяваўшы HTML-код у наш рэсурс. Тым не менш, гэта мае сэнс для мяне, каб зрабіць гэтыя тры вобласці незалежнымі, маючы кожны з іх мае сваю ўласную вобласць змесціва. Мы дасягаем гэтага з дапамогай зменных шаблону.

Якія зменныя шаблону (тэлевізары)?

Зменныя шаблону проста прыстасаваныя поля, дададзеныя ў шаблон. Яны з'яўляюцца спецыфічнымі для шаблону вы задаяце і не будзе прымяняцца да любых іншых шаблонах, калі не прызначыць іх гэтых шаблонаў. Яны дазваляюць вам мець вялікую гнуткасць і выйсці за межы прадстаўленых палёў рэсурсу па змаўчанні.

Зменныя шаблону, таму што яны проста поля , дададзеныя да вашага рэсурсу, маюць той жа сінтаксіс тэга , як палёў па змаўчанні: [[* TVName]].

Тэлевізары маюць ўваходныя і выходныя тыпы, якія выходзяць за рамкі простых тэкставых палёў. Яны могуць быць багатымі тэкставыя вобласці, поля малюнка, URL палі, палі даты і г.д. Вы можаце нават ствараць прыстасаваныя тыпы ТБ. Але давайце не будзем забягаць наперад. Мы будзем закранаць толькі самых асноў на гэтай пасадзе, і я заклікаю вас, каб даведацца больш пра тэлевізары ў спасылках ў канцы гэтага паста. У будучых навучальных мы разгледзім больш тэлевізараў, таму што яны даволі магутныя і гнуткія, але цяпер давайце гуляць з асновамі.

Лепшы спосаб даведацца вядома, рукі.

Мы будзем выкарыстоўваць асноўнае поле кантэнту рэсурсу для вобласці 1 у нашым шаблоне (гл першай лічбы ў гэтай партыі). Затым мы створым два тэлевізара для двух іншых змястоўных абласцей 2 і 3. Давай спачатку запоўніць вобласць 1 з утрыманнем, так што мы можам адсачыць, што мы робім.

Для даведкі, гэтыя рэгіёны зноў:

Адкрыйце шаблон для рэдагавання і пракруціць ўніз, каб знайсці, дзе 1 з'явіцца код і ўтрыманне ў рэгіёне. Вы таксама можаце выкарыстоўваць Firebug для гэтага. У маім выпадку, гэта выглядае прыкладна так:

<DIV клас = "спецыяльны widget_text"> <DIV клас = "sp_title_m"> <DIV клас = "sp_title_l"> <DIV клас = "sp_title_r"> <h3 клас = "special_title"> Тэма Асаблівасці </ h3> </ div > </ DIV> </ DIV> <DIV клас = "textwidget"> <p> <пралёт клас = "dropcap"> S </ SPAN> нітка пошук Engine Optimization быў зроблены прыярытэт пры праектаванні <EM> Бізнес Поспех < / EM> тэма. . У іерархіі коды, асноўны змест блок змяшчаюцца перад бакавой панэллю, незалежна ад становішча бакавой панэлі, так што абыход першага пошукавых сістэм </ р> <DIV стыль = "плаваць: злева; шырыня: 50%;"> < вул клас = "спіс-2"> <li> SEO Friendly </ li> <li> Лёгка наладзіць </ li> <li> тыпаграфікі Стылі </ li> <li> Left / Right Sidebars </ li> </ уль> </ DIV> <DIV стыль = "плаваць: злева; шырыня: 50%;"> <вул клас = "спіс-2"> <li> 2D або 3D Layout </ li> <li> Ненадакучлівы Меню </ li> <li> РСП для ўсіх 7 стыляў </ li> <li> падтрымка крос-браўзэр </ li> </ UL> </ DIV> <DIV клас = "ясна"> </ DIV> </ DIV> </ DIV>

Калі зараз змяніць гэта так, што я магу замяніць статычны кантэнт з маім утрыманнем тэгам, мой код будзе выглядаць наступным чынам:

<DIV клас = "спецыяльны widget_text"> <DIV клас = "sp_title_m"> <DIV клас = "sp_title_l"> <DIV клас = "sp_title_r"> <h3 клас = "special_title"> Тэма Асаблівасці </ h3> </ div > </ DIV> </ DIV> <DIV клас = "textwidget"> [[* ўтрыманне]] </ DIV> </ DIV>

І цяпер мая старонка выглядае наступным чынам:

Цяпер вы можаце бачыць, што вобласць 1 пустая. Гэта адбываецца таму, што няма ніякага ўтрымання ў нашай вобласці кантэнту Home рэсурсаў. Так давайце некаторы ўтрыманне там. Адкрыйце галоўны рэсурс для рэдагавання і дадаць змесціва вашага выбару:

Захавайце хатні рэсурс, а затым давайце запусцім наш сайт. Тэкст, які мы ўвайшлі ў асноўным поле рэсурсу цяпер з'яўляецца ў вобласці змесціва вобласці 1.

Такім чынам, мы маем вобласць 1 Сартаваць цяпер. Давайце пяройдзем да абласцей 2 і 3. Мы хочам, каб яны былі дынамічныя вобласці рэдагавання кантэнту, а таксама. Для гэтага нам трэба стварыць два новых зменных шаблону, якія маюць багатую вобласць тэксту поле ўводу.

Стварэнне зменных шаблону ў MODx Revolution

Каб стварыць зменную шаблону, перайдзіце на ўкладку Elements, і пстрыкніце правай кнопкай мышы на Зменныя шаблону для стварэння новага тэлевізара. Вы таксама можаце націснуць на абразок New TV хуткага доступу.

У акне шаблону пераменнага стварэння, ёсць некалькі ўкладак, дзе вы можаце ўвесці інфармацыю аб вашым новым тэлевізары. На ўкладцы General Information увядзіце імя тэлевізара, а таксама подпіс. Паспрабуйце назваць вашыя тэлевізары ў залежнасці ад таго, спосаб дазволіць вам успомніць, што яны. Надпіс важная, так як гэта дапаможа стваральніку рэдактара сайта / кантэнту, ведаючы, што ўяўляе кожнае поле.

Вы таксама можаце дадаць у апісанне, калі вы хочаце.

Цяпер мы можам прапусціць ўкладку Уласцівасці , паколькі мы яшчэ не абмяркоўвалі наборы уласцівасцяў, і мы не маем патрэбу ў іх у цяперашні час .

Далей мы перайсці на ўкладку Input Options. Таму што мы хочам, каб кантэнт-рэдактар ​​сайта, каб мець магчымасць выкарыстоўваць багаты тэкставы рэдактар ​​пры ўводзе змесціва ў гэтай галіне, мы паказваем, што мы хочам, каб тып ўваходу, каб быць Rich Text.

Далей мы пераходзім да ўкладцы Output Options, і зараз мы можам пакінуць гэта як ёсць. Аднак, калі вы націснеце на опцыі расчыняюцца вы ўбачыце некалькі варыянтаў (напрыклад, дата, String, HTML і г.д.), які дасць вам ідэі аб тым, як вы можаце выкарыстоўваць гэта. І ў будучыні мы будзем мець магчымасць вывучыць іншыя варыянты вываду, але цяпер пакінуць яго па змаўчанні.

Як я ўжо казаў, ёсць і іншыя ўваходныя і выходныя тыпы, якія мы будзем даследаваць, як мы будзем працягваць, і вы можаце прачытаць на іх ў спасылках, прадугледжаных у канцы гэтага паста.

Наступны крок заключаецца ў вызначэнні таго, што шаблоны вы хочаце мець доступ да гэтага тэлевізары. Як мы ўжо згадвалі вышэй, тэлевізары шаблоны спецыфічныя. Для ўстаноўкі гэтага перайдзіце на ўкладку Шаблон доступу і пераканайцеся , што вы выберыце шаблон са спісу і націсніце кнопку Захаваць. У маім выпадку:

Ёсць дзве іншыя ўкладкі , якія мы не глядзелі на на гэтым экране, а менавіта правы доступу і крыніцы СМІ. На дадзеным этапе ў нашым навучанні мы не павінны турбавацца пра іх, але мы зноў іх пазней, калі нам трэба.

Калі мы цяпер вярнуцца назад і адкрыць галоўны рэсурс для рэдагавання мы адзначым , што мы цяпер маем новую ўкладку, а менавіта ўкладку Зменныя шаблону. Калі мы nagivate на гэтай ўкладцы мы ўбачым, што наш новы багаты тэкставае поле зараз з'яўляецца з яго подпісам, у дадатак да асноўнага зместу поля, якое пастаўляецца па змаўчанні.

Цяпер мы можам дадаць кантэнт на нашым новым полі. Такім жа чынам, мы можам пайсці далей і стварыць яшчэ адну зменную шаблону для вобласці 3.

Дубляванне Зменныя шаблону

САВЕТ: Калі вы ведаеце , што новы тэлевізар вы збіраецеся стварыць будзе вельмі падобны на той , які ў вас ужо ёсць у вашым спісе, вы можаце скараціць працэс, выкарыстоўваючы опцыю Дублікат TV замест стварэння новага тэлевізара.

Гэта так у маім выпадку, як вобласць 2 і 3 вельмі падобныя. Проста пстрыкніце правай кнопкай мышы на экране тэлевізара, які вы хочаце скапіяваць, і абярыце Дубляваць TV:

У ўсплываючым акне, якое з'яўляецца, зьмяніце назву новага тэлевізара і выберыце, каб мець значэнне дублюецца. Ваш новы тэлевізар будзе мець такі ж доступ шаблону, загаловак, тып ўводу, выснова тыпу і г.д., як і зыходны. Вы павінны ўвайсці ў новы тэлевізар і рэдагаваць подпісы, дык гэта стаўленне да новага тэлевізары, а таксама рэдагаваць усё, што трэба змяніць.

Так што цяпер , калі я адкрыць галоўны рэсурс для рэдагавання і зноў перайдзіце на ўкладку Пераменнага шаблону, цяпер я бачу , што ў мяне ёсць два дадатковыя багаты кантэнт вобласці , як пажадана, а таксама поле змесціва па змаўчанні.

Так што цяпер у нас ёсць гэтыя два рэгіёны, даступныя для нас (і для рэдактара кантэнту нашага сайта), давайце цягнуць іх у шаблон так, што іх змест можа быць дынамічна разабраны ў нашай галоўнай старонцы.

Нам трэба адкрыць шаблон і шукаць код і ўтрыманне ў галінах 2 і 3, так што мы ведаем, што замяніць нашымі тэгамі шаблону (зноў жа мы можам выкарыстоўваць Firebug для гэтага). У маім выпадку ў мяне ёсць:

<DIV клас = "cont_col_1 widget_text"> <h3 клас = "cont_col_1_title"> B. Поспех Тэма </ h3> <DIV клас = «textwidget»> Вы зможаце абраць з 28 розных эфектаў пераходу для загалоўка Slider. Ligula Eget Dolor. Aenean Massa. Сперма sociis natoque penatibus і інш Magnis Дыс парадзіха Монтес. Aenean Massa. Сперма sociis natoque penatibus і інш Magnis. <IMG стыль = "абіўка-топ: 10px;" SRC = "актывы / шаблоны / 7in1 / выбаркі дадзеных / b_success_logo_btn.png" шырыня = "200" вышыня = "92" альт = "б-поспех-лагатып" /> </ DIV> </ DIV> </ DIV> <! - канец cont_col_1 -> <DIV ID = клас "cont_col_2" = "column_1_of_4"> <DIV клас = "cont_col_2 widget_text"> <h3 клас = "cont_col_2_title"> WordPress Rocks </ h3> <DIV клас = » textwidget "> Вы зможаце абраць з 28 розных эфектаў пераходу для загалоўка Slider. Ligula Eget Dolor. Aenean Massa. Сперма sociis natoque penatibus і інш Magnis Дыс парадзіха Монтес. Aenean Massa. Сперма sociis natoque penatibus і інш Magnis. <IMG стыль = "абіўка-топ: 10px;" SRC = "актывы / шаблоны / 7in1 / выбаркі дадзеных / wp_logo_btn.png" шырыня = "200" вышыня = "92" ALT = "B-WP-лагатып" /> </ DIV> </ DIV> </ DIV> <! - канец cont_col_2 ->

які я рэдагую стаць:

<DIV клас = "cont_col_1 widget_text"> <h3 клас = "cont_col_1_title"> B. Поспех Тэма </ h3> <DIV клас = "textwidget"> [[* home7in1_home_contentregion2]] </ DIV> </ DIV> </ DIV> <! - канец cont_col_1 -> <DIV ID = "cont_col_2" клас = "column_1_of_4"> <DIV клас = "cont_col_2 widget_text"> <h3 клас = "cont_col_2_title"> MODx Rocks </ h3> <DIV клас = "textwidget"> [[* home7in1_home_contentregion3]] </ DIV> </ DIV> < / DIV> <! - канец cont_col_2 ->

Калі мы цяпер праглядзець нашу хатнюю старонку, мы павінны бачыць, што тры вобласці, якія пачыналі са статычным фіктыўным кантэнтам, які быў убудаваны ў шаблоне цяпер выцягваць змесціва дынамічна з нашых трох змястоўных палёў, два з якіх з'яўляюцца новымі тэлевізары, якія мы стварылі ,

Для прастаты я не турбавацца аб слупках ў першай вобласці або малюнкаў у другой і трэцяй абласцей, ці некаторыя з спецыяльных класаў фарматавання. Вы можаце вызначыць тыя з гледзячы на ​​код шаблону і дадаўшы адпаведны код і даданне малюнкаў у вашай вобласці кантэнту, выкарыстоўваючы багаты тэкставы рэдактар.

Там няма абмежаванняў на колькасць тэлевізараў, вы можаце дадаць у шаблон. Я, верагодна , пайсці далей і дадаць яшчэ тры тэлевізары, па адным для загалоўка кожнага рэгіёну, так што назвы Тэма Асаблівасці, Success Theme, і MODx Rocks не статычныя, а могуць быць уведзеныя на ўкладцы Зменныя шаблону. Я мог бы таксама проста вырашылі выкарыстаць адзін з існых палёў, напрыклад, доўгі назоў, для аднаго з назваў. Гэта сапраўды ўсё залежыць ад вас і як вы хочаце працаваць ваш шаблон.

Існуе, вядома, значна больш, чым я тэлевізары пакрыў тут, яны толькі што былі голыя асновамі. Я заклікаю вас, каб вывучыць і даследаваць некаторыя пра іх, даведацца аб іх розныя ўваходныя і выходныя тып, чытаць пра карыстацкія тыпах тэлевізараў і эксперыменце. Мы будзем працаваць у больш і выкарыстанні тэлевізараў зноў і зноў, як мы працягваем нашу серыю MODx, так што сочым за падпісваў і працягвайце эксперыментаваць 🙂

Што далей?

Так што цяпер рэчы становяцца дынамічнымі ў нашым шаблоне, і мы ідзем разам добра з нашым сайтам будаваць, я думаю, што прыйшоў час, каб пачаць дадаваць некаторыя функцыянальныя біты і кавалкі. У MODx, мы дадамо функцыянальнасць нашага сайта за кошт выкарыстання Snippets. У наступнай частцы мы пачнем глядзець на Snippets і ісці, каб зрабіць наш сайт рок-н-рол 🙂

Я з нецярпеннем чакаю вашыя каментары, пытанні, зваротная сувязь і г.д. 🙂

больш Reading

зменныя шаблону
Шаблон Тыпы зменных ўводу
Зменныя шаблону Тыпы выхадаў

Пераход да часткі 7: Праца з MODx Revolution Snippets