Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для написания уроков по разработке сайта на MODX Revo, я выбрал готовый адаптивный шаблон на bootstrap 5 под названием FlexStart (можно скачать его в конце прошлого урока).
Либо можете использовать абсолютно любой, их полно как платных, так и бесплатных — так скорее всего лучше поймете весь принцип натяжки.
Структура HTML тем
Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы — обработчики форм и т.п.. В нашем случае структура такая:
Пару html файликов (5 дизайнов страниц), в forms — php обработчик для контактной формы, а в assets папки со скриптами, изображениями, файлами стилей.
Вот пример структуры платной премиум темы.
По более папок и дизайнов, ну не суть. В общем на нужны только папки с css, js и файлами картинок (в некоторых темах еще файлы шрифтов) — грубо горя нам нужно все кроме php обработчиков и html файлов.
Перенос шаблона в Modx
Самый простой способ — это просто закинуть все файлы с папками (кроме html) в корень веб-сайта например при помощи FTP. Я закинул всю папку assets (scss — удалил, так там нет файлов).
Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же, но тогда нужно будет менять пути.
Дальше мы можем вставить html код главной страницы (index.html) в начальный шаблон. Для этого открываем на пк файл index.html (открыть можно при помощи обычного блокнота, но лучше использовать специальный редактор кода, например VS Code). Копируем html код, после чего в дереве админки MODX переходи во вкладку Элементы, открываем Начальный шаблон (там вы увидите html код с базовым синтаксисом MODX.
Удаляем его и вставляем за место него ранее скопированный код. После чего сохраняем и переходим на главную страницу сайта.
Должна загрузится точно такая же страница как в html шаблоне.
Что делать если страница отображается криво?
Проверьте все ли вы загрузили.
Если вы грузили не в корень сайта, а к примеру в папку templates, то вам нужно поправить пути к файлам (до стилей, скриптов, картинок и т.д.). Пример: было css/style.css стало templates/css/style.css.
Видео урок
Данный урок достаточно простой — думаю особых проблем не у кого не возникнет. Но сейчас шаблон у нас статичным и далее нам нужно будет сделать его динамичным, и в этом нам помогут: modx синтаксис и модификаторы (либо шаблонизатор fenom со своими модификаторами). Посетите все эти уроки, посмотрите что для вас заходит больше. В уроках дальше буду показывать и то и другое. В следующем уроке подключим редактор кода ace — чтобы он подсвечивался в админке (как у меня на скрине выше).
Добрый день.
Уроки хорошие, без воды. Но нет четкой нумерации. Пишете — в прошлом уроке создали …, нажимаешь внизу на урок слева (который, по идее, прошлый), но попадаешь на другую тему.
Распределите уроки по нумерации, пожалуйста.
Добрый день! Есть такое дело) Пишу в разнобой на разные темы) Структурировать их не так уже легко (предыдущий — следующий урок) идут по датам — наверное вообще уберу этот блок в бедующем) Если руки дойдут — обновлю часть статей (в плане не, то что они устарели (за этим я слежу) — они просто под разные сайты с разными дизайнами), нужно как то все обновить под какой-нибудь интернет магазин (с блогом и т.д.) и структурирую их по порядку.
Добрый вечер)
Было бы здорово)))
Только не удаляйте, пожалуйста)