Посадка верстки на modx

Обновлено: 05.10.2024

Приступаем к самому интересному – натяжке шаблонов на MODx. Для того, чтобы начать, сначала нужно понять, как работает парсер MODx. Раньше, когда сайты только начинали делать динамичными, коды HTML, JS, CSS и PHP были вперемешку, что затрудняло понимание работы системы и код был крайне нечитаемым (на самом деле с тех времен не много что поменялось, посмотрите на код шаблонов Wordpress или Joomla!). Например, было вот так:

Логика же MODx разбивает контроллер и отображение, то есть если в коде у нас PHP, то кода HTML там быть не должно.

Работа MODx парсера очень проста – он ищет в шаблонах и чанках своеобразные теги и заменяет их на конкретные значения. Если представить пример на PHP, то получится примерно такой код:

Я думаю, здесь понятно, что [[+id]] заменится на значение $res['id'], a [[+name]] на $row['name']. Также и работает парсер MODx. Думаю, что стоит раскрыть некоторые понятия, которые в дальнейшем будут фигурировать везде в статьях.

Ресурс – это абстракция MODx. В основном страницы сайта, но также они могут быть TXT-документами, XML-документами. Содержимое ресурса может содержать теги MODx.

Элементы – это технические сущности MODX, части абстракции: сниппеты, шаблоны, чанки, плагины и категории.

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

Чанк – кусок HTML-кода, содержащий теги MODx.

Сниппет – кусок PHP-кода. Не содержит теги MODx.

Плагин – кусок PHP-кода, которые выполняются по наступлению какого-либо системного события. Не содержит теги MODx.

ТВ-параметр – дословно, переменная шаблона. Это дополнительное поле ресурса.

Категория – простая папка.

Тег MODx – это любой тег, заключенный в скобки [[ и ]]

В шаблонах и чанках парсер MODx ищет следующие теги:

Важно помнить, что парсер MODx — вещица рекурсивная, она будет работать до тех пор пока на выходе не исчезнут все теги MODx. Поэтому не следует делать вызовов более 3-ей степени вложенности. В противном случае, сайт будет заметно тормозить.

Стандартный шаблон MODx, до недавнего времени, выглядел вот так:

Интегрируем базовые шаблоны из нашего архива

Сейчас, когда у нас все подготовлено, мы с вами наконец-то приступим к натяжке HTML-верстки на MODx Revolution. Я люблю, когда в панели администратора порядок, поэтому для начала нам необходимо создать категории, в которых в дальнейшем будут храниться элементы. Делается это не только ради удобства, но и ради быстродействия панели администратора (админка не даст вам ничего сделать пока не загрузит все развернутые ветки дерева ресурсов или элементов).

Чтобы создать категорию, необходимо кликнуть на иконку папки на панели элементов, а во всплывающем окне заполнить название и нажать кнопку “Сохранить”.

Первая категория, которую мы создадим – “Элементы страниц”. Думаю, вы поймете почему я ее так назвал.

Теперь необходимо загрузить файлы шаблона на сервер (или скопировать их в директорию с сайтом, если вы делаете сайт локально). Для этого копируем все, что находится в папке /assets/ шаблона в папку /assets/ MODx.

Итак, у нас есть созданная категория и файлы размещены в MODx – теперь интегрируем шаблон главной страницы. Открываем наш шаблон, заходим в папку “HTML”. В ней два вида шаблонов, отличаются они только шапкой. Вы можете выбрать какой угодно, но мы будем интегрировать шаблон, лежащий в папке “header-2”. Главная страница – это файл “index.php”, открываем его в редакторе (я советую использовать Brackets или Sublime Text 3). Если посмотреть на данный шаблон, пооткрывать другие странички, то мы увидим, что на всех них повторяются одни и те же элементы:

Шапка сайта (чанк header)
Футер (чанк footer)
Скрипты (их не видно, но они для всех шаблонов будут одни – чанк scripts)
Содержимое между тегами (чанк meta)

Следовательно, нам необходимо создать четыре чанка. Как это сделать, я покажу на примере чанка meta. Кликаем на иконку, похожую на логотип Windows. У нас откроется новая страница, на которой мы заполняем “Имя” (в нашем случае “meta”), выбираем категорию “элементы страниц”, а в код чанка вносим код, который расположен между тегами и нажимаем “Сохранить”.

