Главная › Тарифы › Готовые шаблоны для modx. Шаблоны для CMS MODx. Создаем шаблон главной страницы

Готовые шаблоны для modx. Шаблоны для CMS MODx. Создаем шаблон главной страницы

MODX ,

PHP

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

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

Модуль - это приложение, основанное на архитектуре MODX и расширяющее возможности системы управления. Модуль может группировать набор элементов (сниппеты, чанки, данные), реализуя принцип инкапсуляции через разделение интерфейса и реализации.
Если говорить конкретнее, то с помощью модулей вы можете создавать надстройки со своими интерфейсами, например для массового редактирования документов или для управления интернет магазином, которые будут удобны пользователю.Создание нового модуля Создание модуля довольно очевидно. Просто перейдите во вкладку модули->управление модулями и в правом верхнем углу нажмите кнопку новый модуль, далее заполните все необходимые вам поля и кнопку сохранить, с этим я уверен ни у кого проблем возникнуть не может. После того как вы сохранили модуль он появится во вкладке модулей.Код модуля Создание модулей - это здорово, но иногда у нас возникает странное желание чтобы этот модуль что-то делал… За все то что делает модуль отвечает поле код модуля, в нем просто пишется тот php код который будет исполнен как только вы войдете в свой модуль. Обратите внимание здесь нельзя использовать открывающий и закрывающий тег , так что если вы хотите вывести какой-то html код, будьте готовы писать выводить его через стандартный поток echo или делайте reqiure на файл, в котором этот код будет в более удобном виде. Я разумеется рекомендую остановиться на вынесении кода в отдельные файлы. Традиционно файлы модуля лежат в директории "/assets/modules/{Название модуля}", так что создайте в этой директории соответствующую папку и сошлитесь в коде модуля на нее.

// Так как вам доступны все константы и классы modx используйте MODX_BASE_PATH require_once(MODX_BASE_PATH."assets/modules/newmodule/index.php");
Все теперь этот код будет исполняться при запуске вашего модуля.

Теперь давайте попробуем сделать что-нибудь полезное, например выведем в одном месте все документы с определенным шаблоном, это удобно например в тех случаях когда у вас на сайте много товаров, и они разбросаны по категориям. Для этого мы можем использовать функции самого modx или например через метод $modx->runSnippet получить все документы через всеми эволюционерами любимый Ditto, короче говоря полная свобода действий. Но мы для начала остановимся на чем-то очень простом и просто получим эти документы через обертку для работы с базой данный $modx->db.

// Не самый правильный, но быстрый и понятный способ вывести документы с ссылкой на самих себя $docs = $modx->db->query("SELECT id, pagetitle FROM modx_site_content WHERE template="8"")->fetch_all(); foreach($docs as $doc){ $docId = $doc; $docTitle = $doc; echo "

$docTitle

"; }
Теперь если мы перейдем в модуль увидим не самые красивые, но все же сслыки на все документы с id = 8.

Но как же нам быть если, мы не хотим каждый лезть в код и писать там id шаблона?

Конфигурации в MODX Для настройки переменных для нашего приложения в плагинах и модулях есть так называемые конфигурации, в них вы можете задать сколько угодно переменных с различными типами ввода, которые будут доступны как определенные переменные в коде. Настраиваются конфигурации во вкладке свойства в виде JSON массива и затем после сохранения автоматически преобразуются в красивую табличку на странице конфигурации. Вот пример заполнения вкладки свойства.

{ "card_template": [ { "label": "Карточка товара", "type": "string", "default": "", "desc": "id шаблона карточки товара" } ], "price_tv": [ { "label": "Цена", "type": "string", "default": "", "desc": "id tv параметра отвечающего за цену" } ] }
Здесь вопросов тоже быть не должно. После этого мы можем перестроить наш код так чтобы id шаблона было взято из этой переменной с именем $card_template .

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

