MagicThemes - управление темами для MODX Revo

Представляю Вашему вниманию пакет управление темами или мини-движок тем для MODX.
С его помощью можно управлять темой:
— Менять местами области, блоки, блоки в областях;
— Менять ширину размера сетки областей и блоков.
— Устанавливать фоновый цвет блока или изображение.
— Да и вообще — менять визуальное отображение блока до неузнаваемости.
— Настраивать параметры сниппета.
— Менять, вписывать значения классов и параметров для блока.
— Настраивать базовые цвета и прочие параметры в настройке темы.
— и много других полезных мелочей.
И все это можно делать не залезая в сам код. Неправда ли звучит интригующе?
Под капотом расскажу и покажу что же за решение получилось в итоге. Надеюсь будет интересно. Поехали…
.
Немного истории:
Это был для меня долгий, интересный, спорный, не простой путь к релизу альфа-версии мини-движка тем. До созревания идеи, точнее до момента понимания (хоть какого-то) что должно было получиться прошло пару лет, много дискуссий в телеграм-чате, на сайте modx.pro. Говорили и о том что это не нужно и что было бы хорошо и мы любим MODX таким какой он есть, захотел верстку html любую и сам сделал и т.п.
Года 2 назад начал задумываться о создании «чего-то», чтобы позволило делать темы. Как оно должно быть — еще представлялось смутно. Я заглядывал в WP — там как бы любимый файл function.php, где описывались всякие нюансы. ну и был осадок что как-то вроде темы ставишь — ок. А управлять нормально — ограничен что заложили в тему например хочется пошире блок сделать, но увы, нужно лезть в код, хочется еще чего-то — лезть в код… @iWatchYouFromAfar Не даст соврать про WP, что после установки темы надо прям быть в теме WP. (Его высказывания про темы modx, если кто не читал — можно для ознакомления: modx.pro/sites/20463) В общем, желания не было вникать (точнее было, пытался, но не шло совсем). Потом был опыт в 2019 году с Joomla. Посчастливилось очередной раз взглянуть внутрь че там и как. Было муторно и все мое естество сопротивлялось созданию на Joomla сайта, но я понимал что надо хотя бы 1 раз пройти этот ад — настройка платной темы (хотя потом понял что это был не ад совсем — просто первый раз это делал осознанно). И этот опыт позволил мне по-другому взглянуть на структуру и организацию будущего управления темой. Как следствие в конце 2020 продумал логику, а вначале 2021 года начал писать фронт на Vue. к лету 21го был готов некий прототип (vue + php) который я запустил на боевом сайте на свой страх и риск. Он оправдался. Сайт сейчас успешно работает. А я получил дополнительные данные, чтобы усовершенствовать проект. И еще на пол годика засел в свободное время на решение и доделки. Хотелось побыстрее, но как получилось.
В результате недавно отправил само дополнение и стартовую тему mtDemo в магазин modstore на модерацию, и его одобрили и опубликовали! Теперь Вы можете MagicThemes пощупать сами руками, установив его и демо темку. Не забудьте включить феном на страницах.

Реалии тем и риторический вопрос тем
Мой предложенный вариант работает на fenom. Суть.
Есть области в которых вы можете сконфигурировать сетку. Так же можно эту область оставить и без сетки (те без настроек только с названием). И потом к ней подключаются блоки (отдельный раздел меню — Штуковины). Я решил их назвать Штуковинами, потому что это что-то большее чем блоки. Ну и потом обычно штуковинами мы называем полезные штуки )))). Вот и тут Штуковина имеет много полезных настроек и в перспективе может расширяться.
В ней вы изначально выбираете тип использования, например Чанк или чанк-файл или просто текст. а далее открываются или не открываются настройки по данному типу.
Так вот, в чанках-файлах fenom существуют настройки заложенные создателем темы. Пока углубляться о них не буду, потому что создание, прям, самой новой темы для MODX на основе MagicThemes требует отдельного мануала для программистов, обычному человеку-менеджеру там делать нечего. Для него есть админка с клавой и мышкой ))
А вот для пользователей, если выбрали файловые штуковины, будет 4 вкладки:

вывод, где выбирается тип Штуковины и его зависимость от области, имя.
настройки сниппета (если в чанке-штуковине он используется),
Общие — там атрибуты, настройки различные типа — фоновое изображение или включить или выключить заголовок у блока, текст заголовка и т.п.
Стилизация (css различные и смежные с оформлением настройки).

