Наверняка, те, кто уже работал с этой системой, знают, что на данный движок можно установить практически любой шаблон.
Отличительной особенностью является то, что для MODx используются самые обыкновенные html шаблоны, а их в интернете десятки тысяч экземпляров, да к тому же, большинство из них совершенно бесплатны. Так что если вы выбрали данный движок для своего проекта, то проблем с дизайном возникнуть не должно.
Так как эта серия уроков посвящена созданию сайта визитки на MODx, то шаблон я старался подбирать более современный, который был бы универсальный и легко затачивался под компании различных направлений.
Мы с вами будем разрабатывать сайт на основе шаблона Retina — Free Template от производителя – chocotemplates. Скачать его можно по этой ссылке – ссылка на шаблон.
Я выбрал бесплатную версию этого шаблона, но для ее использования нужно оставлять копирайт производителя. Но нам это не так важно. Главная задача – научится работать с шаблонами.
Архив включает в себя следующие файлы.
Index.html – этот файл нам не нужен, разработчики сделали его, чтобы демонстрировать работу шаблона на различных устройствах.
А папка «defaul» в свою очередь имеет вложение директории.
В папке «css» — хранятся стили и изображения, используемые в данной теме (папка «images»).
В папке «js» — содержатся файлы библиотеки jquery, а также скрипты подключения слайдера на главной странице сайта.
Файл home.html – основной файл html шаблона именно его мы и будем использовать.
Как вы видите, здесь нет готовых внутренних страниц, но я обязательно покажу вам как их добавить, в следующих уроках. А пока давайте разбираться с главной.
Непосредственная работа с движком MODx
После того, как вы разберетесь со структурой шаблона, можно приступать к работе с системой. Все шаблоны для MODx хранятся в папке /assets/templates/, именно туда нам и нужно залить папку с шаблоном. Директорию я назову «Retina». В эту папку заливаем все файлы которые находятся в директории «default». У вас должно получится следующее.
Теперь переходим в административную панель сайта в раздел и авторизуемся. Сделать это можно по адресу http://вашсайт.com/manager.
После авторизации вам нужно перейти в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны».
Сейчас там есть шаблон с демо данными, его мы трогать не будем, а чуть ниже размещен шаблон под именем – «Minimal Template». Именно его мы и будет начинать править.
Нажимаем на ссылку этого шаблона и переходим в раздел его редактирования. Этот шаблон мы назовем «Главная», так как в следующих уроках мы будем делать и несколько внутренних страниц с различной структурой.
Заполняем два поля:
- имя шаблона;
- описание.
Чуть ниже, в поле – «Код шаблона HTML», нужно вставить код страницы index.html, которая размещена у вас на сервере по адресу — /assets/templates/retina/home.html.
Вот как это сделал я.
После чего в верхнем правом углу жмем кнопку «Сохранить». И идем на сайт смотреть, что у нас получилось.
Как видите, структура сайта подключилась, стили и скрипты не подключены. Дело в том, что у нас поменялся путь ко всем этим файлам. Сейчас мы это исправим.
Для этого опять переходим в админ панель в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны» и нажимаем редактировать шаблон «Главная».
Для начала между тегами <head></head>, прописываем базовый путь для шаблона, делается это с помощью этого кода:
<base href="[(site_url)]" />
Также необходимо подправить все имеющиеся в коде пути к файлам: стилей, скриптов, изображений. Нужно внимательно проверит все элементы, для того чтобы шаблон подключился.
Маленькое отступление – на CMS MODx, придется много работать с кодом, поэтому советую вам поставить редактор Notepad++, он отлично подойдет для правки шаблонов.
Итак, для примера, если изображение в оригинальном шаблоне подключается вот таким образом.
<img src="css/images/mac-img.png" alt="" />
То в MODx нужно изменить его на вот такую конструкцию.
<img src="/assets/templates/retina/css/images/mac-img.png" alt="" />
То есть во всех путях добавляем приставку:
/assets/templates/retina/
Если вы называли папку шаблона по другому, то «retina» нужно изменить на ваше название.
Для облегчения работы можете использовать в редакторе Notepad++ поиск по слову «src». Так вы сможете проверить, все ли элементы подключены.
После проделанной работы сохраняем наш шаблон «Главная» и идем на сайт смотреть на результат. Если вы сделали все правильно, вы должны увидеть следующую картину.
На этом сегодня все, дизайн подключен, а вот все остальные элементы дизайна мы будем подтягивать в следующих уроках.
Подписывайтесь на обновления, чтобы ничего не пропустить.
У меня ни чего не вышло, после главной страницы сделал все как надо ни чего не произошло, сайт остался таким как и был(
Ваня, проверьте еще раз все внимательно, особенно пути к файлам стилей и изображений.
Спасибо! Всё получилось. Очень достойный урок, всё ясно и понятно. Мне было удобнее править index.html в notepad++ и только потом заливать на хостинг
Застрял, ещё в самом начале, там надо было зайти в Элементы, Управление элементами, а у меня только элементы, нет кнопки управление элементами, и вообще у меня в админке верхней панели нет как показано на рисунке !
Класс! Все просто и понятно. Никогда сам не пробовал делать сайты и все получилось с первого раза. Нужно просто внимательно просматривать код и исправлять пути к шаблону. Спасибо! Поехали дальше…