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

Встраиваемые компоненты

Если компонент начинается с символа «_», то он не отображается в админ-панели и предназначен для использования в других компонентах. Например есть компонент menu, который представляет собой оболочку над компонентом _menu.

Зачем так делать?

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

В Default-шаблоне помимо _menu есть еще и компонент _social, предназначенный для вывода иконок на соц. сети. Давайте добавим эти два компонента в наш my-header1. Наш компонент будет иметь такую схему расположения:

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

HTML-код будет практически повторять верхний блок, где мы использовали flex-сетку. Здесь всё точно также, только для второй ячейки не нужно указывать ширину — она у нас и так автоматом прижимается к правому краю.

Соц. иконки задаются в настройках шаблона на вкладке Соц.сети. Задайте там несколько иконок для примера.

Иконоки соц.сетей

Приводу полный код компонента:

<?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>

<
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 добавим класс фона:

<div class="layout-center-wrap bg-indigo100"
    ...

Цвет иконок лучше всего указать в админ-панели. Это последний параметр. У меня например так:

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.