AndyShop Название модуля tpResources = new WebFXTabPane(document.getElementById("andyShopPane"), true); Товары tpResources.addTabPage(document.getElementById("Products")); Заказы tpResources.addTabPage(document.getElementById("Orders"));

Ну вот, теперь у нас получается вполне лаконичная страница, которую можно показать клиенту.

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

Во первых благодаря своему более очевидному синтаксису и отсутствию многих перегружающих интерфейс инструментов. Во вторых благодаря тому что с выходом версии 1.2 от декабря 2016 он стал поставляться с приятной для пользователя темой. Ну и в третьих админ панель Evolution ощущается реально быстрее Revo. Что же касается комьюнити и широкого спектра готовых решений, тут безусловно побеждает молодой боец.

Заключение Для MODX Evolution существует великое множество полезных модулей, таких как shopkeeper или Doc Manager, но большинство из них либо требует значительной доработки, либо совсем не подходит для решения вашей задачи, надеюсь эта статья немного прояснит вам процесс работы с модулями. Мне какой-то такой заметки сильно не хватало когда я только начинал работать с этим CMF. Если у вас остались какие-то вопросы, я с радостью на них отвечу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нажать на значок "+" напротив заголовка "Шаблоны".

В поле имя ввести название шаблона (например, Шаблон1).

В поле код шаблона (HTML) ввести необходимое содержимое.
Например: [[*pagetitle]] [[*longtitle]] ID (идентификатор) страницы: [[*id]]
Аннотация (введение): [[*introtext]]
Заголовок ресурса в меню: [[*menutitle]] [[*content]] Обратите внимание на специальные теги: [[*pagetitle]], [[*description]], [[*longtitle]] и др. Они обрабатываются парсером только тогда, когда браузер пользователя запросит у MODX ресурс, имеющий этот шаблон. Когда это случиться все специальные теги ([[*полеРесурса]]) будут заменены на значения соответствующих полей текущего (запрашиваемого) ресурса.

Сохранить шаблон посредством нажатия на соответствующую кнопку.

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

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

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

Открыть в левой панели админки вкладку "Элементы".

Раскрыть содержимое раздела "Шаблоны", нажав на значок треугольника.

Нажать левой кнопкой мыши на название необходимого шаблона.

Внести изменения в необходимые поля шаблона.

Нажать на кнопку "Сохранить".

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

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

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

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

Установить галочку в поле "Статичный".

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

Указать в поле "Статичный файл" расположение файла относительного базового каталога.

Нажать на кнопку "Сохранить".

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

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

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

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

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

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

[[*pagetitle]]

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

[[*content]]

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

[[*introtext:stripTags:ellipsis=`200`]]

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

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

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

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

Необходимо создать TV-переменную photo.

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

На вкладке "Доступно для шаблонов" установить галочку напротив шаблона "city".

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

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

[[*photo]]

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

CMS MODX является дружелюбной системой для разработчиков, так как она представляет собой заслуживающий доверия CMF (Content Management Framework ). Примечательно, что MODX также подходит для дизайнеров:

1. WanChai

WanChai является MODX темой для адаптивного одностраничного портфолио, построенного на Bootstrap 3 с чистым и современным дизайном. Она имеет настраиваемую секцию портфолио с расширяющимся просмотром и CSS3 анимацией при пролистывании:

2. STYZO

Основанный на сетках () одностраничный адаптивный CMS MODX шаблон для цифрового агентства, фотостудии, малого бизнеса или фрилансеров. Возможности STYZO включают в себя корректный код HTML5 и CSS3 , полную кастомизацию в системе MODX , собственные анимации, настраиваемое портфолио, плагин Cube Portfolio , AjaxForm , блог, прейскурант и плагин JQuery Cycle :

3. Booom

Глянцевый, красочный, радующий глаз одностраничный дизайн, обрабатывающий большую часть переменных шаблона MODX и параметры темы. Построенная на основе Bootstrap 3.0 и разработанная с помощью LESS , эта тема снабжена набором опций, который позволяет контролировать каждый аспект сайта со стороны сервера:

