Современная, быстрая и удобная система управления сайтом

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

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

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

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

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

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

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); ?>

<h1>Первый компонент</h1>

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

Как правило почти все php-файлы в MaxSite CMS начинаются с неё. Когда кто-то попытается набрать адрес файла в браузере, то получит сообщение No direct script access allowed и код выполнен не будет.

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

Наш первый компонент

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

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

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

<div class="layout-center-wrap">
    <
div class="layout-wrap">
        <
div class="">Логотип</div>
        <
div class="">Название сайта</div>
        <
div class="">Описание</div>
    </
div>
</
div>

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

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

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

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

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

<div class="layout-center-wrap">
    <
div class="layout-wrap flex">
        <
div class="">Логотип</div>
    
        <
div class="">
            <
div class="">Название сайта</div>
            <
div class="">Описание сайта</div>
        </
div>
    </
div>
</
div>

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

<div class="layout-center-wrap">
    <
div class="layout-wrap flex">
        <
div class="">
            <
img src="<?= getinfo('template_url') ?>assets/images/logo.png" alt="">
        </
div>
    
        <
div class="">
            <
div class="">Название сайта</div>
            <
div class="">Описание сайта</div>
        </
div>
    </
div>
</
div>

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

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

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

<div class="layout-center-wrap">
    <
div class="layout-wrap flex">
        <
div class="">
            <
img src="<?= getinfo('template_url') ?>assets/images/logo.png" alt="">
        </
div>
    
        <
div class="w100">
            <
div class="">Название сайта</div>
            <
div class="">Описание сайта</div>
        </
div>
    </
div>
</
div>

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

<div class="layout-center-wrap">
    <
div class="layout-wrap flex">
        <
div class="pad20-rl">
            <
img src="<?= getinfo('template_url') ?>assets/images/logo.png" alt="">
        </
div>
    
        <
div class="w100">
            <
div class="">Название сайта</div>
            <
div class="">Описание сайта</div>
        </
div>
    </
div>
</
div>

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

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

<div class="layout-center-wrap">
    <
div class="layout-wrap flex">
        <
div class="pad20-rl">
            <
img src="<?= getinfo('template_url') ?>assets/images/logo.png" alt="">
        </
div>
    
        <
div class="w100">
            <
div class="t200 t-blue600">Название сайта</div>
            <
div class="italic">Описание сайта</div>
        </
div>
    </
div>
</
div>

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

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

<div class="layout-center-wrap">
    <
div class="layout-wrap flex pad30-tb flex-vcenter">
        <
div class="pad20-rl">
            <
img src="<?= getinfo('template_url') ?>assets/images/logo.png" alt="">
        </
div>
    
        <
div class="w100">
            <
div class="t200 t-blue600">Название сайта</div>
            <
div class="italic">Описание сайта</div>
        </
div>
    </
div>
</
div>

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

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

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

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); 

$name_site mso_get_option('name_site''general');
$description_site mso_get_option('description_site''general');

?>

<div class="layout-center-wrap">
    <
div class="layout-wrap flex pad30-tb flex-vcenter">
        <
div class="pad20-rl">
            <
img src="<?= getinfo('template_url') ?>assets/images/logo.png" alt="">
        </
div>
    
        <
div class="w100">
            <
div class="t200 t-blue600"><?$name_site ?></div>
            <
div class="italic"><?$description_site ?></div>
        </
div>
    </
div>
</
div>

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

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

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