Уроки modx revolution для начинающих: MODX MODX Revolution для новичков

Уроки modx revolution для начинающих

Данные уроки направлены прежде всего на то, чтобы показать новичкам с минимальными знаниями по коду (а под этим я подразумеваю связку HTML+CSS и готовые библиотеки js) структурированную информацию по cms modx. Они начинаются с простых пошаговых инструкций для совсем ничего не знающих и постепенно идут с увеличением сложности. Задача, которую я ставлю при написании — дать возможность познакомиться с этим чудесным движком и посмотреть его возможности.

Второй основной целью для уроков является возможность показать насколько разнообразные решения возможно внедрять в эту CMS. Теперь не надо искать единственное верное и работающее решение, всегда есть несколько вариантов сделать ту или иную задачу. Да, иногда это может запутать, но все же преимуществ от этого на мой взгляд намного больше, чем недостатков.

Ну и последней задачей написания уроков по модэксу была задача систематизировать знания и передать их другим в виде развёрнутого ответа. Я часто слышал истории, что по этому движку недостаточно документации. Все непонятно, закрыто, нигде это не упоминается, а форумы вообще покинутые и там никто не отвечает. Не очень хочется, чтобы это было правдой и начинающие разработчики бросали эту CMS не написав и пары сайтов. Поэтому попробую описать свое субъективное мнение о движке.

Что вы получите

1. Получите практические знания по использованию cms modx. Упор в уроках делается на применение навыков в реальных условиях.
2. Информацию что ещё можно сделать с сайтом. В рекомендованных находятся ссылки на статьи, связанные с текущей. Это поможет не просто выполнить задачу, но и понять насколько это повлияет на конечный результат, а может даже задаст вектор работ над сайтом.

Целевая аудитория MODX уроков

Целевая аудитория для этих уроков — это в основном люди, которые до этих уроков были частично или полностью не знакомы с MODX Revolution.

Уроки построены с расчетом на максимальное незнание движка и его правил.

В них не будет сразу рассказано про особенности работы с fenome, хотя в тексте и будут отсылки к модулям, в которых будут примеры кода с ним. Прежде всего упор будет на использование «простых» тегов системы, чтобы их можно было повторить. Опять же, при небольшой ошибке в коде, сайт не должен выдавать ошибку.

Что нужно для обучения

• Среда разработки. Локальная или удаленный хост. Из своей практики советую вам последний вариант. Он придаст больше мотивации вывести сайт на всеобщее обозрение. Сейчас у хостингов есть бесплатные тарифы на 30 дней. Для примера смотрите Бегет. Это опять же мотивация сделать сайт в определенные сроки.
• Знания HTML и CSS будут кстати. Думаю тут не надо пояснять почему.
• Некоторые знания PHP. Для начала они не очень нужны, хватит и того, что можно нагуглить за пару минут. Но все же рекомендую получить где-либо еще эти знания, так как в дальнейшем они вам сослужат добрую службу.
• Иногда понадобятся ваши руки и мозг. Да, не все можно сделать простым копипастом кода из интернета, для чего-то интересного придется поработать головой.
• Терпение и спокойствие души. Спокойствие при повторяющейся много раз ошибке даст шанс закончить работу над сайтом.
• Желание экспериментировать и пробовать новое. Пробуйте что-то новое, ищите новые решения. Модэкс терпеливо относится к экспериментам в коде и не ломает весь сайт безвозвратно.

Что не нужно для работы

1. Чувство собственной важности. Уберите это как можно дальше. На уроках вы не получите знание как заработать много миллионов за полчаса. Разработка на модексе это возможность делать быстрые, красивые и удобные сайты. 
2. Лень. Чем больше ленитесь, тем меньше желание доделать сайт. 

В завершении хочу пожелать тем, кто начинает свой путь разработчика на модэксе удачных проектов и хороших заказчиков!

Как работать с Шаблонами в 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> нашего шаблона:

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Business Success</title>

Нам нужно просто заменить текст Business Success в заголовке на системный тег, который передаст текущий заголовок сайта с наших системных настроек. Заменим таким образом Business Success на [[++site_name]]. Также сделаем еще одну вещь, тип переменных можно определить в системных настройках нашего сайта, поэтому заменим UTF-8 на [[++modx_charset]]. Таким образом приведенный выше код приобретёт следующий вид:

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>US.CMS</title>

Сохраните шаблон и посмотрите на изменения: теперь заголовок сайта выводит имя нашего сайта.

Дополнительно, если вы посмотрите на код, вы увидите, что парсер MODX взял установки нашего сайта для типа данных и вставил динамически правильный тип данных.

Это случилось таким же образом как и с нашим шаблоном, но все происходит динамически и тип данных не является статической величиной.

Еще одна важная деталь: к нашему элементу <head> необходимо добавить тег <base>. Данный тег мы используем для определения адреса по умолчанию для всех ссылок на странице. Поэтому в моём случае мы внесем следующие изменения:

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <base href="http://modx.ws/" /> <title>US.CMS</title>

Это сработает отлично, но снова вместо тяжело-набираемого адреса, лучше использовать тег системных настроек. Используем этот тег и код будет выглядеть так:

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <base href="https://uscms.ru//" /> <title>US.CMS</title>

Теперь посмотрим исходный код сгенерированной MODX Revolution страницы и увидим, что парсер вставил правильный адрес сайта:

