Учимся работать с шаблоном MF. Основы

08-06-2021Время чтения ~ 12 мин.Шаблоны для MaxSite CMS 3554

Начну небольшой цикл статей, посвященный шаблону MF. Расскажу о том, как с ним работать. Статьи больше рассчитаны на пользователей шаблона, хотя начиная с MaxSite CMS 108 можно использовать и с шаблоном Default — у них общее «ядро». Это будет интересно и тем, кто только собирается покупать MF — я постараюсь давать информацию достаточно подробно, но так, чтобы затрагивать поменьше технических деталей.

Ну и меня порой пробивает на графоманство, так что текста будет много. :-)

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

Здесь я должен сделать важное замечание. В статьях я пишу про шаблон MF, который изначально был в единственном варианте и содержал в себе полный комплект модулей, цветовых тем, компонентов и т.д. Версия MF 12 — последняя, которая продавалась именно в таком варианте. Начиная с декабря 2021 года шаблон MF в полном комплекте больше не продаётся, но вместо этого появились другие шаблоны, которые имеют ядро MF, но меньшее количество модулей и блоков. Это позволило снизить стоимость шаблонов, а если комплектация недостаточна, то можно докупить дополнительные модули, компоненты, цветовые дизайны и т.д. Поэтому всё, что идёт в этом цикле статей полностью подходит и для любого MF-шаблона. Но возможна ситуация, когда описываемый файл недоступен в вашем шаблоне. Просто используйте те, что есть. Принципиальной разницы здесь нет.

Для начала расскажу что такое MF.

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

Шаблон MF можно рассматривать как конструктор Лего, который собирается из многочисленных блоков, а также как некий базовый каркас, который можно расширить под свои задачи. Такой подход сильно отличает MF от других шаблонов, которые состоят из фиксированных блоков и имеют один постоянный дизайн. Но MF не появился просто так — это результат моего достаточно большого опыта сайтостроения. До MF было как минимум 11 версий других «универсальных» шаблонов. Поэтому, когда я задумал уже MF, то это был осознанный опыт и понимание стоящих задач.

Что означает «универсальный»?

Здесь две стороны. Первая — универсальность с точки зрения пользователя. Например лёгкость смены блоков главной, шапки, подвала и т.п. Такой шаблон может быть в синих тонах и одним кликом мы можем сменить его дизайн на lime. Такая универсальность позволяет использовать MF под любую тематику сайта — шутка ли в комплекте MF целых 10 цветовых тем плюс одна инверсная.

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

Секрет в том, что уже давно никто не делает сайты и шаблоны с нуля. Этот подход был распространён много лет назад, но постепенно утратил свою актуальность. Каждый разработчик имеет какой-то базовый каркас, который он использует от сайта к сайту. Обычно это происходит так.

• Первый сайт. Берётся какой-то чужой шаблон и адаптируется под пожелания заказчика.
• Второй сайт. Берется предыдущий шаблон и адаптируется под пожелания нового заказчика.
• Третий сайт. Берется предыдущий шаблон, но поскольку он содержит блоки/функционал первых двух, то делается новый шаблон — эдакая «солянка».
• Четвертый - десятый сайт. Итерации продолжаются — выделяется «шаблон-каркас», который содержит элементы всех созданных сайтов. Шаблон «распухает», поскольку содержит много лишнего.

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

Сделать универсальность со стороны клиента намного сложней. Эта задача под силу не каждому разработчику, поскольку упирается в многочисленные подводные камни, требует много времени на отладку, тестирование, а также часто нестандартного мышления. В большой мере этот подход давно используется в MaxSite CMS, поэтому для меня очень важно, чтобы у пользователя была возможность выбора, а когда его не хватает, была возможность простой реализации своей задумки. Поэтому в системе так просто работать с опциями (это базовая потребность), создавать плагины, компоненты, модульные сетки и т.д. Шаблон MF развивается в этом же направлении.

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

Почему я затрагиваю этот вопрос? Многие выбирают CMS, ориентируясь на самые разные параметры, вроде её популярности (как ВП), но при этом упускают принципиальные вопросы, которые в итоге «завалят» ваш сайт.

