В рамках данных уроков мы будем создавать сайт-визитку, для этого нам необходимо будет подобрать определенный шаблон сайта. Как я говорил ранее, MODx учень удобная система в плане интеграции дизайна и для нее подходит любой HTML и CSS шаблон.

Я для себя уже нашел шаблон, он вам понадобится для уроков. Хотя вы можете выбрать любой другой, я думаю разобраться после уроков, труда не составит. По той же ссылке вы сможете выбрать любой другой, по мне там весьма привлекательные шаблоны и довольно качественные. В дальнейшем, я наверняка сделаю качественную подборку шаблонов для MODx.

Скачайте архив с шаблоном и распакуйте его, в архиве будет 3 папки и файлы:

В папке images находятся типовые изображения для шаблона. В папке scripts находятся JQuery скрипты, а в папке styles файлы с CSS стилями. В корневой папке находятся файлы с HTML разметкой. Файл index.html - это сверстанный шаблон главной страницы, full-width.html - внутренняя страница и style-demo.html - это типовая страница, которая показывает, как отображаются отдельные элементы страницы (заголовки, таблицы, комментарии, списки и так далее). Скопируйте содержимое архива на локальный сервер в папку Z:/home/site/www/assets/templates/ваш_сайт, создайте директорию для файлов «ваш_сайт».

