Создадим свой первый компонент

Компоненты находятся в каталоге шаблона components. Для того, чтобы MaxSite CMS смогла увидеть компонент и его подключить в админ-панели, существует несколько простых правил.

• Каждый компонент располагается в своём каталоге. Если название каталога начинается с символа «_», то он не отображается в списке компонентов.
• Главный файл компонента — index.php.
• Опции компонента можно разместить в файле options.ini.

Для MaxSite CMS нет разницы будет ли это компонент для шапки или подвала, поэтому желательно в названии компонента (имя каталога) указывать его назначение, например не my, а my-header, my-footer и т.п.

Сделаем простой компонент с выводом картинки-логотипа, названия и описания сайта.

Сделаем каталог my-header1 с файлом index.php:

Первая строчка кода (if (!defined(...) служит для защиты от прямого вызова php-файла.

Дальше мы просто выводим произвольный текст. Зайдите в настройки шаблона на вкладку компонентов и выберите my-header1. После сохранения в шапке появится его содержимое.

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

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

Вначале создаётся общий контейнер, а в него уже помещаются всё содержимое. У нас это будет логотип и два текста.

Класс .layout-center-wrap задаёт основной контейнер, который будет иметь 100% ширину браузера. Внутри него будет блок с классом .layout-wrap, который будет центрироваться и иметь ограничение на максимальную ширину 1200px. То есть, когда у посетителя браузер более широкий, то контейнер будет автоматически центрироваться. Это достаточно типовое поведение большинства сайтов.

Внутри контейнера размещаем три отдельных DIV, которые будут работать как ячейки flex-сетки.

Размещать ячейки буем по такой схеме:

| лого | Название сайта |
|      | Описание       |

То есть у нас будет две колонки. Но вторая колонка у нас содержит два блока DIV, поэтому для них мы сделаем ещё один общий контейнер. Мы будем использовать flex-сетку. Общий контейнер у нас уже есть — это .layout-wrap, то есть мы просто превращаем его во flex-контейнер с помощью класса .flex.

Заменим блок логотипа на какое-то изображение. Это может быть любая картинка, которую нужно разместить в каталоге шаблона assets/images.

Здесь мы добавили тэг IMG, а адрес указали с помощью getinfo('template_url'), который возвращает полный url-адрес к текущему шаблону.

По умолчанию класс .flex делает «резиновую» сетку, где ячейки автоматически подстраивают свои размеры. У нас же первая ячейка лого должна быть небольшой. Ширина ячеек для flex-сетки обычно задается в процентах. В Berry CSS за это отвечают классы с префиксом w. Если вы уже работали с flex, то знаете, что ширина ячейки имеет «рекомендательный» характер: если что-то не поместится, то браузер автоматом подстроит размеры как нужно.

Поэтому мы для второй ячейки установим размер 100%, что растянет её на всю доступную ширину.

Теперь для ячейки логотипа нужно добавить отступы справа и слева. За внутренние отступы отвечают классы pad. В данном случае я указал 20px (модификатор -rl - right & left).

Теперь ячейки у нас располагаются как положено. Название сайта сделаем покрупнее. Для этого используются классы с префиксом t, после которых идет размер в процентах. 100% — это базовый размер шрифта, обычно — 16px. Мы поставим 200%. Также можно указать и цвет, например blue 600-го оттенка.

Для описания сайта применим курсив — класс .italic. Получилось так:

Выглядит уже неплохо, но явно не хватает «воздуха». Добавим для flex-контейнера внутренние отступы сверху и снизу по 30px (класс .pad30-tb). И кроме этого мы видим, что нужно какое-то выравнивание по вертикали для всех ячеек. Для этого в Berry используется класс .flex-vcenter опять же для контейнера (или его синоним .flex-ai-center).

Итоговый код разметки:

И внешний вид:

Теперь добавим немного интерактивности. Мы знаем, что в настройках шаблона есть вкладка «Шапка сайта», где как раз можно указать название и описание сайта. Всё что нам нужно сделать, так получить значение этих опций и вывести вместо фиксированного текста.

Для получения опций служит функция mso_get_option(), где первый параметр указывает на имя опции, а второй — группу.

Теперь наш компонент может настраиваться из админ-панели.

В будущем, при создании любых компонентов или каких-то блоков, старайтесь придерживаться следующего плана:

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