Например система может не содержать нужных плагинов. Ок, скажете вы, скачаем и установим — они бесплатные. Но потом выяснится, что эти 10-20 плагинов сильно грузят сервер и вы начинается уже «экономить» на функционале сайта, иначе хостер ругается. Потом вы выбираете шаблон. Их много, но те, которые вам нравятся по функционалу, опять же сильно грузят сервер. Это происходит из-за того, что авторы CMS не отвечают и не рекомендуют как правильно и оптимально создавать модули для системы. Популярность системы играет злую шутку — для неё начинают писать все кому не лень: кто левой, кто правой ногой. Потом вы начинаете задумываться о плагине кеширования, потому что всё это «великолепие» ваш сервер просто уже не тянет. Я это знаю, поскольку мой MAXCACHE для WP покупался для тысяч сайтов.

Если ваш сайт использует любой кэширующий плагин — дело дрянь. Подумайте об этом.

Совсем по другому дело выглядит, если вебмастер имеет полноценный каркас для своей работы. Конечно же, нет никаких технических ограничений изобретать свой «велосипед», но намного проще использовать уже отработанные решения. Если вы вебмастер и хотите зарабатывать на создании сайтов, но вы берёте Default, разбираетесь как он устроен, а дальше наращиваете «мясо» — свои модули, компоненты, цветовые темы и т.д. Я уж молчу о том, что многие блоки из MF общедоступны (например блоки Berry CSS).

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

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

Если вы создаёте сайт, то ситуация очень похожа — можно использовать готовый шаблон, который вам потребуется изменить, а значит найти исполнителя. Чаще всего ориентируются на внешний вид сайта, поэтому упускают что любая система имеет некоторые свои особенности, которые в 99% случаев не учитывает дизайнер и верстальщик html-шаблона. Переделка всё равно потребуется и, открою секрет, в подавляющем большинстве случаев проще сверстать дизайн по картинке с нуля, чем разбираться в тонне чужого кода.

Это всё из-за того, что современный дизайн довольно простой — преобладает минимализм, а также тот факт, что современные браузеры очень хорошо поддерживают HTML/CSS стандарты. Поэтому любому опытному верстальщику намного проще и быстрей сделать сайт на своих инструментах — знакомых css-фреймворке и js-скриптах.

Другой важнейший фактор — web-верстка за это время сильно шагнула вперёд. Помимо возможностей браузеров, постепенно пришло понимание различных методик вёрстки. Если раньше всё делалось в одной «куче», то сейчас преобладает модульный подход, где каждый блок может быть свёрстан самостоятельно. Зарубежные команды уже вовсю используют atomic-подход в вёрстке. В качестве примера покажу сайт Tailwind UI, где вы просто выбираете подходящий компонент и размещаете на своём сайте. Ещё примеры: wickedblocks, Kitwind, Stitches и многие другие (это легко гуглится).

Я использую свою разработку блоки Berry CSS, которая как и Tailwind является utility-first CSS framework — это то, куда и движется современная html-вёрстка.

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

В чём отличие MF от других шаблонов?

В первую очередь — это большое количество уже готовых модулей и блоков. Как и в MaxSite CMS — вам не нужно рыскать в поисках нужных плагинов — они все уже в комплекте системы. Так и здесь — всё что нужно под рукой — просто берите и используйте.

Во вторую очередь — управляемость. Например только один компонент шапки может содержать до 15 настроек (например header1), а таких компонентов в MF — 14 штук. Представьте себе многообразие решаемых задач! В большинстве случаев такие компоненты настраиваются через админ-панель.

Но есть модули и блоки, вариации которых может быть бесконечно (скажем любой модуль юнитов может иметь около 80 опций), например модули для вывода записей, слайдеры и т.п. Невозможно вынести все их опции отдельно, поэтому используется простые текстовые файлы, где указываются нужные параметры модуля. Такие файлы также редактируются через админ-панель.

В итоге мы получаем хорошую управляемость: там где возможно, управление происходит через обычные опции, а где их слишком много, то используется простой текстовый формат. При этом, заметьте, пользователю MF очень редко приходится прибегать к непосредственному php-программированию. Это случается только в тех случаях, если нужно добавить новую функциональность сайта. Но здесь, скорее уже вотчина вебмастера. :-)

Что нужно знать при использовании MF?

Есть несколько уровней подготовки пользователя. Самый первый — это обычный пользователь MaxSite CMS, который умеет настраивать сайт, плагины и всё то, что доступно через опции админ-панели.

На этом уровне вы сможете переключать дизайн сайта, размещать модули главной (в MF 12 их 68 шт. + блоки Berry), компоненты шапки (14 шт.), подвала (8 шт. - в общих модулях) и т.д. То есть возможности достаточные для того, чтобы менять основные настройки в пределах предложенных цветовых дизайнов (10 шт., 20 шрифтов, 5 меню).