Можно создавать и свои настройки, если прям необходимо. Особенно это касается сниппетов. Там это прям нужно, ведь вы захотите установить лимиты, условия и прочее…
Для текста и простых чанков настроек пока не предусмотрено.

Все крутиться на fenom и применяется простое решение с циклами и Include. Это позволяет многое намутить, например в шапке header, и оно будет доступно на всем сайте для штуковин.

Для работы темы mtDemo необходимо будет установить пару дополнений, которые являются зависимыми (pdoTools, magicThemes, phpTumbOn) Включить феном на страницах. Все желательно устанавливать на чистый modx.
Но можно и на уже рабочий, но нет смысла, тк. тема демонстрационная и предназначена лишь для демок. Но если кому захочется сделать себе мини-сайт со статьями на ней — пожалуйста.
Так же серьезной особенностью всего решения является то что Вы можете на нем создать сайт-конструктор. (машу рукой всяким сторонним конструкторам и прочей "нечести", думаю читатель понимает на что я намекаю).
Для разработчиков — теме можно использовать любые дополнения, платные или нет. Ведь они будут просто или жестко зависимы или не зависимы. Как? Вы просто подготавливаете папку, файлы для этого допа и в инструкции к теме описываете работу с этими нюансами.
Хотите чтобы ваши выпущенные темы были совместимы между собой? Пожалуйста! Эта вещь которая еще будет добавлена в будущих релизах. Точнее, описан процесс создания темы с этими условиями, тк данная тонкость регулируется больше темой при установке, а не magicThemes. Тут я просто предложу вариант решения проблемы выбора шаблонов, пере использования уже установленных шаблонов. Тут есть проблемы, но они решаемы.

Еще помимо областей и Штуковин есть Настройка темы.
Это отдельный пункт меню, в котором красуется выбранная тема, и соответствующие настройки этой темы.
Тему можно менять в 2 клика.) Вопрос будет только в том — будет ли новая тема совместима со старой. Как бы и все.
А настройки темы, как и системные настройки, доступны в плоскости как у пакета modx, например, вы можете в контекстах указывать название настройки с нужным значением.
Настройки сделаны в стиле смешения клиент-конфига и системных, но отличительной особенностью является частичная поддержка MIGX конфигураций (text,image) так же улучшенный ввод данных в select, где можно выбрать из выпадающего списка, а можно написать в ручную что нужно, colorpiker с предустановленными цветами.
И частичная по migx, потому что нет необходимости (пока) поддерживать БД и сложные вещи. Пока текстовый ввод, selec, images типы полей. (TV поля) не поддерживаются пока и migx в migx тоже нет.

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

Публичная Версия
Тестировал долго, основные ошибки устранены, возможно еще что-то есть.
Если будут предложения по усовершенствованию или замечены ошибки, то можно присылать их или в телеграму modx -там меня просто найти, (ссылку не даю чтобы не заспамили) или на гитхаб в конце статьи.
Работает админка на Vue 2, через процессоры для пакета. все стандартно.
Почему не ExtJs? Холивар не будем разводить, после Vue теперь понимаю его плюсы, но Vue мне зашел лучше. Ну и Vue на момент разработки я знал уже лучше да и cli меня ввел просто в экстаз (я догадывался что там хорошо, но когда сам попробуешь — это интереснее).

Планы
Как всегда много и разных. Например:
— Критический CSS, который так жаждет гуглСпид.
— Минификация CSS. Кстати, забыл сказать о том что тут стили подключаются ровно те которые использует тема для сайта. Те у каждой штуковины может быть зависимый CSS файл, который подключается автоматически и минифицируется при первой загрузке страницы. Поэтому критический CSS просто сделать.
— Админка для фронт-енда. Чтобы проще было редактировать сайт.
— и другие мелкие улучшения.

А как же Фред? и прочие инструменты?
Они не дают создать полноценную тему которой легко управлять. (я на самом деле не пробовал) но щупал.))
Да и я не вижу чтобы кто-то делал такие решения в плоскости тем. Видимо диалоги 2015 и 2019 лет — отбивали желание что-то делать. А от Фреда есть 1 тема и то не внятная. В русском сегменте тоже никто не развивал этот момент, значит им (тем кто разработал) это ненужно.
А так, некоторые пакеты могут просто дополнить уже созданную тему и в результате мы всем сообществом сможет восполнить пробел тем для MODX. Причем качественных тем как визуально так и по коду html.