Вот какой код чанка у меня получился:

Теперь создадим чанк “header”. В него мы поместим весь код от тега до . Код громоздкий, публиковать его не буду.

Создаем чанк “footer”. В него помещаем все от тега до тега . Код громоздкий, публиковать его не буду.

И создаем чанк “scripts”. В него помещаем все скрипты:

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

[[$meta]]
[[$header]]
[[$footer]]
[[$scripts]]

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

Код чанков и шаблона, которые получились у меня, вы можете посмотреть на тестовом сайте или на видео. Сравните их со своими и интегрируйте следующие шаблоны. Начнем мы разработку с блога, поэтому можете интгрировать для начала только следующие:

Blog.html (шаблон “Статьи”)
Blog-post.html (шаблон “Пост”)

Вот, собственно, и все, что я хотел описать в данном уроке. Надеюсь, у вас все получилось!

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

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

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

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

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

MODX Revo

В прошлых уроках мы установили и настроили modx, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для написания уроков по разработке сайта на MODX Revo, я выбрал готовый бесплатный адаптивный bootstrap 4 шаблон под названием Aranoz (кликните по названию, чтобы посмотреть его demo и описание). Можете использовать абсолютно любой, их полно и бесплатных — так скорее всего лучше поймете весь принцип натяжки.

Структура HTML тем

Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы — обработчики форм.

В моем случае в папке img — изображения, в папках css и js находятся файлы отвечающие за оформление и интерактивность, в webfonts и fonts — шрифты, в sass — sass файлы, в 188 Aranoz shop DOC — фалы документации по шаблону, contact_process.php — обработчик контактной формы. Ну и html файлы.

Перенос шаблона в Modx

Самый простой способ — это просто закинуть все файлы с папками (кроме html) в корень веб-сайта например при помощи FTP. Я закину только папки со стилями, скриптами, шрифтами и картинками (css, js, webfonts, fonts и img).

Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же, но тогда нужно будет менять пути.

Дальше мы можем вставить html на главную страницу, для этого открываем ее и вставляем в нее код из html файла (обычно это index.html). Открываем данный файл при помощи обычного блокнота, но лучше использовать специальный редактор кода, например VS Code. Копируем html код, после чего в дереве админки MODX переходи во вкладку Элементы, открываем начальный шаблон (можно просто щелкнуть лкм или пкм и выбрать редактировать).

Увидите следующий код.

Удаляем его и вставляем за место него ранее скопированный код (из index.html). После чего сохраняем и переходим на главную страницу сайта.

Должна загрузится точно такая же страница как в html шаблоне.

Что делать если страница отображается криво?

Проверьте все ли вы загрузили.

Было css/menuzord-megamenu.css стало assets/css/menuzord-megamenu.css

Видео урок

Данный урок достаточно простой — думаю особых проблем не у кого не возникнет. Но сейчас шаблон у нас статичным и далее нам нужно будет сделать его динамичным, и в этом нам помогут: modx синтаксис и модификаторы (либо шаблонизатор fenom со своими модификаторами) — буду показывать и то и другое, чанки, дополнительные поля и сниппеты. Начнем с разбивки нашего шаблона на чанки.

Будем создавать сайт на основе шаблона plusbusiness. Шаблон можно найти в папке distr_MODx.

В шаблон сайта входят:

– главная страница с jQuery галереей (файл index.html)

– внутренняя страница из двух колонок с дополнительной навигацией (файл style-demo.html)

– страница из одной колонки на всю ширину шаблона (full-width.html)

В архиве plusbusiness.zip лежит 3 папки и 3 html-файла.

1. Зайдите в файловый менеджер панели управления хостингом и в папку assets загрузите архив plusbusiness.zip и разархивируйте. Сам архив можно удалить после распаковки. Должно получиться вот так.

2. Вернитесь в панель администратора сайта.

3. Откройте вкладку: Элементы – Шаблоны. Здесь один шаблон уже создан. Будем менять шаблон Начальный шаблон, который является шаблоном по умолчанию.

Сначала создадим шаблон для главной страницы с jQuery галереей. Для этого:

4. Откройте шаблон Начальный шабон.

