Начальный уровень
Встраиваемые компоненты
Если компонент начинается с символа «_», то он не отображается в админ-панели и предназначен для использования в других компонентах. Например есть компонент menu, который представляет собой оболочку над компонентом _menu.
Зачем так делать?
Есть ряд компонентов, которые содержат какой-то код вывода, но могут размещаться в шапке произвольно. Скажем, меню можно вывести не только в виде отдельного блока, но и в шапке вверху в одном ряду с иконками. То есть встраиваемый компонент содержит программную php-часть и минимальную html-разметку, а основной компонент уже сам определяет где всё это будет располагаться.
В Default-шаблоне помимо _menu есть еще и компонент _social, предназначенный для вывода иконок на соц. сети. Давайте добавим эти два компонента в наш my-header1. Наш компонент будет иметь такую схему расположения:
| лого | Название сайта | | | Описание | ------------------------- | меню | иконки |
HTML-код будет практически повторять верхний блок, где мы использовали flex-сетку. Здесь всё точно также, только для второй ячейки не нужно указывать ширину — она у нас и так автоматом прижимается к правому краю.
Соц. иконки задаются в настройках шаблона на вкладке Соц.сети. Задайте там несколько иконок для примера.
Приводу полный код компонента:
$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>
<div class="layout-center-wrap">
<div class="layout-wrap flex flex-vcenter">
<div>
<?php
if ($fn = mso_fe('components/_menu/_menu.php')) require $fn;
?>
</div>
<div class="t150">
<?php
if ($fn = mso_fe('components/_social/_social.php')) require $fn;
?>
</div>
</div>
</div>
Верхний блок — то, что мы сделали в прошлый раз. Внизу действуем аналогично: контейнер + flex-сетка.
Подключение компонентов выполняется с помощью функции mso_fe(), где файл указывается относительно каталога шаблона. Если такой файл, есть, то функция возвращает полный путь к файлу, который присваивается переменной $fn. Иначе будет false и условие не будет выполнено.
Для блока иконок мы задаём размер шрифта 150% (класс .t150). Все остальные классы вы уже знаете.
Нижний блок можно разместить на каком-то светлом фоне. Для этого к блоку .layout-center-wrap добавим класс фона:
...
Цвет иконок лучше всего указать в админ-панели. Это последний параметр. У меня например так:
fab fa-twitter = https://twitter.com/maxsite | Мой твиттер | t-gray500 hover-t-indigo600 fab fa-telegram = https://t.me/maxsite | Мой телеграм | t-gray500 hover-t-indigo600 fas fa-rss = feed | RSS-подписка | t-gray500 hover-t-indigo600
Классы hover- срабатывают при наведении мышки. В данном случае меняется цвет на indigo600.
