Помочь проекту Отзывы Обратная связь Заказать шаблон/сайт Супер-шаблон MF
Войти / Регистрация
Закрыть

или зарегистрироваться

MaxSite CMS

  • Преимущества
  • Возможности
  • Основы
  • Документация
  • Скачать
Встраиваемые компоненты
Модульная main-сетка

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

Архив записейПросмотров: 670617 ноября 2017 г.

Попробуем создать простой компонент шапки для изучения. Но для начала определимся как именно мы будем его делать. Обычно для шапки делается новый компонент в каталоге components. Так сделано в default-шаблоне (компонент top1). Это универсальный вариант, где основные настройки вынесены в опции компонента (options.ini). Поэтому, если вы предполагаете, что будут какие-то опции, то шапку лучше делать именно стандартным отдельным компонентом.

На практике же часта ситуация, когда создавать опции не всегда оправдано — проще поменять код компонента. Особенно это актуально, если приходится менять классы или html-разметку. В этом случае можно использовать компонент file1, где указать подключаемый php-файл шапки.

Такой подход как раз и используется в нашем базовом шаблоне. Подключаемый файл custom/top1.php. Технически этот тот же самый вариант, если бы мы делали через компонент без опций.

Давайте сделаем новый вариант в custom/top2.php. В настройках шаблона не забудьте его подключить в компоненте file1.

Пусть шапка будет иметь всю ширину браузера и залита каким-нибудь фоновым цветом. Слева будет название сайта, а справа простое одноуровневое меню (из настройки «Второе меню»).

MaxSite CMS
Главная Архив Контакты

Вначале нужно задать 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-стилей.

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

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

Встраиваемые компоненты
Модульная main-сетка
twitter.com facebook.com google.com yahoo.com

Еще записи по теме

  • Новогодний плагин для MaxSite CMS - снег на сайте
  • Используем типы страниц в MaxSite CMS
  • 6. Делаем плагин для подсчета RSS-подписчиков
  • Поддержка Open Graph в MaxSite CMS
  • Концепция шаблона D3
  • Работаем с Биржей статей sape.ru
  • Зарегистрировал фид в FeedBurner.com
  • Опции в MaxSite CMS
  • Назидания начинающему вебмастеру по созданию шаблонов для MaxSite CMS
  • Использование плагина «ushki to hook»
Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Learn more about buy Instagram likes check popular website Friendlylikes
Find more information why people are used to buy Instagram likes for photos and videos these days.
Рубрики
  • Блог 36
  • Версии (релизы) 93
  • Архив записей 180
Последние записи
  • Переход к минимальной PHP 7.1
  • Обновление документации
  • MaxSite CMS 11 лет
  • MaxSite CMS 103
  • Каталог студий и фрилансеров MaxSite CMS
  • Мы переходим к одной ветке разработки MaxSite CMS
  • MaxSite CMS 102
  • MaxSite CMS 101
  • Установка и начальная настройка MaxSite CMS (видео)
  • Landing Page на MaxSite CMS
Поиск по сайту
Архив сайта

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.

Другие проекты
  • Сайт автора — MaxSite.org
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные HTML-курсы
Соцсети
  • Twitter
  • Github
  • YouTube
© MaxSite CMS, 2008-2019 | Время: 0.2649 | SQL: 20 | Память: 1.42MB | Вход