5. В поле Имя впишите название шаблона Главная страница, а в поле Описание – краткое описание (Главная страница с jQuery галереей). Нажмите Сохранить на верхней панели.

6. В разделе Категории в левом меню

Нажмите и в открывшемся окне введите название Общий дизайн сайта.

7. Нажмите Сохранить.

8. В разделе Категория справа выберите Общий дизайн сайта (если категории нет, обновите админпанель в браузере).

9. Из области Код шаблона (HTML) удалите все, что там есть, и скопируйте html-разметку главной страницы из файла index.html из папки assets/ plusbusiness (копировать можно и с локального компьютера, если так удобней, чтобы не заходить в файловый менеджер).

10. После заполнения нажмите на кнопку Сохранить вверху страницы.

Чтобы синтаксис html-кода подсвечивался в поле Код шаблона (HTML) необходимо установить дополнение подсветки синтаксиса Ace.

11. Перейдите в Пакеты – Установщик. Далее Загрузить пакеты, выберите Ace и сначала загрузите, а затем установите уже по знакомому Вам алгоритму.

12. Вернитесь в шаблон Главная страница. Синтаксис html-кода теперь подсвечивается.

13. Просмотрите сайт в браузере, набрав имя Вашего сайта.

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

14. Перейдите к странице редактирования шаблона Главная страница.

Начинаем изменять пути к файлам и изображениям в шаблоне.

15. Вначале пропишем базовый URL для нашего сайта, чтобы предостеречься от неправильного распознавания относительных путей. Для этого внутри тега прописываем следующее:

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

Нужно изменить все пути, в которых встречаются styles, scripts и images.

Для примера, вот как выглядит путь подключения CSS стилей в оригинале:

А вот так уже после изменения:

17. Измените все пути к файлам стилей, скриптов и изображений (styles, scripts и images). После изменения всех путей должно получиться следующее. Галерея при нажатии на стрелки справа и слева должна переключаться.

Разбиение шаблона на чанки

Чанк – повторяемая часть HTML кода.

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

Шапка сайта – шапка сайта идет совместно с логотипом и главным меню навигации.

jQuery галерея

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

Футер, или нижняя часть сайта

В нашем примере у сайта есть три вида шаблонов: главная страница (файл index.html), страница с дополнительной навигацией (файл style-demo.html), и страница с одной колонкой на всю ширину (файл full-width.html).

Если посмотреть на все три варианта шаблона, то можно увидеть, что у них есть общие части, такие как Шапка сайта и Футер.

Далее, разбиваем html-код на чанки.

18. Перейдите в шаблон Главная страница.

Для начала вынесем в отдельный чанк тег со всеми служебными тегами внутри него с подключаемыми скриптами и стилями.

19. Для этого найдите в html-коде шаблона тег и скопируйте его в буфер обмена (Ctrl+C).

20. Затем перейдите на вкладку Элементы – Чанки и нажмите на кнопку Новый чанк в виде кнопки со знаком + для того, чтобы создать чанк для нашего тега

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

22. Сохраните чанк.

23. Затем опять вернитесь к редактированию шаблона: Элементы – Шаблоны – Главная страница. И замените часть кода, которую вы вынесли в чанк, на вызов чанка. Т.е. вместо тега и всего что в нем было расположено, Вы вставляете конструкцию: [ [$HEAD]]

Сохраните чанк. Код чанка в строке 3.

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

[ [$HEADER] ] [ [$GALLERY] ] [ [$MAIN-CONTENT] ] [ [$FOOTER] ]

В чанке [ [$HEADER] ] будет храниться шапка вашего сайта c логотипом и меню навигации. Копируйте в этот чанк все содержимое контейнера

В чанке [ [$GALLERY] ] будет html-код галереи. Поместите сюда содержимое контейнера

В чанк [ [$MAIN-CONTENT] ] поместите контейнер

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

В чанк [ [$FOOTER] ] помещаем контейнеры

После, того как вы все сделаете, у Вас раздел с чанками должен выглядеть так (цифры в скобках могут быть другими):

Число в скобочках – это ID чанка, у Вас эти номера могут быть другими.

20. При этом сам код шаблона главной страницы, если вы все сделали правильно, должен будет выглядеть вот так:

Читайте также: