Сегодня мы с вами подберем подходящий дизайн в виде готовой HTML-верстки для реализовываемого проекта. А также настроим вывод содержимого одиночных веб-страниц.

Немного о выборе верстки

Итак, в качестве исходного материала для создания шаблонов страниц Модэкса я выбрал верстку под названием «simplemagazine-01″ от TemplatesDock:

Как видите выше структура «simple magazine» полностью соответствует классическому блогу: две колонки, сверху главное меню, справа рубрики и иные вспомогательные элементы. Кроме того веб-дизайнер с HTML-верстальщиком проработали также и шаблон внутренней страницы, не обделив вниманием основные элементы типографики:

Фактически это то, что нам нужно для старта.

Скачать

Интеграция дизайна в MODX Revolution: шаблон одиночной страницы

Подготовка файлов

1. После авторизации на вашем сайте посредством встроенного файлового менеджера (см. вкладку Файлы дерева элементов справа) создайте новый каталог под названием templates в папке «assets», затем в этом новом ещё один, — назовите его «simplemagazine»:

2. В контекстном меню созданного каталога templates выберите пункт «Загрузить файлы», если предпочтете загружать файлы встроенными средствами…

Ну а я в целях экономии собственного времени просто загружу папки design, javascript и css в /assets/templates/simplemagazine . Отлично, необходимые файлы для будущих шаблонов страниц успешно разложены по своим местам. Далее приступим к собственно самому процессу интеграции.

Создание шаблона одиночной страницы

1. Перейдите на вкладку Ресурсы дерева элементов. Введите имя шаблона и его описание, в поле код вставьте полное содержимое файла «subpage.html», — делайте всё, как показано на снимке экрана, расположенном ниже:

2. Между тегов … добавьте базовую ссылку. Это необходимо для того, чтобы можно было посредством относительных ссылок переопределить пути до стилей и клиентских скриптов.

3. Теперь переопределяем пути до стилей и скриптов, заменяя пути на подобные нижеследующим. К примеру было в исходной разметке:

Принцип надеюсь понятен. Но если и этот пример для читателя пустой звук(!), тогда в срочном порядке рекомендую прочесть htmlbook.ru — о способах добавления стилей к странице. Тоже самое выполняете с включениями JavaScript.

Итоги

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

Отличительной особенностью является то, что для 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.

Вот как это сделал я.

После чего в верхнем правом углу жмем кнопку «Сохранить». И идем на сайт смотреть, что у нас получилось.

Как видите, структура сайта подключилась, стили и скрипты не подключены. Дело в том, что у нас поменялся путь ко всем этим файлам. Сейчас мы это исправим.

Для этого опять переходим в админ панель в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны» и нажимаем редактировать шаблон «Главная».

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

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

Маленькое отступление – на CMS MODx, придется много работать с кодом, поэтому советую вам поставить редактор Notepad++, он отлично подойдет для правки шаблонов.

Итак, для примера, если изображение в оригинальном шаблоне подключается вот таким образом.

То в MODx нужно изменить его на вот такую конструкцию.

То есть во всех путях добавляем приставку:

/assets/templates/retina/

Если вы называли папку шаблона по другому, то «retina» нужно изменить на ваше название.

Для облегчения работы можете использовать в редакторе Notepad++ поиск по слову «src». Так вы сможете проверить, все ли элементы подключены.

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

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

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

Приветствую вас уважаемые читатели! В предыдущих уроках мы произвели первичные настройки MODX, установили основные пакеты дополнений и настроили ЧПУ MODX. Теперь начинается самое интересное. Сегодня мы поговорим о том что такое MODX шаблоны и где их достать (скачать, заказать, купить).

Что такое MODX шаблон

MODx шаблон – это по сути обычный HTML/CSS/JS шаблон с прописанными внутри него тегами синтаксиса MODX для его лучшей динамичной функциональности. Так что если Вы не плохо разбираетесь в HTML/CSS, тогда интеграция обычного HTML/CSS шаблона в MODX не доставит проблем. Благодаря этой фишке MODX очень удобен для веб дизайнеров. Ну а теперь переходим к самому интересному.

Где брать шаблоны для modx

Здесь у нас три пути:

1. Нарисовать самому с нуля и сверстать, эксклюзив
2. Заказать у фрилансера или партнера, друга
3. Сделать самому из имеющихся шаблонов

Первый вариант подходит для веб-дизайнеров или хотя бы тех, кто в совершенстве владеет Adobe Photoshop и хорошо знает HTML и CSS.