Теперь мы можем приступить к созданию шаблона сайта, для этого авторизуемся в административной панели сайта (набираем в браузере http://«имя сайта»/manager), вводим логин и пароль.

Переходим по следующим вкладкам: Элементы-Управление элементами-Шаблоны. На этой вкладке мы будем работать с нашими шаблонами. Если вы обратили внимание, то у нас уже есть 2 шаблона: MODxHost и Minimal Template. Вы можете удалить шаблон MODxHost, он нам не нужен, шаблон Minimal Template установлен в наших настройках по умолчанию. Его мы и будем редактировать.

Чтобы удалить шаблон, кликните на шаблон, а затем нажмите на кнопку «удалить».

Для редактирования шаблона, также кликаем на название шаблона, мы переходим в режим редактирования.

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

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

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

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

Я писал ранее, что для работы нам понадобится текстовый редактор, если вы его не установили, то откройте файл index.html нашего шаблона в обычном блокноте. То, что вы увидите это HTML разметка нашей главной страницы.

Скопируйте содержимое файла, открой те шаблон Minimal Template в режиме редактирования, и замените код шаблона. Введите в пути браузера http://site, вы увидите, что ваш сайт уже изменился, но не так как бы мы хотели. Это произошло, потому что наши пути в шаблоне не соответствуют реальным.

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

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

< base href="[ (site_url)]" />

Если вы помните мы сохранили файлы нашего шаблона в папку /assets/templates/«имя сайта»/, поэтому нам необходимо изменить все пути.

Для примера, сейчас у нас прописаны следующие пути:

< link rel="stylesheet" href="styles/layout.css" type="text/css" />

Нам нужно изменить на:

< link rel="stylesheet" href="assets/templates/site/css/style.css" type="text/css" media="all" />

Тоже самое касается скриптов:

< script type="text/javascript" src="assets/templates/site/js/jquery-1.4.2.min.js"> < /script>

А также изображений:

< img src="assets/templates/site/images/demo/100x100.gif" alt="" />

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

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

Вы должны увидеть сайт, как в демо версии шаблона.

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

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

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

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

MODX шаблоны

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

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

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

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

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

Всем привет. Решил выйти из ридонли.
Не для кого не секрет что админка Evo устарела еще 10 лет назад. По сему нужно что-то делать для комфортной работы с админкой на планшетах и мобилках. За день на коленке был собран новый шаблон для админки который по своему принципу очень похож на админку WordPress (да и по дизайну почти слизан с нее). Просьба не кидаться тапками, мол фу, WordPress… Админка у них явно удобней и выглядит лучше чем у нашего любимого Evo.

Сам шаблон сделан на основе дефолтной темы от Dmi3yy и взял из нее только лучшее. Шаблон работает с версии 1.1RC. Если вы обладатель более старой версии, вы можете поменять файл /manager/index.php на кастомный в своем MODx и все будет работать.

Основные отличия от остальных тем:

1. Убрано верхнее меню. Полностью.
2. Вместо верхнего меню быстрые ссылки на создание элементов (чанки, сниппеты и т.д.)
3. Верхнее меню перенесено в левую часть. К дереву документов.
4. Переписан коллапс бокового меню.
5. Добавлены выпадающие списки для верхнего сайдбара и бокового меню.
6. Стало удобно работать с админкой на планшете.

Что планируется

1. Переписать стили для всех элементов в главном фрейме.
2. Добавить поддержку кастомных экшнов, без внесения изменений в оригинальные.
3. Переписать большинство экшнов и сделать к ним шаблоны. (разделить логику и представление)
4. Добавить сетку для всех элементов админки.
5. Переписать большинство скриптов и вынести их в отдельный файл. Надоело обилие скриптов во фреймах.
6. Добавить js фреймворк для комфортной работы с полями и формами опционально. (Основные элементы формы останутся для поддержки модулей)
7. Вынести все стили из фреймов в отдельные файлы для каждого фрейма.

Скачать кастомный index.php для manager вы можете в этом гите . Скачать шаблон вы можете вот по этой ссылке .
Сделал гит.

Шаблон закинул в репозиторий можно установить через него когда пройдет модерацию или скачать архив, распаковать и перекинуть все из папки MODxPress-master в корень сайта.

UPD от 23/02.

Сделано:

1. Дописан менеджерский индекс. Теперь он может подгружать экшены из папки темы.
2. Распиханы js и css файлы из главных фреймов. В качестве глобального контейнера для переменных JS используется window.globalVars. Это поможет убрать весь завязанный на PHP JS код в файлы. Работать с таким глобальным массивом можно даже через плейсхолдеры.
3. Обновлены все экшены (убраны все изображения, заменены на векторные иконки). Кое где всетаки еще попадаются картинки которые пропустил. Преимущественно в контекстных меню.
4. Причесан скрипт генерации нод (дерево ресурсов). Скрипт работает теперь с шаблонами. Шаблоны находятся в папке templates и начинаются с префикса node
5. Причесаны стили кнопок. Говорят что выглядит дешево хотя я отталкивался от цветов MODXa:(Буду рад услышать вашу цветовую гамму.
6. Добавлена фича для мобильных кнопок. Основная кнопка сохранения теперь является выпадающей. Выпадает по ховеру. На мобильных устройствах на кнопку необходимо кликнуть по "+ действие" для выбора поддействия и на галочку для повторного применения действия.
7. В экшен добавления/редактирования ресурса добавлен мобильный вид кнопок. Теперь на мобильниках эти кнопки состоят только из иконок.

Планируется:

1. Переписать большинство экшенов под работу в шаблонами.
2. Распихать весь js и css по соответствующим файлам. Большую часть переписать на jQuery.
3. Добавить фреймворк для элементов формы. Старые элементы оставить для совместимости со старыми версиями модулей.
4. Добавить сетку для всех экшенов.
5. Улучшить мобильный и планшетный виды.
6. Поправить баги какие вы найдете.

Кастомный индекс теперь лежит в паке. После распаковки вы можете найти его в папке manager. Файл называется index-new.php. Перед заменой сохраните старый индекс. (хотя новый поддерживает работу со старыми шаблонами)

UPD от 24/02

Причесал все фреймы. Раскидал стили и скрипты по файлам и папкам. Перенес файл генерации меню в папку инклюдов, так логичней. header.inc.php и footer.inc.php добавлены в основной пак и подгружаются из папки includes темы. По фреймам осталось только перевести их в шаблонный вид и с ними закончено, больше я их трогать не буду. Если только не потребуется ввести пару новых эвентов.
Добавил выпадающую кнопку во все экшены элементов. Появилась небольшая бага с воркером (нотификатор о состоянии работы в шапке) но на полноценную работу это не влияет.
Архив перезалит.

UPD от 01/03

Принято решение интегрировать фичу похожую на плагин TreeTabs в тему. Ну или сам TreeTabs, пока еще не решил. В качестве исходного парсера выбран QB ввиду легкости интеграции. При переносе всех наработок в ядро будет использован Twig. На этом пока все. Следующий апдейт будет под версией 1.1 и будет содержать первые 2 экшена переписаные под шаблоны (mutate_content и mutate_settings) и новый внешний вид всех элементов форм. Дополнительно планируется добавить функционал сортировки табличных данных.

Приветствую вас уважаемые читатели! В предыдущих уроках мы произвели первичные настройки 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 шаблона.

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

В этой статье рассмотрим такой элемент 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-параметры не отображаются, значит, они не были назначены шаблону, который этот ресурс использует.