Попробуем создать простой компонент шапки для изучения. Но для начала определимся как именно мы будем его делать. Обычно для шапки делается новый компонент в каталоге components. Так сделано в default-шаблоне (компонент top1). Это универсальный вариант, где основные настройки вынесены в опции компонента (options.ini). Поэтому, если вы предполагаете, что будут какие-то опции, то шапку лучше делать именно стандартным отдельным компонентом.
На практике же часта ситуация, когда создавать опции не всегда оправдано — проще поменять код компонента. Особенно это актуально, если приходится менять классы или html-разметку. В этом случае можно использовать компонент file1, где указать подключаемый php-файл шапки.
Такой подход как раз и используется в нашем базовом шаблоне. Подключаемый файл custom/top1.php. Технически этот тот же самый вариант, если бы мы делали через компонент без опций.
Давайте сделаем новый вариант в custom/top2.php. В настройках шаблона не забудьте его подключить в компоненте file1.
Пусть шапка будет иметь всю ширину браузера и залита каким-нибудь фоновым цветом. Слева будет название сайта, а справа простое одноуровневое меню (из настройки «Второе меню»).
Вначале нужно задать layout-блок. Мы уже знаем как он себя ведёт. Внутренний wrap-блок будет являться flex-контейнером, содержащим два блока-ячейки: название сайта и меню.
<div class="layout-center-wrap bg-blue800"><div class="layout-wrap flex flex-wrap flex-vcenter"> <div class="flex-grow1 w100-tablet"> название сайта </div> <div class="flex-grow5 w100-tablet"> меню </div> </div></div>
Класс .bg-blue800 — цвет фона. Класс .flex-vcenter задает выравнивание внутренностей ячеек по высоте (аля-vertical-align). Класс .w100-tablet, как вы должны уже знать — 100% ширина на tablet.
Классы .flex-grow1 и .flex-grow5 управляют «жадностью» ячеек. Теоретически мы могли бы явно задать ширину ячеек в процентах, но по факту мы не знаем каково будет их реальное наполнение. Скажем название сайта — большая ячейка, а меню малое. А если наоборот?
Вот здесь как раз «жадность» и используется. В данном случае предполагается, что первая ячейка должна быть менее «жадной» (меньшей по ширине), чем вторая. Число указывает на степень «жадности»: 1 против 5. По умолчанию для flex-ячеек «жадность» равна нулю.
Название сайта следует выводить в виде ссылки, но на главной ссылку следует убрать. Получается вот такой код:
...
{% if (!is_type('home')) : %}
<a class="i-globe t-white hover-t-blue200 hover-no-underline" href="{{ getinfo('site_url') }}">{{ getinfo('name_site') }}</a>
{% else : %}
<i class="i-globe"></i>{{ getinfo('name_site') }}
{% endif %}
...
Здесь я использую возможности встроенного php-шаблонизатора. Блок «{% %}» эквивалентен «<?php ?>», а блок «{{ }}» эквивалентен php-функции «echo». Также я использую альтернативный php-синтаксис для if.
То есть у нас if-условие, которое проверяет главную страницу (!is_type('home')): если это не главная, то выводим ссылку, иначе просто иконку и название сайта (через getinfo()).
Иконки задаются с помощью классов «i-». Класс .hover-t-blue200 задает поведение ссылки hover (наведение) — будет установлен цвет текста светло-синий. Класс .hover-no-underline убирает подчеркивание ссылки при наведении.
Свойства текста мы зададим уже в классах ячейки.
...
<div class="flex-grow1 w100-tablet t-center-tablet t-white pad10 t120 t150-tablet">
{% if (!is_type('home')) : %}
<a class="i-globe t-white hover-t-blue200 hover-no-underline" href="{{ getinfo('site_url') }}">{{ getinfo('name_site') }}</a>
{% else : %}
<i class="i-globe"></i>{{ getinfo('name_site') }}
{% endif %}
</div>
...
Здесь я добавил классы
-
.t-center-tablet— выравнивание по центру для tablet -
.t-white— белый текст -
.pad10— отступы по 10px -
.t120— размер шрифта 120% -
.t150-tablet— размер шрифта 150% для tablet
Если вы проверите этот код, то обнаружите, что классы для tablet не срабатывают. Это потому что в _variables.scss отключено их создание в переменной $screen_media_text_step_list. Уберите комментарий, чтобы получилось так:
$screen_media_text_step_list: ( "tablet": $SCREEN_TABLET, "phone": $SCREEN_PHONE, );
После sass-компиляции классы станут доступны.
Для вывода меню используем стандартный вариант MaxSite CMS.
...
<nav><ul class="menu-simple pad10-tb t-blue100 t90 links-no-color t-center-tablet">
{%
if ($menu = mso_get_option('menu2', 'templates', '/ | Главная ~ about | О сайте'))
echo mso_menu_build($menu, 'selected', false);
%}
</ul></nav>
...
Тэг NAV указывает на html5-семантику этого блока. Само же меню формируется в виде ul/li-списка. Но мы помним, что это простое меню в одну строчку, а для такого меню предназначается специальный класс .menu-simple. Его код расположен в файле _menu-simple.scss.
Класс .t90 задает 90% размер текста. Класс .links-no-color задаёт поведение ссылок: их цвет будет совпадать с цветом контейнера (.t-blue100). Если его не указывать, то цвет будет такой же как и у всех остальных ссылок.
Размеры текста в UniCSS определяются в единицах rem, то есть от основного BODY-тэга. Базовая типографика задается в_base.scss. По умолчанию указаноfont-size: 16px;, следовательно.t90— это 90% от 16 = 14,4px. Rem-единицы тем и удобны, что всегда указывают на единое числовое значение, не зависимо от свойств родителя.
Класс .pad10-tb задает 10px отступ сверху и снизу. Это нужно для того, чтобы меню не «прилипало» к низу контейнера.
Приводу полный код файла, чтобы вы не запутались.
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); ?>
<div class="layout-center-wrap bg-blue800"><div class="layout-wrap flex flex-wrap flex-vcenter">
<div class="flex-grow1 w100-tablet t-center-tablet t-white pad10 t120">
{% if (!is_type('home')) : %}
<a class="i-globe t-white hover-t-blue200 hover-no-underline" href="{{ getinfo('site_url') }}">{{ getinfo('name_site') }}</a>
{% else : %}
<i class="i-globe"></i>{{ getinfo('name_site') }}
{% endif %}
</div>
<div class="flex-grow5 w100-tablet">
<nav><ul class="menu-simple pad10-tb t-blue100 t90 links-no-color t-center-tablet">
{%
if ($menu = mso_get_option('menu2', 'templates', '/ | Главная ~ about | О сайте'))
echo mso_menu_build($menu, 'selected', false);
%}
</ul></nav>
</div>
</div></div>
Код достаточно простой, и обратите внимание, что нам не пришлось писать ни единой строчки css-стилей.
Если придется что-то менять на рабочем сайте, то подредактировать файл можно через админ-панель «Файлы».
Если есть вопросы, задавайте в комментариях.