4. Clib Cube

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

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

ClubCube является основанным на сетке (Twitter Bootstrap Grid System ), адаптивным HTML5 шаблоном. Он позволяет реализовывать функционал, который будет:

сообщать о событиях;
публиковать фотоотчеты;
выполнять бронирование;
просматривать меню:

5. Neat

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

6. Colors

Тема имеет 3 шаблона, настраиваемые поля для изображений, файлы css/js/image и упакована в transport.zip . Поддерживает меню Wayfinder и Formlt для фрагментов формы обратной связи. В теме есть два меню: первое – это меню прокрутки для одностраничного сайта, а второе – для многостраничного (сниппет Formlt ):

7. MongKok

Является современной одностраничной анкетной/персональной темой для MODX CMS CMF , построенной на Bootstrap 3 с большим количеством опций для настройки. В ней есть раздел резюме с чистой разметкой и анимированными графиками, секция портфолио и раздел каталога. Вместе со сниппетами, которые поставляются с шаблоном, легко создавать собственный контент, который согласуется со стилем темы:

8. Tredd Studio

TREDD STUDIO представляет собой одностраничный адаптивный MODX шаблон на основе сетки (Twitter Bootstrap Grid System ) для цифрового агентства, фотостудии, малого бизнеса или фрилансеров. Возможности TREDD STUDIO включают в себя: корректный код HTML5 и CSS3 , полную настройку в системе MODX , настраиваемое портфолио, прейскурант, плагин JQuery Cycle :

9. Da porto

Основанный на сетке (Twitter Bootstrap Grid System ) одностраничный адаптивный CMS MODX evolution шаблон для музыки и музыкальных групп. Он включает в себя отличные функции и графику:

10. Duality

В теме есть настраиваемые поля для изображений и в разделе портфолио, и в разделе команды, контактная форма Formlt и поддержка меню Wayfinder . Эта тема отлично подходит для сайтов-портфолио, целевых страниц, веб-приложений и презентации творческих организаций. Уникальные функции и современный дизайн. Лучше всего подходит для стартапов:

11. Superawesome

Многофункциональная одностраничная MODX тема для целевой страницы приложения или демонстрации продукта.

Построена с помощью фреймворка Bootstrap 3 , который включает в себя адаптивную, ориентированную на мобильные устройства, систему сеток. Соответствующим образом она масштабируется до 12 колонок по мере увеличения размера окна просмотра:

12. Flatdown

Является чистой, плоской, стильной CMS MODX темой «сайта в разработке » с работающей формой подписки на новости для формирования аудитории. С помощью панели настроек темы MODX можно настроить почти любой аспект новой страницы. Смотрите скриншот ниже:

13. Crostini

Современная адаптивная одностраничная MODX тема для портфолио. Она подойдет для любого вида бизнеса, которому необходимо продемонстрировать свое портфолио.

Быстрая загрузка

Главные файлы и изображения загружаются первыми (экран загрузки ), затем идут миниатюры (загружена страница ) и после этого большие изображения портфолио (страница полностью загружена ).

Полностью адаптивный дизайн

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

14. Light

Состоит из одного шаблона, настраиваемых полей для большей части контента, css/js/image файлов и упакован в файл transport.zip . Поддерживает сниппеты Wayfinder и Formlt (меню и форма контактов ):

15. Base

Это полностью адаптивная CMS MODX тема с чистым и минималистичным дизайном, который подходит для любого вида творческого и коммерческого использования. Base оптимизирована под мобильные устройства и персональные компьютеры, построена на основе фреймворка Bootstrap 3 .

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

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

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

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

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

Нарисовать самому с нуля и сверстать, эксклюзив

Заказать у фрилансера или партнера, друга

Сделать самому из имеющихся шаблонов

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

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

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

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

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

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

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

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

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

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

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

HTML5;

CSS3;

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 шаблона.

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