Релиз MF 9 (октябрь 2020)

01-10-2020Время чтения ~ 7 мин.Шаблоны для MaxSite CMS 5268

Долгожданный релиз MF, который по праву может претендовать на совершенно новую версию шаблона. С прошлой версии прошло более полугода. Я планировал выпустить две летние версии, но поскольку принял решение отказаться от Bootstrap, то это привело к задержке выпуска: нужно было доработать Berry CSS и только после этого обновить MF.

Работы было очень много, но думаю, что оно того стоило. Переход на Berry CSS позволил существенно расширить возможности MF, поскольку между ними есть 100% совместимость. Кроме того, я решил несколько сложных технических задач, например темизация шаблона (смена дизайна). Эта вообще была изначальная задумка шаблона MF, которую никак не получалось реализовать. Кроме этого есть много других изменений.

Начнём-с по порядку. :-)

(Внимание, дальше много картинок!)

Отказ от Bootstrap и переход на Berry 3

Это ключевой момент. Я уже об этом писал и здесь, и в телеграм-канале: не вижу смысла опираться на этот фреймворк. Поэтому несколько месяцев я потратил на Berry CSS, чтобы сделать в нём полноценную и качественную типографику, современную поддержку CSS3/4, а также документацию и многочисленные примеры.

Задумка в том, чтобы добавлять к Berry новые блоки, которые будет достаточно просто скопировать. Естественно все они автоматом доступны в MF. Технически они реализованы в виде отдельных файлов, которые готовы для использования в MF.

То есть получилось так, что все те модули, которые я делал в MF делятся на две большие группы. Первая — это стандартные юниты MaxSite CMS, которые формируют код динамически. Это вывод записей, рубрик и т.д.

Вторая группа — по сути статический html-код. В нём требуется лишь поправить lorem-тексты и всё. В процессе работы с MF, выяснилось, что именно такие файлы самые многочисленные. Для сайта нужно предложить как можно больше вариантов дизайна с разным оформлением, чтобы админ мог просто выбрать подходящий и поправить тексты не выходя из админки. Вот эту задачу удалось реализовать из-за перехода на Berry CSS.

Собственный шрифт MF

Традиционно мы используем шрифт FontAwesome 4/5. Он всем хорош, кроме своего размера. Неудивительно — это почти 1600 иконок. На практике это приводит либо к задержке отображения страницы (если подключения в секции HEAD), либо к миганию иконок (lazy-загрузка). К сожалению никаких возможностей на это повлиять не существует просто из-за большого трафика.

Поэтому я решил сделать собственный шрифт на основе FontAwesome 5, куда отобрал 222 иконки. В основном это служебные символы: иконки, соц.сети и т.д., то есть то, что встречается в 90% случаев. Размер шрифта оказался очень небольшим — примерно 19Кб woff2-файла + примерно 1Кб gzip-трафика на CSS. То есть шрифт загружается почти мгновенно и больше нет «мигающих» иконок.

В отличие от FontAwesome 5, я сделал единый класс для иконки. Полный список доступен в документации MF.

Следует наверное отметить и то, что svg-иконки из FontAwesome 5 я также добавил в комплект MF. То есть, если где-то требуется разместить одну-две иконки, то можно не подключать css-профиль шрифта, а использовать их полные аналоги — svg-изображения.

Темизация

Вот это наверное, самая крутое, что теперь есть в MF. :-)

Раньше шаблон всегда был в одном цветовом решении. Чтобы сменить дефолтный синий на, скажем, зелёный, требовалось менять не только css/scss-файлы, но и многочисленные файлы с html-разметкой.

После того, как я реализовал полноценную поддержку Material Design в Berry CSS, в MF добавил возможность смены дизайна без переделок файлов. Пока основной дизайн — это «default», а два дополнительных «red» и «green» пока в тестовом режиме.