Следующий уровень — это понимание основ CSS на уровне Berry CSS. Именно Berry позволяют добиться такой высокой гибкости в настройке шаблона. Смена цвета, шрифта, размера текста, ссылок, бордюры и много-много другого. В других шаблонах (и CMS) верстка «монолитна» — чтобы изменить любой элемент, требуется править css-файл. А для новичков — это занятие не самое простое (да и для вебмастера тоже). У нас по другому — достаточно прямо в опции/файле модуля прописать нужный класс Berry.

Когда я делал Berry 3.0, то потратил примерно 3 месяца не только на саму разработку, но и на её документацию. Потому что она рассчитана на неподготовленного пользователя, которому нужно получить справку «как это быстро сделать?». Мне всегда было плевать будут ли использовать Berry CSS другие разработчики, но мне важно, чтобы пользователи MF имели доступ к хорошей справке, ведь от этого будет зависеть стоимость обслуживания их сайтов. Подумайте сами — зачем платить кому-то если можно самостоятельно поменять внешний вид блока, элементарнейшим образом поменяв пару css-классов?

То же самое касается и моего html-курса. Он рассчитан только на самые-самые азы для тех, кому нужна базовая информация, которая позволит им самостоятельно создавать HTML-блоки разной сложности.

Когда мы размещаем блок на сайте, то это HTML и по другому это не работает в принципе. Поэтому такой уровень подготовки пользователя позволит сильно расширить возможности настройки MF. Но, опять же, это если вы ставите задачу его переделать, то есть по сути берёте на себя работу вебмастера.

С чего начинать создание сайта?

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

Первое, что нужно сделать — это проработать УТП (уникальное торговое предложение), продумать тексты для блоков лендинга главной. И лишь только после этого можно думать о дизайне сайта.

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

После этого займитесь блоками лендинга. Вполне достаточно блоков Berry или тех, что в комплекте MF. C некоторыми клиентами у нас часто была ситуация, когда выбирался какой-то понравившийся блок, но для него не было текстового наполнения. Приходилось от него отказываться. Или другая ситуация — выбирался блок, писался текст, но по объёму он никак не подходил к этому блоку. Приходилось менять на другой. С прайс-блоками аналогично: либо не хватает пунктов, либо выбор всего из 2-х колонок. Такой блок смотрится некрасиво.

Иногда клиенты хотели получить блоки, где вместо реальных текстов размещалась «рыба» (текстовая заглушка lorem ipsum). В итоге большая их часть просто не использовалась — вообще не было смысла их делать.

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

Дизайн настраивается следующим образом.

Вначале подбирается общая типографика: основной шрифт, цвет текста, размеры заголовков и т.д. Во многих случаях это даже не требует редактирования css-классов, поскольку это «магия» Berry (используются css-переменные).

Дальше каждый блок или компонент может настраиваться точечно — также через классы Berry - всё это указывается в опциях, поэтому также не требует правки css-кода.

После этого нужно подобрать иконки (например из FontAwesome 5, который в комплекте), а также заменить все дефолтные изображения: загружаем их на сервер, указываем адреса в опциях.

Таким образом мы получаем сайт, уже отличающийся от дефолтной настройки MF.

Что делать, если нужно сильно изменить какой-то компонент, блок или даже сделать новый?

Тут мы входим в область вебмастера, поскольку возможно потребуется писать php/html/css-код. Чудес не бывает. Но как правило задача решается путем копирования ближайшего подходящего файла и его правкой. В некоторых случаях можно добавлять сложные блоки прямо в компонентах или модулях. Здесь как раз и играет уровень подготовки. По опыту скажу, что в 80% случаев вопрос решается именно за счёт настройки существующих блоков. Просто есть вещи достаточно сложные для новичков: например настройка адаптивности flex-сетки. Поэтому, если стоит именно такая задача, то требуется квалифицированная помощь (моя или другого вебмастера). Но, как я уже отметил, обычно это вопрос настройки, а значит работа может быть выполнена быстро и недорого. Лично я многим клиентам вообще оказываю помощь бесплатно, поскольку не считаю правильным брать деньги за 3-4 строчки примитивного кода, на который я потратил пару минут. :-)

Что дальше?

Эта часть — общая, но необходимая. Нужно чтобы вы понимали разницу между MF и другими шаблонами. Здесь другой подход и другие возможности. Технические вопросы начнём рассматривать в следующей части.