Современные CMS позволяют задавать оформление сайтов из готовых шаблонов, что сильно упрощает жизнь людям, которые не сильно подкованы в веб-программировании и дизайне. Не является исключением и MODX.
Шаблон представляет собой несколько файлов и папок, которые необходимо положить в специальный каталог на сайте.
Для установки дизайна из готового шаблона создайте в каталоге assets/templates/ новую папку, куда и нужно будет положить файлы и папки, о которых говорилось выше. Путь к шаблону может быть и иным.
Далее необходимо зайти в административную панель MODX, перейти в раздел Элементы и нажать на кнопку добавления нового шаблона (на скриншоте). Представленные далее скриншоты относятся к MODX Revolution, однако принципы работы с шаблонами аналогичны и для MODX Evolution.
Откроется форма, которую нужно заполнить при создании шаблона.
Обязательно надо задать имя шаблона и вставить код из файла index.html. После этого нужно сохранить шаблон.
Для применения шаблона нужно открыть свойства документа в разделе Ресурсы.
Там можно выбрать необходимый шаблон из выпадающего списка.
Не забудьте сохранить изменения.
Однако, если мы посмотрим на результат своей работы, мы увидим, что шаблон отображается не совсем корректно.
Причина кроется в том, что не подключились таблицы стилей (CSS). Поэтому нам потребуется отредактировать код шаблона.
Снова открываем шаблон и прописываем между тегами <head> и </head> базовый путь для шаблона:
<base href="[[++site_url]]" />
В MODX Evolution вместо [[++site_url]] используйте [(site_url)].
Вторым шагом будет редактирование путей ко всем файлам стилей, изображений и скриптов, что вы найдёте в коде шаблона. Проще всего искать строки кода, содержащие src.
Так, если в коде у вас прописан путь к изображению
<img src="img/common/avatar.png">
то нужно добавить путь к каталогу шаблона (в моем случае /assets/templates/pure/, но каталог с шаблоном может называться и иначе). В результате получится
<img src="/assets/templates/pure/img/common/avatar.png">
Сохраните шаблон после редактирования, и дизайн сайта примет вид, задуманный разработчиками шаблона.
Статьи по теме: