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

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

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

Убрано верхнее меню. Полностью.

Вместо верхнего меню быстрые ссылки на создание элементов (чанки, сниппеты и т.д.)

Верхнее меню перенесено в левую часть. К дереву документов.

Переписан коллапс бокового меню.

Добавлены выпадающие списки для верхнего сайдбара и бокового меню.

Стало удобно работать с админкой на планшете.

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

Переписать стили для всех элементов в главном фрейме.

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

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

Добавить сетку для всех элементов админки.

Переписать большинство скриптов и вынести их в отдельный файл. Надоело обилие скриптов во фреймах.

Добавить js фреймворк для комфортной работы с полями и формами опционально. (Основные элементы формы останутся для поддержки модулей)

Вынести все стили из фреймов в отдельные файлы для каждого фрейма.

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

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

UPD от 23/02.

Сделано:

Дописан менеджерский индекс. Теперь он может подгружать экшены из папки темы.

Распиханы js и css файлы из главных фреймов. В качестве глобального контейнера для переменных JS используется window.globalVars. Это поможет убрать весь завязанный на PHP JS код в файлы. Работать с таким глобальным массивом можно даже через плейсхолдеры.

Обновлены все экшены (убраны все изображения, заменены на векторные иконки). Кое где всетаки еще попадаются картинки которые пропустил. Преимущественно в контекстных меню.

Причесан скрипт генерации нод (дерево ресурсов). Скрипт работает теперь с шаблонами. Шаблоны находятся в папке templates и начинаются с префикса node

Причесаны стили кнопок. Говорят что выглядит дешево хотя я отталкивался от цветов MODXa:(Буду рад услышать вашу цветовую гамму.

Добавлена фича для мобильных кнопок. Основная кнопка сохранения теперь является выпадающей. Выпадает по ховеру. На мобильных устройствах на кнопку необходимо кликнуть по "+ действие" для выбора поддействия и на галочку для повторного применения действия.

В экшен добавления/редактирования ресурса добавлен мобильный вид кнопок. Теперь на мобильниках эти кнопки состоят только из иконок.

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

Переписать большинство экшенов под работу в шаблонами.

Распихать весь js и css по соответствующим файлам. Большую часть переписать на jQuery.

Добавить фреймворк для элементов формы. Старые элементы оставить для совместимости со старыми версиями модулей.

Добавить сетку для всех экшенов.

Улучшить мобильный и планшетный виды.

Поправить баги какие вы найдете.

Кастомный индекс теперь лежит в паке. После распаковки вы можете найти его в папке 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) и новый внешний вид всех элементов форм. Дополнительно планируется добавить функционал сортировки табличных данных.

Сегодня мы с вами подберем подходящий дизайн в виде готовой 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.

Итоги

После установки CMS MODx, первым что нужно сделать: это создать тему . Конечно, можно воспользоваться демонстрационным шаблоном, добавив его при установке CMS,

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

Для этого перейдем в Админ панель/элементы/управление элементами/шаблоны. Здесь, имеется ссылка: Новый шаблон . Переходим по этой ссылке:

В этой вкладке, мы и будем создавать новый уникальный шаблон для сайта на CMS MODx.

Итак, мы имеем четыре поля для введения описания шаблона MODx:

• Поле имени шаблона. Так как мы создаем главную страницу назовите шаблон index_1 .
• Описание шаблона. Напишите краткое название Вашего сайта, у меня это будет: Лучшие бесплатные CMS интернета .
• Существующие категории. Здесь можно выбрать категории: Content, Demo Content, Login, Forms… Выбираем категорию Content .
• Поле новая категория. Оставляем это поле пустым.

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

Создание страницы при помощи программы FrontPage 2003.

Для написания HTML шаблона мы воспользуемся визуальным html-редактором для быстрого создания сайта и Web-страниц:

Итак, приступим к созданию страницы при помощи программы: FrontPage 2003 .
После установки и запуска программы, откройте вкладку: Файл/создать , у Вас появляется меню следующего вида:

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

• Конструктор - режим создания страницы режиме визуального конструктра.
• С разделением - режим создания страницы с разделением в одной половине экрана режим конструктора в другой половине режим кода HTML.
• Код - режим создания страницы, при помощи языка HTML.
• Просмотр - режим отображения страницы в браузере.

Для того, чтобы создать Веб-страницу, разложим создаваемую нами страницу на составные части:

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

Перейдем в режим: Конструктор и создаем в этом режиме, таблицы в соответствии с нарисованной нами структурой:

Отредактировать: размеры таблицы, фон, ширину границы, обтекание текстом и многое другое, можно при помощи вкладки: Таблица/Свойства таблицы/таблица:

После создания таблиц, заполним их соответствующим содержимым:

• Шапку страницы - изображением для шапки.
• Горизонтальное меню - ссылками на другие страницы сайта.
• Контент - статьями и изображениями.
• Вертикальное меню - ссылками на другие страницы сайта.
• Подвал страницы - счетчиками посещений и баннерами.

Выделим таблицу шапки, и при помощи вкладки: Вставка/Рисунок/Из файла… загрузим в таблицу заранее подготовленное изображение для шапки:

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

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

В появившемся меню добавления гиперссылок вводим адрес гиперссылки:

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

Для отображения в таблице «подвала», счетчика просмотров страницы, добавляем в таблицу Java - Script, с сервиса предоставляемого Яндексом.

После заполнения всех таблиц перейдите в режим просмотра страницы: Код . Копируем созданный в визуальном редакторе HTML - код и вставляем данный код в поле: Код шаблона (HTML) .

И не забудьте все изображения (картинки, шапки), нужно перенести на хостинг и заново в шаблоне прописать путь к изображениям. Обычно на сервере под графические файлы создают каталог под названием images . В таком случае путь к изображению у нас будет иметь http://ваш сайт /images/изображение.png - это только показательный пример, у Вас может быть по другому.

В поле: Имя шаблона вводим - Мой шаблон , а в поле: Описание - Лучшие бесплатные CMS интернета . Нажимаем клавишу: Сохранить . Вот мы и создали уникальный шаблон для CMS MODx.

Когда все подготовительные моменты закончены, перейдем непосредственно к тому, чтобы проанализировать скачанный шаблон, выделить в нем основные повторяющиеся части, такие как шапка, подвал, меню, левое меню, если оно есть, и натянуть их на CMS Modx. Ведь мы здесь и собрались для того, чтобы разобраться, как же получить бесплатный шаблон для Modx. Первым делом откройте шаблон Arbitrary , который мы скачивали в предыдущей статье и рассмотрите какие html файлы там есть. Для нас имеют значение файлы about, contact, gallery, index, services. Файл codes нас мало интересует, потому что содержит в себе различные типографские и функциональные единицы, к нему стоит обращаться по необходимости. Видим, что подвал, шапка и меню у страниц в основном одинаковое, отличается только главная страница, т.к. на ней под меню имеется слайдер, с нее и начнем.

В админке Modx переходим на вкладку Элементы-Шаблоны, видим шаблон BaseTemplate, переименовываем его в Главная. Оставляем содержимое шаблона вида:

[[$head]]




[[$header]]
[[$slider]]



[[$footer]]

[[$scripts]]

Именно такой код станет основой для будущего шаблона главной, разбила я его на такие составные элементы не просто так. Здесь отражены основные части, которые не меняются из страницы в страницу. Единственный специфичный элемент, присущий главной это слайдер. А теперь по порядку создадим каждый чанк и разберемся, что же он будет содержать в себе, и как адаптировать его содержимое для Modx. Надеюсь все знают, что чанк это html код, который может использоваться много раз на нашем сайта. Чтобы по несколько раз не копировать один и тот же код, такие чанки и создаются.

Оформление head в Modx. Как выделить head из шаблона сайта.

Начнем с чанка head. Предварительно создадим три TV поля для SEO, это поля seokeyw, seodesc и seoh1. Эти поля необходимы, для заполнения SEO информации о страницах нашего сайта. Расскажу на примере keyw, как создать поле, а далее по аналогии. Заходим Дополнительные поля-Новое дополнительное поле, имя seokeyw, подпись Keywords, параметры ввода оставляем по умолчанию Текст, доступно для шаблонов отмечаем Главная, других пока нет, но эти поля должны быть во всех видах шаблонов. Далее создаем оставшиеся 2 поля и для них категорию SEO, Дополнительные поля-Новая категория. Теперь у созданных полей отметим эту самую категорию.

Двигаемся дальше. Заходим Элементы-Чанки-Новый чанк. Имя head, далее копируем туда все, что содержит между тегами head из нашего скачанного шаблона. Но это еще не все, необходимо переписать пути к файлам, вынести скрипты в отдельный чанк scripts перед закрывающимся тегом body и приспособить title,keyword и description к Modx. Ко всем путям добавляем assets/, т.к. мы помним, что картинки, css и js заливали именно в эту папку. Затем добавляем конструкцию:

Она необходима для правильного отображения ссылок сайта и ЧПУ. Далее удаляем содержимое title и вставляем следующую конструкцию:

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]

Она означает, что, если значение longtitle пусто, то выводим pagetitle, в противном случае longtitle. Это стандартные поля Modx, которые есть у каждого ресурса. Надеюсь, все знают, что это за поля. Далее по аналогии вставляем конструкцию с участием уже созданных нами SEO полей, если их значения пусты, то будет выводиться стандартный заголовок страницы, если же заполнены, то новые данные.

Теперь вынесем все скрипты(кроме jquery.min.js, ведь это инициализация jquery) в новый чанк scripts, который расположен перед закрывающемся тегом body, это улучшает скорость загрузки страницы, ведь скрипты подтягиваются немного позже, а страница не будет долго "зависать" в неприглядном виде. В итоге получим содержимое чанка Head:

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]





addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }

А содержимое чанка Scripts:

new WOW().init();

Создание меню на MODX, шаблоны для пунктов меню.

Следующим этапом будет создание чанка header. По аналогии с чанком head создаем чанк и даем ему название header, затем копируем в него содержимое блока с классом header из нашего шаблона для Modx. В данном шаблоне в шапке отсутствую картинки, к которым нужно переписать пути, в логотипе содержится текст. Изменим содержимое этого логотипа на слово Test и в ссылку поставим слеш, это будет переход на главную. Следующим этапом будет созданием меню на Modx. Для этого можно использовать Wayfinder или pdoMenu, возьмем последний вариант. Для генерации простого меню, как в шаблоне, достаточно будет использовать весьма несложный вызов, но у нас есть определенный вид у пунктов меню, поэтому используем еще и шаблоны для оформления. И получим следующий код для вывода нашего меню:

[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE

[[+wrapper]]

`
&tpl=`@INLINE [[+menutitle]][[+wrapper]]`
&tplHere=`@INLINE

[[+menutitle]][[+wrapper]]

`
]]

Шаблоны в отдельные чанки не выносила для экономии времени, но это не воспрещается, потом в параметрах вызова нужно будет только прописать нужные названия чанков. Полная документация по PdoMenu доступна по ссылке , там очень много параметров для вывода, подойдут почти для любого случая, если будут вопросы, вы всегда можете обратиться за помощью . В итоге получаем содержимое чанка header:

Toggle navigation




Test

[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE

[[+wrapper]]

`
&tpl=`@INLINE [[+menutitle]][[+wrapper]]`
&tplHere=`@INLINE

[[+menutitle]][[+wrapper]]

`
]]

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

Дата публикации: 16.03.2017 .

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