Я больше оптимист и, надеюсь, это все позволит усилить конкуренцию, развитие и плюс привлечение новых умов.
Не стесняйтесь — пробуйте решение. Темы будут по-тиху выходить. А плюсики в карму поднимут программистский дух!
Летом, надеюсь получиться и подготовить документацию по детальному созданию темы (если конечно кому-то это нужно?).
На этом все. Продолжение следует…

P.S. От донатов не отказываюсь — они помогут лучше развивать опенсорс.

UDP 25.05.2022:
спасибо @Артур Шевченко и Павлу А. за тестирование. я уже придумал им небольшой подарочек, но пока это секрет :)
Ссылки:
1. Скачать MagicThemes 2 alfa
2. Скачать Демо-тема mtDemo 3 alfa
3. Пожелания тут или: GitHub MagicThemes
4. Видео: настройка-демонстрация. почти 30 минут.

UDP 06.02.2023. Реализованы темы:
Блог: modstore.pro/packages/sites-themes/mtblog
Интернет магазин или каталог: modstore.pro/packages/sites-themes/handyshop

Алексей Смирнов

22 апреля 2022, 14:53

1 503

+11

Поблагодарить автора Отправить деньги

Комментарии: 15

Александр Туниеков

01 мая 2022, 04:53

Походу темы для CMS дело не простое. Я програмист php и написать функционал мне просто, но я нефига не дизайнер и не верстальщик. Взять шаблон из инета и натянуть его могу, но то шаблоны не нравяться, то половины нужной верстки нет.
В общем мне бы пригодились темы для MODX, но с набором готовых красивых стилей, щелкнул 1 стиль — расцветка сайта одна, щелкнул другой цвета и оформление другое.
На мой взгляд, @Алексей Смирнов сделал темы для дизайнеров. В php разбираться не нужно, но в стилях и в дизайне нужно неплохую подготовку иметь, чтобы этими темами воспользоваться.
Второе, что не очень понятно по видео, как устроены штуковины. Хотелось бы чтоб был набор готовых стандартных блоков, к которым можно применить разные стили раз. Два это возможность вставлять их в разные места сайта без их дублирования. Три штуковину услуги можно было сделаль универсальной. Не только для услуг, но и для новостей, популярных товаров например.
В общем, мне эти темы не подходят, а чтоб подходили, думаю, надо их значительно доработать.
Я бы кстати поучаствовал. Только в vue не разбираюсь :-(

Алексей Смирнов

01 мая 2022, 10:51

Спасибо за ответ.
В общем все что вы говорите про функционал — это почти все есть в пакете. Другой вопрос, что я сделал Демо-тему чтобы показать устройство для простого пользователя, не программиста. От создателя темы будет зависеть набор готовых штуковин и их использование так или иначе.
Вы правильно заметили — создание темы дело длительное. Продукт только начинает свое существование, поэтому летом, надеюсь, я сделаю новые темы и описание для разработчиков по созданию тем. Процесс не быстрый, но идет.
А Штуковину для услуг можно применить и для новостей — просто указываете другой parent для снипета, параметры фотки (например, поменьше) и у вас готовы новости. хотите последние — укажите сортировку и лимит записей для снипета.

Александр Туниеков

01 мая 2022, 15:29

В общем все что вы говорите про функционал — это почти все есть в пакете.

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

Александр Туниеков

01 мая 2022, 16:08

Основных блоков же штук 40. Зачем их плодить для каждой темы?

Александр Туниеков

01 мая 2022, 16:12

А Штуковину для услуг можно применить и для новостей

А как одновременно и для услуг и для новостей?

Алексей Смирнов

01 мая 2022, 16:20

Создаётся новая штуковина, привязывается к нужной области, настраивается. И готово.

Александр Туниеков

01 мая 2022, 16:32

И затем будет куча штукови в которых ногу сломишь…
Скопировать штуковину можно?

Алексей Смирнов

01 мая 2022, 16:45

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

Misha Bulic

01 мая 2022, 09:05

Работа проделана большая, но это всё таки не движок тем, а большой кастомизированный шаблон. Движок тем это когда ты на сайт скачал тему и просто установил её и весь сайт поменялся, надоело тебе и ты скачал другую тему, установил её и сайт полностью поменялся. Чтобы это было возможно нужно стандартизировать чанки и шаблоны страниц, которые будут использовать все разработчики. Ведь так работают темы на wordpress. Но пока в документации не будет чёткой иерархии шаблонов и чанков, не будет и тем для Modx.

Алексей Смирнов

01 мая 2022, 11:04

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

Вы скорее всего не устанавливали само демо.
А так мое решение и работает — меняем темы — у нас новый сайт. Просто чтобы это было по щелчку необходимо:
1) Создатель темы должен предусмотреть максимальную совместимость по Областям и Штуковинам.
2) С моей стороны еще дополнительная возможность — менять (переключать) только папку темы, что будет дополнительным подспорьем для, например, дочерней темы. Т.е. области и штуковины останутся, а tpl шаблоны поменяются для этих областей.
3) В Joomla например чтобы поменять темы нужно много переделывать. там это боль. WP — там тоже можно поменять тему, но в чате спрашивал — все говорили что это боль тоже (я проверил на слово).
Поэтому то что я предлагаю для MODX — будет оно удачным решением или нет — покажет время и интерес сообщества.
Для разработчиков еще предстоит написать большой мануал, не без этого.
Просто скажу, что стандарт по чанкам — определяет разработчик темы. Захочет он ориентироваться на стандарт или нет — его выбор. То же самое касается самих шаблонов на сайте уже установленных. Я придумал один из вариантов стандартизировать, но опять таки — это все на совести разработчика тем. Мы в MODX и тут много свободы и выбор всегда есть. )

