Пример компонента шапки

Попробуем создать простой компонент шапки для изучения. Но для начала определимся как именно мы будем его делать. Обычно для шапки делается новый компонент в каталоге 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-стилей.

Если придется что-то менять на рабочем сайте, то подредактировать файл можно через админ-панель «Файлы».

Если есть вопросы, задавайте в комментариях.