MODX. Урок 5: Интеграция верстки. Способ №1

Пройти базовый Курс по MODX

Продолжаем постигать MODX Revolution. И сегодня вы увидите один из способов интеграции исходной верстки в систему MODX Revolution. Итак, имеется чистая установка системы, одна главная страница, у нее есть один начальный шаблон. С версией 2.5.0 появился пробный шаблон для старта. Есть верстка одной html-страницы с прилагаемыми файлами, в которых находятся стили, шрифты, картинки, скрипты… Сейчас вы увидите один из возможных способов, как все это интегрировать в MODX. Делается все очень просто.

Интеграция верстки

Будут использованы только штатные возможности админки MODX Revolution. Все, что нужно сделать – зайти в начальный шаблон, найти «код шаблона», где вставлена верстка, и заменить этот код на подготовленный заранее (взять из html-файла с версткой). Копируем содержимое файла, возвращаемся в админку, полностью заменяем все содержимое и нажимаем «сохранить».

Теперь осталось только перенести все активы этой страницы. Заходим в папку assets, выделяем все и закидываем в папку assets нашего проекта. Теперь обновляем главную страницу и получаем верстку, полностью интегрированную в систему MODX. Всё сделано буквально за несколько секунд.

Дальше нужно нарезать этот шаблон на более мелкие кусочки для использования на других страницах. Для упрощения работы понадобится установить в систему два дополнительных компонента. (Путь:)Установщик –> загрузить дополнение. Загружаем  первый компонент – Ace, редактор кода с подсветкой синтаксиса. Второй компонент динамически создает элементы MODX, называется TagElementPlugin. Переходим в управление -> «установка», и устанавливаем оба компонента. Теперь, если зайти в код шаблона, видно, что появилось форматирование и подсвечивается код верстки. Данная тема очень неконтрастная, поэтому давайте поменяем ее оформление. Заходим в системные настройки, находим «Ace», и здесь меняем тему редактора, скажем, на тему твилайт (вы можете выбрать себе любую другую).

Создание «чанков» в два клика

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

Компонент, который мы устанавливали вторым – TagElementPlugin – добавляет интересные сочетания клавиш, которые позволяют на лету создавать маленькие кусочки html-верстки, так называемые «чанки» MODX. Делается это так: вырезаем полностью head от начала кода (ctrl+x), и сюда вставляем код будущего чанка – так и называем его, «$head». Теперь выделяем название будущего чанка со знаком $, нажимаем ctrl+enter – и динамически появляется окошко с вопросом: «чанк не найден, вы хотите его создать?» – нажимаем «да» и переходим к созданию чанка.

Имя здесь уже присутствует, вставляем вырезанный код, сохраняем. Дальше переходим к шапке сайта. Выделяем шапку, также «ctrl+x», на ее месте пишем вызов будущего чанка (сейчас это «$header»), выделяем вместе со знаком $, нажимаем ctrl+enter --> enter, имя чанка уже есть, вставляем только что вырезанный код, нажимаем «сохранить». Дальше идет содержимое страницы непосредственно, мы его пока что свернем и поместим непосредственно в сам ресурс. Дальше у нас идет код плагина, футер и скрипты.  Из них сейчас сделаем вырезки. Вырезаем код плагина, вставляем чанк, назовем его «$plugin», выделяем, ctrl+enter --> создать чанк, вставляем вырезанный код, сохраняем. Футер сейчас пустой, поэтому не будем его вырезать, а вырежем блок скриптов, ctrl+x, вставляем чанк, называем его «$scripts», выделяем его (со знаком $), ctrl+enter->enter, и опять вставляем вырезанный код. Вот во что превратился весь наш шаблон. Сократили по полной программе =)

Осталось только вырезать этот кусочек кода в сам ресурс. Идем на главную (нужно обязательно сохраниться после всех изменений, не забывайте об этом!), и все содержимое главной страницы также меняем на тот код, который только что вырезали и сохраняем. Теперь нужно в шаблоне вывести содержимое ресурса с помощью специального MODX-тега со звездочкой, назовем этот тег «content». Теперь шаблон должен остаться полностью работоспособным, проверяем. Идем в содержимое --> перейти на сайт и смотрим, все работает: галерея,  скрипты, … Таким образом мы нарезали шаблон штатными средствами MODX плюс два дополнительных компонента. Теперь смотрим в панели «чанки» - там появились только что «на лету» созданные чанки, и теперь мы можем их использовать в других шаблонах для других страничек сайта. Вот один из способов разработки проекта на MODX-Revolution.

В дальнейших уроках я покажу еще два других способа. Спасибо за внимание и до новых встреч!