Misha Bulic

02 мая 2022, 09:13

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

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

Алексей Смирнов

02 мая 2022, 15:42

Сравнивать нужно аккуратно, тк архитектура систем управления немного разная.
Ориентировался я и на WP, и на Joomla, и даже, прости господи, на Битрикс.
Делать стандарт для MODX и прям в доке самого MODX, а не дополнения — не верная постановка задачи.
Потому что:
1) Система темизации MT полностью зависит от pdoTools, fenom. (это сторонний пакет)
2) Решение данное — это отдельный пакет. те по сути получается уже некая модульность.
3) Вы сами можете решить (в будущем) при создании нового сайта использовать готовое решение на базе MagicThemes или делать как привыкли.
4) При установке темы устанавливается, спрашиваются необходимые для работы темы — Пакеты, которые поставить (зависимости). Что вполне в рамках MODX.
И я в статье написал, и еще раз повторюсь:
Полную документацию и принцип работы я напишу конечно, но позже. Сейчас альфа релиз который призван помочь понять мне (востребованность, актуальность, возмущенность, недовольство и прочее...) и окружающим людям (увидели что-то новое, нужно ли оно мне, а зачем, а что… и т.д.).
Потому что разговоров за последние 7...8 лет было много, а реализации тем для MODX я не видел чтобы кто-то реально предлагал.
Вот я предлагаю реализацию. Пока я демонстрирую результат и возможности (пока, согласен, тухленько демонстрирую) но хотя бы есть что показать.
так что я вас в любом случае услышал и болячки понял.
если еще будут советы — я только рад делать доп лучше и мощнее… чтобы не смотрелось на других «девах». )))))

Алексей Смирнов

25 мая 2022, 00:08

Пакет MagicThemes обновлен до версии alpha2.
Исправлена работа с БД и проверка на наличие MIGX конфигов.
Вместе с движком исправлена и тема mtDemo — альфа3.
Исправления приличные и заставляют пакеты работать еще лучше.
Спасибо Вам за тестирование!

Алексей Смирнов

06 февраля 2023, 12:07

На данный момент уже есть 2 темы, успешно работающие на базе magicThemes.
Посмотреть и купить можно тут:
Интернет магазин или каталог: modstore.pro/packages/sites-themes/handyshop
Блог: modstore.pro/packages/sites-themes/mtblog

Алексей Смирнов

07 февраля 2023, 17:28

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Здесь упомянуты:

Компонент	Текущая версия	Закачки
MagicThemes	1.0.0-pl3 от 07.02.2023	55
mtDemo	1.0.0-alpha3 от 24.05.2022	50
pdoTools	2.13.2-pl от 02.09.2021	53 741
mtBlog	1.0.3-pl от 17.11.2023	10
handyShop	1.0.0-pl1 от 11.03.2023	14