Ну что ж, на этом мы закончим. Мы сделали значительный прогресс и теперь у нас есть начальные знания в построении шаблона MODX Revolution. Мы увидели пример того как делаются начальные настройки, создали новый шаблон, добавили его в категорию и начали добавлять теги MODX Revolution для начала преобразования нашего статического шаблона в динамический шаблон MODX.

MODx Revolution для начинающих. Часть 1. Введение. Блокнот для кодирования. MODx Revolution — это новая ветвь MODx CMS, построенная на совершенно другой кодовой базе, чем MODx Evolution. По словам основателя MODx Райана Трэша: «MODx Revolution — это совершенно новый MODx. Он сохраняет суть того, что делает MODx отличной платформой для создания пользовательских веб-сайтов и многофункциональных приложений, позволяя вам делать больше и делать их лучше. MODx Revolution 2.0 является более мощным, может обрабатывать сайты с большим объемом и предлагает возможность обработки нескольких сайтов и поддоменов с одной установки».

Об этой серии

Эта серия будет точно имитировать тот же практический стиль, что и другие наборы руководств для начинающих в этом блоге для MODx Evolution и Drupal 6, которые можно найти в списке на странице Учебники для начинающих. Как и все мои учебники, они будут служить журналом и справочным материалом о моем собственном опыте обучения, а также способом делиться своими знаниями и опытом по ходу дела. Мы начнем с самого начала, установив MODx Revolution и работая с этого момента, создавая пробный сайт по мере продвижения, так же, как мы делали это с другими руководствами на Coding Pad. Мы изучим различные функции, дополнения и тому подобное, а также рассмотрим некоторые способы добиться успеха при создании сайта с помощью MODx Revolution.

Имейте в виду, что по ходу дела окончательным и лучшим ресурсом для изучения всего, что касается MODx Revolution, остается замечательная и постоянно расширяющаяся официальная документация, и я настоятельно рекомендую вам сделать закладку и внимательно ознакомиться с руководством:  http://rtfm .

Предполагаемая аудитория

Целевая аудитория этой серии — в первую очередь люди, которые совершенно не знакомы с MODx Revolution. Вам даже не нужно знать MODx Evolution, чтобы следовать этой серии.

Если вы знакомы с MODx Evolution, некоторые начальные части этой серии могут показаться вам немного утомительными, поскольку вы уже знаете некоторые основы MODx, но, надеюсь, вы научитесь чему-то по ходу дела. По мере продвижения я буду упоминать о различиях между Эволюцией и Революцией, чтобы прояснить ситуацию.

Если вы уже знакомы с MODx Revolution, то эта серия, скорее всего, не понравится вам, так как большая часть описанного материала может быть вам уже известна, но не стесняйтесь оставаться и делиться отзывами, а также исправлять любые ошибки, которые я могу сделать. 🙂

Что насчет MODx Evolution?

Несмотря на то, что сейчас я все больше и больше работаю с Revolution, я все еще создаю и поддерживаю сайты с MODx Evolution, и я продолжу вести блог и писать учебные пособия для Evolution, даже когда мы углубимся в Revolution.

ВАЖНОЕ ПРИМЕЧАНИЕ:

Важно понимать, что с MODx CMS часто существует более одного или двух способов выполнить что-то. MODx не часто ограничивает или ограничивает вас в том, чтобы делать что-то определенным образом. Поэтому то, как я делаю вещи, это именно то, как Я делаю дела. Это не единственный способ или лучший способ, это всего лишь один из способов. Поэтому используйте эти руководства как руководство, отправную точку и обязательно изучите официальную документацию (http://rtfm.modx.com/display/revolution20/Home), другие блоги и форум MODx, чтобы получить больше идей. и узнать больше. Я надеюсь, что вы возьмете то, что я здесь изложил, и построите на этом свои собственные парадигмы. Я буду публиковать соответствующие ресурсы в конце каждого поста.

Что вам понадобится:

• Среда разработки, локальная (Wampserver, XAMPP, MAMP и т. д.) или размещенная. Я настоятельно рекомендую вам прочитать требования к установке MODx Revolution и убедиться, что ваша установка поддерживает эти требования — http://rtfm. modx.com/display/revolution20/Server+Requirements
.

• Хорошее знание HTML/CSS пригодится

• Некоторое знание PHP, хотя не является абсолютно необходимым
  , очень пригодится для изучения и расширения возможностей MODx. Там, где это необходимо, я расскажу об основах того PHP-кода, который мы можем использовать, и/или укажу вам на другие ресурсы, но я настоятельно рекомендую вам получить некоторые знания о PHP, так как они вам пригодятся.

• Немного свободного времени

• Любопытство, терпение и любимый напиток 🙂

На этом пока все, не забудьте подписаться на Блокнот для кодирования и работайте вместе, пока мы принимаем революцию. До скорого!

Изображение заимствовано с http://modx.com, без нарушения авторских прав Полная серия для начинающих. В прошлой части мы начали рассматривать, как работать с шаблонами в MODx Revolution. Мы начали со статического шаблона HTML/CSS и перенесли его в нашу установку MODx Revolution, изменили пути к ресурсам и начали изучать синтаксис тегов MODx Revolution и способы его использования.

.





[[$7in1-заголовок]]