Второй вариант подходит для вас если у вас туго с Adobe Photoshop и CSS, плюс данного варианта в том что вам не придется тратить свое время (на рисование, верстку и т.д.), но вам за то придется заплатить, и не факт что вам нарисуют и затем сверстают качественный шаблон. Вот сайты на которых вы, наверняка, найдёте исполнителя , , , так же можете обратиться с этим вопросом ко мне.

Ну и 3й вариант, подходит вам если вы хоть немного разбираетесь в HTML и CSS. Требует минимальных затрат и по времени не особо долго занимает (немного стилизировать по своему, внести небольшие правки и т.д. Для заказчиков с маленьким бюджетом, я обычно использовать именно этот вариант.

В рамках уроков размещаемых на данном блоге, я буду делать сайт с нуля согласно имеющегося у меня технического задания. Если вы просто учитесь создавать сайты на MODX, то скачайте сверстанный мною шаблон и эксперементируйте на нем (верску и как верстал можно найти в уроках по Bootstrap 4).

Кто хочет свой шаблон, то на всякий случай приведу перечень сайтов, где можно их скачать.

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

Хочу сразу заметить — не нужно думать, что шаблонные сайты – плохо. Нет!

Плохо – это когда на сайт вбухана куча «бабла» (уникальный авторский дизайн, самый дорогой выделенный сервер в Германии или Нидерландах, платный движок, типа «1С-Битрикс: Управление сайтом – Бизнес» за 60 000 р., нанят самый крутой «сеошник» с посекундной тарификацией, запущен Яндекс.Директ на 100 000 р. в лёгком режиме работы и т.д.), а результат нулевой! Вот это, действительно, плохо! Я бы сказал, из рук вон плохо!

Обращаю ваше внимание, что шаблон для будущего сайта необходимо выбирать с максимальным заделом на будущее. Что это значит? Сайт будет работать не год и не два с этим дизайном, а время не стоит на месте – меняются технологии. Поэтому глупо выбирать шаблоны младше 2014 года.

Табличная вёрстка – анахронизм!

Выбранный вами шаблон должен удовлетворять элементарным требованиям:

1. HTML5;
2. CSS3;
3. 100% адаптивный (responsive).

Для достижения последнего пункта обычно применяется самый распространенный, популярный и гибкий CSS фреймворк Twitter Bootstrap. Версии, желательно, выше 3.5. Сейчас уже 4 версия.

На сайтах представлены как чистые HTML шаблоны, так и шаблоны (темы) для различных CMS (WordPress, Joomla, Drupal). Причём, цена последних в разы дороже. Как вы уже догадались, для CMS MODX тематизированные шаблоны не имеют смысла. Если вы надумали купить один из шаблонов, то зачем переплачивать за специальный тематизированный шаблон, если можно купить на простом HTML совсем дёшево (допустим, за $15, т.е. около 550 руб.). К тому же, некоторые полностью одинаковые шаблоны продавец предлагает как CMS ориентированные, так и обычные HTML. Например, как отдельная тема для WordPress шаблон стоит $75, а в обычном HTML виде он же стоит $15.

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

С этим думаю разберетесь.

Modx шаблоны (модэкс)

В 2004 году была разработана профессиональная бесплатная система управления сайтом MODX (модэкс). Она является так же фреймворком для веб-приложений и обеспечивает контроль над контентом. Этой платформой можно пользоваться как в личных целях, так и в коммерческих.

С ее помощью создаются как обычные блоги, так и интернет-магазины. Выделяются следующие версии этой CMS: MODX Evolution и MODX Revolution. Первая является наиболее старой и ее функциональность значительно ниже, чем у следующей версии. Однако начинающие программисты чаще выбирают Evolution, так как в ней проще разобраться. Версия MODX Revolution на сегодняшний момент - самая новая. Она поддерживается разработчиками и рекомендуется для использования, если встал выбор какую из этих двух версий систем выбрать.

MODX шаблоны

Что представляет собой шаблон? Это простая сверстанная страница, обычный CSS шаблон и документ HTML и CSS, в котором используются теги данного шаблона. Профессиональные шаблоны для «модэкс» предлагаются в интернете на множестве ресурсов. Но не везде можно найти уже готовые решения для сайтов(это когда все страницы уже проработаны веб-дизайнерами и не приходится задумываться над их оформлением самостоятельно). Полноценные MODX шаблоны скачать можно бесплатно. Они детально проработаны и имеют уникальный дизайн, что играет большую роль при создании сайтов. А если есть время и желание сделать что-то особенное, то можно разработать свой собственный шаблон с неповторимым дизайном. Это сделает сайт более привлекательным для посетителей. При скачивании дополнений со сторонних ресурсов, следует быть внимательными, так как большинство сайтов, раздающих бесплатные приложения, являются вредоносными.

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

Что делать после того, как платформа установлена и выполнены первоначальные настройки системы? Нужно установить шаблон, который разработан самостоятельно или же скачан из интернета. Первый шаг этого процесса – перемещение файлов в папку сайта на сервере. Как правило, она называется Templates. В ней можно создать директорию с названием шаблона и уже туда скопировать папку с изображениями и файлы со стилями CSS. Затем следует перейти в панель администратора и выбрать раздел «Новый шаблон», который находится в меню «Элементы – управление элементами». Следующий шаг – заполнение формы. Для этого необходимо ввести название шаблона и его код, который располагается в отдельном текстовом файле. И не забыть сохранить изменения. Как видно, установка шаблона является процессом не таким сложным, как может показаться. Однако, часто случаются ошибки, и неопытные пользователи могут попасть в ситуацию, когда на сайте шаблон выглядит совершенно иначе, чем было задумано. Например, не срабатывают некоторые элементы. Чтобы этого избежать, нужно установить дополнительные плагины. А чтобы меню сайта выглядело точно таким же, как в шаблоне, следует внести изменения в настройках сниппета и в файле стилей CSS. Если появились «битые» ссылки, то также необходимо переписать их на относительные.

MODX шаблоны интернет магазина

Для создания сайта, на котором планируется совершать сделки купли-продажи, на данной платформе существуют специальные дополнения. Они позволяют конструировать интернет-магазин и настраивать компоненты по своему усмотрению. MODX Revolution шаблоны имеют настраиваемые скрипты, которые при установке дополнений подключаются автоматически. Все необходимые настройки интернет-магазина на «модэкс» можно сделать, потратив максимум 10 минут. С помощью этой мощной системы у каждого есть возможность научиться делать хороший сайт самостоятельно.

В этой статье рассмотрим такой элемент CMF MODX Revolution как шаблон.

Что такое шаблон?

Шаблон - это элемент MODX, представляющий собой заготовку, на основании которой может осуществляться вывод любого количества ресурсов. Для того чтобы шаблон использовался для вывода некоторого ресурса, он (шаблон) должен быть связан с ним (ресурсом).

Подключение шаблона к ресурсу осуществляется через поле "Шаблон".

После этого подключенный (выбранный) шаблон будет использоваться для вывода этого ресурса.

Понять назначение шаблона и то, как он связан с ресурсами очень просто, если представить шаблон домом, а ресурс человеком, живущим в этом доме. Дом, так же как и шаблон (страница) состоит из множества деталей (крыша - шапка страницы, стены – каркас страницы, основная часть фасада – основное содержимое страницы, подвал – нижняя часть страницы и т.д.).

Человек (ресурс) может иметь несколько домов (шаблонов), но жить в определённый момент способен только в одном из них. Через некоторое время, человек может переселиться жить в другой дом, это будет аналогичному тому, что ресурсу назначить другой шаблон.

Внимание: Каждый ресурс (страница) в MODX Revolution может использовать в качестве своего вывода только один шаблон. Т.е. MODX не разрешает для вывода ресурса одновременно использовать несколько шаблонов. Но в любое время ресурсу можно назначить другой шаблон. Для этого необходимо на странице редактирования ресурса выбрать нужное значение из раскрывающего списка "Шаблон" и нажать на кнопку "Сохранить". После этого вывод ресурса уже будет осуществляться на основании указанного (другого) шаблона.

Где находятся шаблоны в админке?

В админке (менеджере) шаблоны находятся на левой панели во вкладке "Элементы".

Шаблоны состоят из полей: имя, описание, иконка, код шаблона (html) и др.

Основные поля шаблона - это имя и код шаблона (HTML). Имя - это название шаблона. Код шаблона - это его содержимое, на основании которого и будет осуществляться вывод ресурса. Код шаблона в большинстве случаев представляет собой обычную HTML-страницу с наличием в ней специальных тегов MODX (полей ресурса, TV-переменных, чанков, плейсхолдеров, ссылок, системных переменных, вызовов сниппетов). Эти специальные теги и выполняют всю магию. Они выводят данные (значения любых полей) текущего ресурса, формируют динамическое меню страницы, а также любой другой контент, который может быть связан или нет с этим (текущим) ресурсом.

Создание шаблона

Создание шаблона в админке осуществляется посредством выполнения следующих шагов:

1. Нажать на значок "+" напротив заголовка "Шаблоны".
2. В поле имя ввести название шаблона (например, Шаблон1).
3. В поле код шаблона (HTML) ввести необходимое содержимое.
   Например:

   [[*longtitle]]

   ID (идентификатор) страницы: [[*id]]
   Аннотация (введение): [[*introtext]]
   Заголовок ресурса в меню: [[*menutitle]]

   ---

   [[*content]] Обратите внимание на специальные теги: [[*pagetitle]], [[*description]], [[*longtitle]] и др. Они обрабатываются парсером только тогда, когда браузер пользователя запросит у MODX ресурс, имеющий этот шаблон. Когда это случиться все специальные теги ([[*полеРесурса]]) будут заменены на значения соответствующих полей текущего (запрашиваемого) ресурса.
4. Сохранить шаблон посредством нажатия на соответствующую кнопку.

Внимание: После создания шаблон автоматически не назначается ресурсам. Указание шаблона определённым ресурсам производится через их редактирование. Т.е. необходимо будет произвести изменения в каждом ресурсе, а именно открыть ресурс, выбрать из раскрывающего списка созданный шаблон и нажать на кнопку "Сохранить".

Редактирование шаблона

Редактирование шаблона в админке осуществляется следующим образом:

1. Открыть в левой панели админки вкладку "Элементы".
2. Раскрыть содержимое раздела "Шаблоны", нажав на значок треугольника.
3. Нажать левой кнопкой мыши на название необходимого шаблона.
4. Внести изменения в необходимые поля шаблона.
5. Нажать на кнопку "Сохранить".

Где хранятся шаблоны?

Шаблоны MODX по умолчанию хранятся в таблице базы данных modx_site_templates (modx - это префикс для таблиц, назначаемый во время установки системы).

Начиная с версии MODX 2.2.x появилась также возможность хранить код шаблона в файле.

Чтобы это сделать необходимо на странице создания/редактирования шаблона выполнить следующее:

1. Установить галочку в поле "Статичный".
2. Выбрать из раскрывающего списка "Источник файлов для статичного файла" базовый каталог. Базовый каталог - это каталог относительно которого будет указываться расположение статичного файла.
3. Указать в поле "Статичный файл" расположение файла относительного базового каталога.
4. Нажать на кнопку "Сохранить".

После этого содержимое указанного файла будет использоваться в качестве кода шаблона.

Это возможность предназначено для того, чтобы код шаблона можно было изменять путём редактирования файла.

Использование полей ресурса в шаблоне

Получение значений полей ресурса в шаблоне осуществляется посредством следующего синтаксиса:

[[*имяПоля]]

Список доступных полей ресурса можно посмотреть . Например, вывести значение поля pagetitle текущего ресурса в тег title:

Например, вывести содержимое текущего ресурса:

[[*content]]

Теги, предназначенные для вывода значений полей ресурса, могут также как и другие теги MODX, иметь фильтры вывода. Например, выведем значение поля "introtext" в блок div с классом intro, используя 2 фильтра. Первый фильтр вывода будем использовать для исключения из содержимого поля introtext любых HTML-тегов. Второй фильтр будем использовать для того чтобы вводить на экран не всё содержимое этого поля, а только первые 200 символов. Если данное поле будет иметь большее количество символов, то в конце строчки отобразить знак многоточия (...).

TV-переменные в шаблонах

Если шаблон сравнивать с домом, то TV-переменные (переменные шаблона) можно представить как комнаты этого дома. Добавление TV-параметра - это получается как добавление новой комнаты в дом.

TV-переменные - это дополнительные поля, которые может иметь ресурс. Привязываются TV-поля к ресурсу через шаблон. MODX позволяет добавить к ресурсам бесконечное число дополнительных полей (TV-переменных) посредством шаблона.

Например, необходимо добавить ко всем ресурсам, имеющим шаблон "city", дополнительное поле photo. Чтобы это осуществить необходимо выполнить следующие действия:

1. Необходимо создать TV-переменную photo.
2. Установить этой переменной на соответствующих вкладках в качестве типа ввода и вывода необходимое значение. Например, изображение.
3. На вкладке "Доступно для шаблонов" установить галочку напротив шаблона "city".

После этого у ресурсов, имеющих шаблон "city" появится дополнительное поле.

Для того чтобы вывести значение поля (TV-параметра) city в шаблоне необходимо использовать следующую конструкцию:

[[*photo]]

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