Урок 4. Работа с шаблонами в MODx Revolution
Добро пожаловать на 4 урок MODX Revolution для новичков. На последнем занятии мы сделали некоторые настройки конфигурации сайта и посмотрели как выставлять некоторые глобальные установки. Также мы исследовали как устанавливать дополнения из репозитория MODX с помощью менеджера пакетов. В этой записи мы рассмотрим как работать с шаблонами в MODX Revolution. Мы собираемся начать со статичного HTML/CSS шаблона и через несколько уроков переделаем его в полноценный MODX Revolution шаблон.
Что такое MODX шаблоны?
MODX шаблоны это простые HTML/CSS шаблоны с тегами MODX внутри для динамичной функциональности. Это очень упрощенное определение, но в моей голове сложилось именно такое определения для MODX шаблона. Если вы знаете как программировать HTML/CSS или можете разобраться в таком коде, то остальное для вас не будет проблемой. Вот что делает MODX очень удобным для дизайнера.
Для этого урока я решил использовать тему студии Themeforest для своего сайта. Если вы хотите следовать точно моим шагам, то можете взять этот же шаблон или же взять другой шаблон, вашу собственную разработку либо скачанный с другого ресурса (в Google поищите ‘бесплатные css шаблоны’). Порядок действий для разработки шаблона будет аналогичным.
В этом уроке я буду использовать 7 in 1 Business Success Site шаблон потому что он имеет отличный вид и в то же время достаточно сложный, чтобы его было интересно портировать в сайт MODX . В комплекте 7 различных цветовых стиля, я буду использовать синий, а вы выбирайте какой вам нравится. Ну что ж начнем!
Первое, что я хочу отметить: способ построения шаблона показанный в этом уроке — это не единственный или единственноверный способ, это просто один из способов, которые я использую. MODX не ограничивает ни в том куда положить файлы или как разбивать шаблон… Как вам удобно, так вы и делайте ваш шаблон или как удобно вашему клиенту. Поэтому держите это в уме и можете отступать в порядке построения и изобретать свои более оптимальные способы, как говорится — делай как я, делай лучше меня.
1. Загрузка файлов шаблона
Любой шаблон содержит в себе много файлов – css файлов, яваскрипт, рисунков, флеш файлов… Все это нужно где-то хранить на вашем сервере, чтобы ваш шаблон имел к этим файлам доступ. Я предпочитаю хранить все файлы, которые относятся к шаблону в середине директории assets. Вы можете положить куда угодно и установить соответствующие пути в вашем шаблоне.
Распакованные файлы шаблона имеют приблизительно вот такую файловую структуру:
Таким образом 1 шагом в нашей разработке шаблона является копирование трех папок с файлами шаблона на сервер, это папки sample-data/, scripts/ и styles/. Я создал папку в середине assets и назвал ее templates, а также я создал папку 7in1, в которую поместил вышеназванные папки с файлами шаблона. Если вы запутались, то посмотрите на картинку и все станет понятно:
Теперь эти файлы доступны для любого шаблона, который вы будете делать.
2. Создание шаблона
После загрузки папок с файлами мы можем начать создание нашего MODX шаблона. В админке нажмите на вкладку Elements слева, откроется панель с различными элементами сайта — шаблонами, чанками, переменными шаблона и другими. Нажмем на templates и увидим, что уже есть в наличии один базовый шаблон с названием Base Template. Если вы на него нажмете, то вы можете увидеть код данного шаблона. Видим HTML код с тегами [[++site_name]], [[*pagetitle]].
Эти тэги трансформируют статичный HTML/CSS код в динамичный MODX шаблон и мы собираемся узнать как его сделать и приложить к этому свои руки.
Давайте продолжим и сделаем наш шаблон. Для создания нового MODX Revolution шаблона нажмите правой кнопкой мышки Templates, а далее New Template.
Можете также нажать на иконке New Template:
В следующем окне задайте название для вашего шаблона и описание. Вы можете разместить его в категории для лучшего порядка вашего сайта. Ну и как вы разместите элементы сайта зависит от вас и вашего вкуса. Я обычно создаю категорию для основного шаблона, где я сохраняю все шаблоны и чанки для этого шаблон, далее делаю то же самое для навигации и так далее. Вы можете организовать свой сайт по своему.
Для создания категории, нажмите правой кнопкой мыши на Categories в закладке Elements.
Ну вот можно добавить код в наш новый шаблон. Начнем мы с создания шаблона для главной страницы. Сейчас я могу сказать, что дизайн главной страницы будет отличаться от дизайна внутренних страниц, поэтому я назову этот шаблон каким-то своим именем, например «7in1 Home». Код домашней страницы находится в файле index.html в папке с шаблонами, которую мы загрузили с Themeforest, поэтому открываем этот файл в редакторе (я использую Notepad++) и копируем его содержимое в наш новосозданный шаблон в MODX. Можно (и это на мой взгляд даже более удобнее) отредактировать вначале код вне MODX Revolution и только потом перенести отредактированный код исправленного шаблона, но исходя из целей данного урока, все эти действия проведём внутри редактора MODX.
3. Отредактируйте пути
Поменяем в нашем коде пути к папкам шаблона. Мы скопировали наш шаблон в папку assets/templates/7in1. Поэтому нам нужно изменить пути ссылок к css файлам, js файлам, изображениям и др. на корректные пути на нашем сервере. Этот элемент вашей работы для ускорения можно сделать до того как копировать код шаблона в редактор MODX. Сейчас просто посмотрев на код, я могу сказать, что мне нужно искать папку styles/ и заменить ее на assets/templates/7in1/styles/, и так далее. Заменим все необходимые пути и сохраним наш шаблон. Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути.
4. Назначение шаблона
Итак мы закончили портирование шаблона, давайте назначим шаблон страницы и посмотрим, что же мы наделали. Для определения шаблона для страницы нам необходимо перейти на вкладку Resource и открыть ресурс для которого мы хотим определить шаблон (в нашем случае это страница Home). Если вы нажмете на поле Uses Template, то в выпадающем списке можно будет выбрать новый только что созданный нами шаблон.
После выбора шаблона нажмите Save появится сообщение о том, действительно ли вы хотите изменить шаблон, подтверждаем. Важность этого прояснится после того, как мы сделаем разные шаблоны, у которых будет множество чанков и переменных шаблона и которые мы по-разному разместим, поэтому вам необходимо быть уверенным в правильности выбора шаблона, ресурс для которого вы редактируете в данный момент.
После сохранение, мы можем просмотреть страницу и увидеть как она теперь выглядит. Вот снимок экрана, на котором видна верхняя часть страницы:
Вот нижняя часть:
Как вы видите, наш сайт приобретает нужный вид, а мы всего лишь изменили пути к файлам. В то же время, контент, тег названия страницы, навигация и остальное — остались статичными, поэтому дальше мы начнем вставлять теги и использовать инструментарий MODX.
5. Синтаксис тегов MODX Revolution
Для того, чтобы сделать шаблон MODX Revolution динамичным, нам необходимо научится работать с тегами MODX. В движке MODX много различных тегов, которые можно использовать для создания и добавления изменяемых элементов контента на вашем сайте. Полный список доступных тегов MODX Revolution можно найти в руководстве. Если вы использовали до этого MODX Evolution, то вы поймете концепцию тегов, но все же вам необходимо посмотреть в документацию и усвоить новый синтаксис.
Если вы до этого никогда не использовали MODX, то не волнуйтесь, мы изучим как использовать эти теги в процессе построения сайта. Для начала посмотрите на таблицу сверху, на ней представлены синаксис тегов для разных версий MODX.
В данном уроке мы в основном будем использовать теги системных установок.
6. Изменения заголовка сайта в MODX Revolution
Первое, что мы сделаем — это изменим тег заголовка сайта, чтобы он выводил имя нашего сайта, а не имя шаблона, как сейчас:
Чтобы сделать это, нам нужно просто переместится в область кода, отвечающего за вывод заголовка сайта и заменить его системным тегом. Давайте взглянем на элемент <head> нашего шаблона:
Нам нужно просто заменить текст Business Success в заголовке на системный тег, который передаст текущий заголовок сайта с наших системных настроек. Заменим таким образом Business Success на [[++site_name]]. Также сделаем еще одну вещь, тип переменных можно определить в системных настройках нашего сайта, поэтому заменим UTF-8 на [[++modx_charset]]. Таким образом приведенный выше код приобретёт следующий вид:
Сохраните шаблон и посмотрите на изменения: теперь заголовок сайта выводит имя нашего сайта.
Дополнительно, если вы посмотрите на код, вы увидите, что парсер MODX взял установки нашего сайта для типа данных и вставил динамически правильный тип данных.
Это случилось таким же образом как и с нашим шаблоном, но все происходит динамически и тип данных не является статической величиной.
Еще одна важная деталь: к нашему элементу <head> необходимо добавить тег <base>. Данный тег мы используем для определения адреса по умолчанию для всех ссылок на странице. Поэтому в моём случае мы внесем следующие изменения:
Это сработает отлично, но снова вместо тяжело-набираемого адреса, лучше использовать тег системных настроек. Используем этот тег и код будет выглядеть так:
Теперь посмотрим исходный код сгенерированной MODX Revolution страницы и увидим, что парсер вставил правильный адрес сайта:
Ну что ж, на этом мы закончим. Мы сделали значительный прогресс и теперь у нас есть начальные знания в построении шаблона MODX Revolution. Мы увидели пример того как делаются начальные настройки, создали новый шаблон, добавили его в категорию и начали добавлять теги MODX Revolution для начала преобразования нашего статического шаблона в динамический шаблон MODX.
Следующий урок
В следующем мы продолжим работу над нашим динамичным шаблоном, поговорим подробнее о чанках, что они из себя представляют, как их использовать для упрощения и организации нашего шаблона и многое многое другое.
alex.v.kostin
31.10.2011 12:36А шаблон "7 in 1 Business Success Site" найти удалось?
Ссылочкой не поделитесь?
Viktorminator
31.10.2011 13:10Именно того старого шаблона нет. Выложил на http://www.ex.ua/view_storage/338315157852 Xero шаблон.
Тоже неплохой шаблон с псд и доками. Сами шаблоны обычно беру здесь http://boycj.com/ThemeForest
Подберите себе любой по вкусу. Создание сайта мало чем отличается. У меня обычно проблемы с cufon - я его отключаю и подключаю просто webfonts от гугл какие поддерживают кириллицу.
Viktorminator
31.10.2011 13:15Просьба: я за всем не успеваю отслеживать - буду благодарен, если кто увидит такое: &;#93&;#93
Сразу отпишитесь в комментариях. Это ошибки. Буду сразу же выправлять.
Alex
05.11.2011 02:29В объяснялке есть не совсем ясное предложение:
"...это папки folders/, sample-data/, scripts/ и styles/"
О какой folders/ идет речь?
Viktorminator
05.11.2011 08:38folders/ - лишняя. Убрал. Спасибо за внимательность.
Dimaon
23.01.2012 19:10Лишний слэш перед последней кавычкой
Viktorminator
23.01.2012 20:28та не, не лишний. Зависит от настроек сервера и сайта. Если ++site_url выдаёт со слешем, тогда лишняя, а если без, тогда нужно. Ну и потом при обозначении путей это тоже нужно учитывать.
Константин
03.02.2012 09:44Вот может ссылка кому нужен этот шаблон. Синий это 2 :)
http://uploading.com/files/get/b258b95d/
Константин
03.02.2012 10:15Не могу для странице home назначить новый шаблон. При попытке его назначить выдаётся как вы и писали предупреждение, а после того как пишет сохранение, происходит опять возврат на BaseTemplate
Константин
03.02.2012 10:23Вот Ajax-запросы которые выдают ошибку
http://localhost/mytest/revolution/test/connectors/resource/index.php?action=getNodes&id=web_0&type=modContext
http://localhost/mytest/revolution/test/connectors/resource/locks.php - таких 2
Viktorminator
03.02.2012 11:08Какой локальный сервер? Версия пхп?
Константин
04.02.2012 21:17Apache 2.0 Handler XAMPP 1.7.7 PHP: 5.3.8. Это на домашнем.
А на работе сборка WAMP. 5 PHP только я не помню какая точно версия.
И на том и на другом одна и та же проблема. Шаблон не меняется. Возвращается к BaseTemlate
Viktorminator
04.02.2012 21:24Выставьте в php.ini значение date.timezone = "Europe/Kiev". Если не поможет, то возможно, нужно использовать версию пхп ниже вашей.
Сергей
05.02.2012 08:53Константин,
у меня тоже не меняется шаблон, как показано в этом уроке.
получилось следующим образом: пр.кн.мыши на ресурсе, выбрать пункт "Быстро обновить".
konfuzz
05.02.2012 23:58Тоже столкнулся с проблемой назначения нового шаблона. Можно использовать «Быстро обновить», можно массово изменять шаблон модулем batcher. В Evolution был модуль Docmanager с более обширным функционалом, но для Revo я его не нашел.
На официальном форуме пишут, что проблему можно решить на этапе установки MODx, выбрав не русский, а английский язык. При последующей русификации через админку проблемы не возникает. Сам не пробовал, но склонен доверять :) Попробуйте кто-нибудь и отпишитесь, плиз.
Константин
08.02.2012 12:49Спасибо, Сергей! Да так шаблон поменялся. Наверно версия PHP тут не причём
Viktorminator
08.02.2012 12:51Это баг модекса в 2.2.1 будет исправлен.
mozg
10.03.2012 20:19поправьте абракадабру на [[++]]
=)
Viktorminator
10.03.2012 22:42Спасибо, поправил. TinyMCE подкидывает лишнюю работу...
Rurik
27.03.2012 11:25после присваивания нового шаблона (шаг 4) сайт показывает страничку, но без оформления. загрузка скриптов и CSS обламывается по ошибке 403
какие должны быть разрешения на каталогах и файлах в assets и ниже ? у меня 0755 и 0644 соответственно
myafa
19.05.2012 16:41Друзья, подскажите решение проблемы:
Не могу подключить стили. Первый раз ставлю на СMS :)
Cтили при верстке подключаю обычно через импорт в Base.css, т.е. у меня в итоге 5 страниц стилей импортированных в Base.css, которая в свою очередь подключена к .html Все картинки задаю в стилях. Вопрос вот в чем: мне переписывать все пути к картинкам в файлах .сss? Если да, то каким образом? assets/templates/images/name.gif или полный путь?
myafa
19.05.2012 16:45хотя, вот сейчас внимательнее посмотрела: вообще никакие стилевые описания не работают при перезаписи пути к base.css. Т.о. надо подключать без импорта, т.е. один файл .сss, в котором все описания в кучу? *google в помощь не работает :(*
Viktorminator
20.05.2012 15:15Если бы у меня возникла данная проблема, то все стили я бы помещал в корень сайта, чтобы не менять css файлы. То есть помещаете всё в public_html папку и не меняете никаких путей внутри ваших файлов стилей.
Сергей
24.05.2012 15:58Не могу никак понять, разбил шаблон на чанки, обновил его. Вызываю страницу и вижу только {{HEAD}} {{HEADER}} {{SLIDER}} {{CONTENT}} {{FOOTER}}. Что я забыл включить?
Viktorminator
24.05.2012 17:01внимательно ознакомьтесь http://rtfm.modx.com/display/revolution20/Commonly+Used+Template+Tags
Viktorminator
24.05.2012 17:03У вас же Рево - чанк должен быть с квадратными скобками и знаком доллара [[$mychunk]]
Сергей
25.05.2012 10:13Спасибо, уже разобрался.
Павел Савин
29.08.2012 10:31Небольшая опечаточка в пункте 2:
"Нажмем наtemplates"
Vladimir Tikhomirov
20.09.2012 19:35Объясните чайнику! Ни как не могу понять где мне брать "папки с файлами шаблона" п.1.
Viktor Minator
20.09.2012 19:45http://uploading.com/files/get/b258b95d/
Vladimir Tikhomirov
20.09.2012 19:56А что это вы предлагаете мне загружать письменного ответа нет на это?
Viktor Minator
20.09.2012 20:04скачайте и распакуйте архив, а там находятся папки с файлами шаблона
Vladimir Tikhomirov
20.09.2012 20:07Там находится установщик какой то программы!
Vladimir Tikhomirov
20.09.2012 20:17Еле нашел что скачивать!
Vladimir Tikhomirov
24.09.2012 16:39Вроде все делал правильно, а почему то, получилось, что ни одна картинка, при просмотре после проделанных операций п.4, не открывается... Подскажите в чем может быть дело.
Alexander Solovyev
26.10.2012 05:32Не могу решить две проблемы:
1. CSS не применяются (положил их уже в корень)
2. пути "генерятся" кривые, типа "http://имя сайта//full-width.html"
Ребята подскажите пожалуйста где ошибка
Спасибо
Viktor Minator
26.10.2012 11:41Проверьте правильный ли у вас base href в шапке сайта. Возможно он даёт лишний слеш.
Alexander Solovyev
28.10.2012 20:55Отвечаю сам себе :))) чтобы CSS применялись проверьте тщательно права доступа и владельцев файлов, в моем случае надо было раздать право Х на все директории на пути в файлу стиля
Альберт Ягушев
02.01.2013 19:08вроде делаю всё вышесказанное, но открывает пустую страницу.
Sergey Rusakov
16.01.2013 23:48Опечаточка
«Вы можете рзместить его»
Olga
06.03.2013 17:56Здравствуйте, подскажите, пожалуйста, после загрузки трех папок с файлами шаблона в assets, не могу перейти ко второму этапу, а именно редактированию New Template, так как в программе не происходит никакое действие в меню справа(аналогично для Resorses) Это может быть связанно с файлами?
Юрий Зюзин
26.04.2013 11:04Нашёл этот шаблон, все 7 его стилей.
Кому нужно обращайтесь, отправлю почтой или можете скачать тут
http://prosto-perevozki.ru/downloads/BusinessSuccess.zip - Прямая ссылка
Владельцы сайта http://prosto-perevozki.ru не несут ответственности за данную информацию и не являются первоисточником. Информация была взята из открытых первоисточников.
Артур Янтурин
18.05.2014 18:04Юрий, отправьте мне по почте этот шаблон плиз, а то не могу я скачать по ссылкам, пишет что не найден файл. Мой mail - murano.93@mail.ru
Вадим Коротаев
12.05.2013 14:11А как редактировать содержимое шаблонов в TinyMCE? Содержимое ресурсов можно редактировать в "ТинИ", а вот шаблоны нет, по крайней мере я не знаю как это делать.
Не думаю, что в ModX нет такой функции.
Я уже перелопатил кучу статей и нигде не смог найти ответа на это =(
Viktor Minator
12.05.2013 14:13для редактирования шаблонов, чанков и др есть специальные редакторы - ACE, Codemirror, которые можно скачать и установить как дополнения. Читайте статью "Советы начинающим" после 2 или 3го урока идёт.
Юра Кондратенко
19.06.2013 23:48Всем здрасьте) Ребят ставлю шаблон, но расширение css@v=2 меня немного в тупик ставит. Оно просто не работает, перебиваю на просто css вроде начинает работать, но привязки к слайдеру на js перестают работать.... в настройках системы может где расширене нужно выставить? спасибо заранее)
Руслан Юнусов
01.01.2014 23:18В первый раз смотрел эту статью с месяц назад.Не особо разобрался и не смог поставить шаблон на МОДЭКС.В итоге забросил этот движок и началась череда просмотра всяких недодвижков))))Каждый из которых меня не устроил.Но вот подучил HTML и css и этот урок мне очень помог.Спасибо!
Ольга Гладких
03.01.2014 18:51Подскажите, а файлы только по одному загружаются?
Viktor Matushevskyi
03.01.2014 23:08да
Владик Кузьмин
04.03.2014 07:27Делай архив всего сайта а потом разархивируешь уже там.
Сергей Хамзин
17.01.2014 19:37Здравствуйте расскажите как сделать панель управления в шаблоне сайта, нудно чтобы в зарегистрированном состоянии когда находишься на страницах сайта при наведении мыши в верхнюю часть шаблона выпадала панель управления чтобы не нужно было юлозить между вкладками когда правишь что-то на странице. Поискал на просторах интернета ни чего кроме правки и редактирования панели управления в админке не нащёл.
Viktor Matushevskyi
17.01.2014 20:55Есть как минимум 2 дополнения для этих целей. Просторы интернета исследовать - достойное дело, но попробуйте поискать в http://modx.com/extras/, например вот так: http://modx.com/extras/browse/?search=edit
cvg cvg
25.02.2014 06:54Взялся изучать MODx Revo. Загрузил предлагаемый бесплатный шаблон Basic. В assets/templates/basic вижу файл index.html, в котором вся инфа; "Unauthorized accessYou're not allowed to access file folder", и несколько шаблонов типа template.basic.tpl. Пробовал вносить в них изменения, но обнаружил, что на том, что получаю на экране, они никак не отражаются. В чем может быть дело?
Владик Кузьмин
04.03.2014 07:26Доброго времени суток, отличная тема искал долго но вот нашел тут, спасибо.
Вот только вопрос: делал все по уроку и пути к стилям неоднократно проверял, но все же страница отображается без стилей, а ссылки переходят на странички сайта в папке 7 in 1
Илья
16.08.2014 19:47Замучился искать шаблон, пришлите плз, на почту
kova7@rambler.ru
Или дайте рабочую ссылку!!!
Очень прошу!
Антон Щёлкин
23.09.2014 12:49Добрый день. Запнулся на редактировании путей к шаблону. Вроде все поправил в коде шаблона (первая страница Home), но ничего не выводится, пустая страница. Вид страницы смотрю через Content -> Preview site.
Например, было так:
В моем случае стало так:
И так заменил во всех ссылках. Где я ошибся?
Антон Щёлкин
23.09.2014 12:53Подскажите, как вставить код, не отображается..
Антон Щёлкин
23.09.2014 14:58Решил проблему. Оказывается, прежде чем смотреть какое-либо превью страницы, нужно в ресурсах назначить шаблон (4 пункт), с которым в данный момент ведется работа. Я этого не понял, т.к. меня смутила фраза в конце 3го пункта: "Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути." Я думал, что посмотреть превью можно сразу после переназначения путей.