Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Установка modx шаблона: Как установить шаблон на MODx. Детальная инструкция.

On

Установка modx шаблона: Как установить шаблон на MODx. Детальная инструкция.

By alexxlab

Содержание

Как установить шаблон на MODx. Детальная инструкция.

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

Отличительной особенностью является то, что для 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». Так вы сможете проверить, все ли элементы подключены.

После проделанной работы сохраняем наш шаблон «Главная» и идем на сайт смотреть на результат. Если вы сделали все правильно, вы должны увидеть следующую картину.

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

Подписывайтесь на обновления, чтобы ничего не пропустить.

Как установить шаблон в MODX

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

Шаблон представляет собой несколько файлов и папок, которые необходимо положить в специальный каталог на сайте.

Пример шаблона для MODX.

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

Далее необходимо зайти в административную панель MODX, перейти в раздел Элементы и нажать на кнопку добавления нового шаблона (на скриншоте). Представленные далее скриншоты относятся к MODX Revolution, однако принципы работы с шаблонами аналогичны и для MODX Evolution.

Создание нового шаблона в MODX.

Откроется форма, которую нужно заполнить при создании шаблона.

Обязательно надо задать имя шаблона и вставить код из файла 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">

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

Modx revolution установка шаблона – Тарифы на сотовую связь