Теперь, если нужен MF в зелёных тонах, то достаточно лишь выбрать дизайн в админ-панели. Ниже три скриншота одного и того же модуля price. Я также «захватил» и одну из шапок — Material Design работает почти во всех блоках MF.

Вот ещё пример смены дизайна для компонента шапки.

Меню

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

Теперь в MF всего 2 типа меню. Первое рассчитано на тёмный фон, второе на светлый (alt). Дальше меню само «подстраивается» под текущий дизайн.

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

Также для меню я изменил адаптивность. У компонентов теперь есть возможность подстраивать меню под себя. Визуально кнопка меню выглядит немого по другому. Вот пример компонента header-menu1 и header1.

Компоненты шапки

Все компоненты были переписаны. Компоненты header1 (и аналогичные) я разделил на части, так чтобы теперь header1 отвечал только за вывод шапки, а header-menu1(2) отвечали за вывод меню и дополнительных блоков. Это позволяет комбинировать меню с разными компонентами. Ниже варианты шапок.

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

Подвал. Компонент Modules

Традиционно подвал настраивался через компоненты Cols, но в этой версии он полностью удалён, поскольку он по факту повторяет функционал модулей юнитов. Поэтому все подвалы были перенесены в модуль footer.

Чтобы подключать модули (в modules или store) в виде компонентов, я создан новый компонент Module1/2. В нём можно указать имя модуля и его параметры (если нужно). Вот так например можно вывести все подвалы скопом:

Вот результат:

Блоки Berry CSS

Компонент Module1 достаточно мощный и позволяет подключать компоненты с заданными параметрами. Я сделал модуль berry/block, который содержит все блоки Berry CSS. Поскольку сейчас блоков около 30, то делать для каждого из них отдельный модуль — достаточно затратно. Поэтому для модуля просто указывается имя файла в виде параметров:

Это подключит блок ca12 из Berry CSS:

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

Поскольку шапка — особая часть шаблона, то часть блоков я вынес в виде модулей headers. Вот пример headers/header1:

То есть в MF можно вообще произвольно комбинировать компоненты, блоки Berry CSS и модули юнитов. Я, конечно, пока будут развивать блоки Berry, поскольку их можно сделать достаточно много. Сейчас в MF доступно 70 модулей юнитов и примерно 25 блоков из Berry CSS. Думаю, что такими темпами мы скоро перевалим за сотню. :-)

Компонент Info1

Это новый компонент, который выводит название рубрики или записи и навигацию «хлебные крошки».

Новая модульная сетка «fields»

Эта сетка нужна, если требуется разместить весь сайт в одном контейнере. Вот примерно так:

Пока это тестовая возможность, поскольку не все компоненты смогут корректно подстроиться под неё. Главная сложность — это js-эффекты появления/скрытия меню — есть там технические сложности. Но, если подходить к выбору компонентов для этой сетки с умом, то проблем не будет.

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

Прочее

Попутно было решено множество задач, что даже потребовало некоторых правок в MaxSite CMS. Я уже выложил все изменения на GitHub, поэтому используйте именно эту версию. Строго говоря это новая 107 версия системы, только я ещё не делал анонса.

По секрету скажу, что там будет новый плагин MetaRobots, в котором можно задавать правила для значений meta robots для произвольных адресов сайта.

Итого

Версия MF 9 получилась очень «насыщенная», поэтому у неё лишь частичная совместимость со старой. Оптимальным вариантом обновления будет установка новой, а свои блоки добавить уже вручную. Поскольку в MF уже давно используется Berry второй версии, то правок по css-классам будет немного.

Если у вас ещё действует подписка на MF, то вы можете бесплатно заказать новую версию. Если подписка закончилась, то вы можете продлить её с 50% скидкой (за 50$). Для новых подписчиков шаблон MF стоит как и прежде 100$. Заказать MF вы можете через контактную форму, либо напрямую написав мне на maxsite.org@gmail.com.