В прошлых уроках мы установили и настроили modx, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для своего сайта я выбрал готовый платный адаптивный bootstrap шаблон на themeforest за 17$ под названием brightbox (кликните по названию, чтобы посмотреть его демо и описание). Можете использовать абсолютно любой, их полно и бесплатных — так скорее всего лучше поймете весь принцип натяжки.
Бонус читателям. Скачать бесплатно brightbox с моего блога.
Структура HTML тем
Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы — обработчики форм.
В моем случае в папке assets находятся css и js файлы (в соответствующих директориях), в папке images — изображения и красные файлы (у вас могут быть не красными — все зависит от установленного по умолчанию браузера) — это html файлы.
Перенос шаблона в Modx
Самый простой способ — это просто закинуть все файлы с папками (кроме html) в корень веб-сайта. Но я пойду более сложным путем. Так как modx у меня закален и директории assets у меня нет, я залью содержимое из assets (подпапки css и js) в корень сайта и images тоже в корень.
Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же.
Редактирование базового шаблона
В дереве слева, переходим во вкладку «Элементы» и открываем начальный шаблон (можно просто щелкнуть лкм или пкм и выбрать редактировать).
Увидите следующий код.
Удаляем его и заменяем на код из index.html (которые мы не закинули в корень сайта).
Открыть html файл можно при помощи обычного блокнота, но лучше использовать специальный редактор, например brackets.
Сохраняем и переходим на главную страницу сайта.
Главная страница сейчас выглядит криво.
Это произошло потому-что, пути к скриптам и css изменились.
Правка путей
Пути сейчас выглядят так.
К стати немного странная тема, обычно путь идет через слэш /, а \, поправим это.
Если вы уже установили пакет ace, то можно легко и просто сделать поиск с заменой, для этого щелкните в код и затем нажмите сочетание клавиш Ctrl+H (работает на Linux и windows), в верхнее поле вводим \, а в нижнее / и нажимаем all.
Точно также удаляем из путей assets (у нас такой папки нет, и все лежит в корне).
Внимание! Я не буду использовать тег base, поэтому я оставил впереди пути / — сделал абсолютный путь, в случае традиционного использования тега base слэш в начале не нужен.
Сохраняем, если все пути поменяли корректно, то откроется нормальная страница (как в оригинале шаблона), если этого не произошло, то попробуйте обновить кэш браузера CTRL+F5 — не помогает и это тогда перепроверяйте пути (иногда нужно менять пути внутри файлов css и даже в js).
Видео урок
В следующем уроке разобьем шаблон на чанки для того чтобы в дальнейшем было проще управлять кодом.
