Компоненты в шаблоне Default

Компоненты представляют собой обычные php-файлы, в которых заключен вывод какого-то одного функционального блока. Стандартно в комплект Default-шаблона входят:

• Шапка (лого, название сайта, описание и иконки)
• Выпадающее меню
• Слайдер изображений
• Статичное изображение для шапки
• Указанное изображение для шапки
• Строчка с копирайтами сайта
• Строчка со статистикой потребления ресурсов

Поскольку компоненты являются отдельными блоками, то они могут быть размещены в произвольном порядке на сайте. Например нет никаких проблем указать размещение строчки статистики в шапке сайта, а меню или слайдер в подвале. Технически все компоненты равнозначны.

Настройка вывода компонентов в шаблоне

В Default-шаблоне порядок компонентов определяет блогер. Делается это простым выбором из доступных компонентов в Настройке шаблона.

В шаблоне предусмотрено по пять «посадочных» мест в шапке сайта и подвале.

Базовая HTML-структура шаблона

Вообще откуда пришла идея использовать в шаблонах компоненты? Как известно, современная вёрстка предполагает основную работу с CSS при использовании довольно простого HTML. Таким образом модульная структура сайтов может быть практически неизменной и единой. На большинстве сайтов будут присутствовать четыре основных блока:

• Шапка
• Основной текст
• Сайдбар
• Подвал

Разница между сайтами будет уже в деталях, например

• Сайдбар слева или справа. Один или два.
• В шапке может быть логотип, а может не быть.
• Может быть описание, а может и не быть.
• Кнопки соцсетей могут иметь другое расположение.
• и т.д., и т.п.

При использовании же компонентов мы выносим отдельно все эти различия. В итоге работать с компонентами проще и удобней, чем переверстывать весь шаблон. Кроме того, компоненты могут быть многократно использованы в других шаблонах. В файле main.php присутствуют лишь основные блоки DIV, из которых получается очень простая и универсальная модульная структура сайта.

Расположение компонентов в шаблоне

Все компоненты следует располагать в каталоге components. MaxSite CMS автоматически определит все php-файлы и предложит их для выбора в админ-панели.

Компоненты подключаются в рамках MaxSite CMS, а значит в них доступны все функции и возможности системы. Например, компонент может использовать опции.

CSS-cтили и js-файлы компонента

Если компонент использует какие-то свои css-стили, то их можно разместить в каталоге components/css с одноименным именем, но с расширением «.css». Например если ваш компонент my_comp.php, то его стили будут /css/my_comp.css. CSS-файл будет автоматически подключен в секции HEAD шаблона.

Строго говоря, не обязательно подключать стили в HEAD секции - браузеры прекрасно их «скушают» и в теле документа. Проблема здесь в том, что валидатор HTML будет ругаться, поскольку считает, что CSS-стили должны быть загружены до основных тэгов, ведь «дерево тэгов» строится с учетом стилей. Если же загружать стили после тэгов, то браузеру может потребоваться перестраивать отображение страницы. Браузеры оказались куда более сообразительней по сравнению с валидатором, но, пока он имеет приоритет (стандарт), мы вынуждены использовать загрузку стилей именно в HEAD.

Что же касается js-файлов, то с ними несколько проще. В отличие от стилей, js-файлы или js-код может указываться в произвольном месте. Если компонент использует какой-то свой js-файл, то удобней всего его разместить в каталоге components/js и подключить произвольным образом в самом компоненте. Имя js-файла никак не ограничивается.

Опции компонента

В некоторых случаях компонент должен иметь свои опции. Файлы опций размещаются в каталоге components/options и представляют свобой стандартный ini-файл. Правила именования такие же как и для css-стилей, только расширение «.ini».

MaxSite CMS автоматически подключит опции компонентов в Настройке шаблона.

Если в опциях компонента используется php-функция (PHP_START ... PHP_END), то эту функцию следует разместить в components/options в одноименном php-файле. Сделано это для того, чтобы функция смогла подключиться до ini-файла и корректно отработать.

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

Традиционная вёрстка не предполагает использование компонентов, поэтому верстальщику по-началу будет несколько непривычно держать в голове тот факт, что компонент может жить своей жизнью, а модульная сетка сайта - своей. Но на деле всё оказывается гораздо проще и удобней. Единственный нюанс, который следует учитывать - это то, что компоненты - строительные кубики сайта - могут комбинироваться произвольно и могут быть включены и отключены в админ-панели. Это накладывает некоторые обязанности на верстальщика делать корректный css-код, который будет вести себя надлежащим образом в сочетании с другими блоками.

Возмём простой пример. Позиционирование блока компонента.

В «традиционной» вёрстке отступы между двумя компонентами (отмечено красной стрелкой) можно задать как margin для Компонента2. Однако, если поменять расположение второго компонента (2-3-1), то этот отступ окажется неверным.

Правильным будет указание нулевого отступа между компонентами, а все остальные отступы нужно делать уже внутри компонента (отмечено зеленым цветом). В этом варианте отображение блоков будет корректным в любом расположении.

Единственный «недостаток» такого варианта - скорее всего потребуется дополнительный внутренний wrap-блок, который, собственно и будет выполнять margin-отступ.

Компоненты своего шаблона

При создании своего шаблона, конечно же, лучше стремиться к полной совместимости с default-компонентами. Но, в некоторых случаях можно упростить задачу и сделать поддержку только своих компонентов.

В любом случае, если вы делаете шаблон, то обязательным правилом будет наличие в каталоге «components» только тех компонентов, которые корректно работают в шаблоне. Не нужно пытаться объять необъятное: понятно, что чем больше компонентов поддерживает шаблон, тем он удобней и универсальней, но и поддержка должна быть корректной.

Практический пример: произвольный текст в шапке

Рассмотрим очень простой пример компонента. Пусть это будет блок в шапке с произвольным текстом. Текст можно будет задавать в админ-панели.

Шаг 1. Создадим файл text-header.php в каталоге компонентов.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
if ($text_header = mso_get_option('component-text-header', 'templates', ''))
	echo '<div class="text-header"><div>' 
		. $text_header 
		. '</div></div>';

Мы получаем опцию component-text-header и, если в ней что-то есть, выводим её в блоке div.text-header.

Шаг 2. Подключим опцию component-text-header. Создаём файл text-header.ini в каталоге components/options.

[Текст в шапке]
options_type = templates
options_key = component-text-header
type = textarea
description = "Укажите текст, который будет выведен в компоненте <b>text-header</b>"
default = ""

Шаг 3. Выбираем компонент в настройке шаблона.

Обратите внимание, что появилась опция для нашего компонента.

Теперь, если зайти на сайт, то увидим наш текст.

Шаг 4. Настраиваем оформление. C практической точки зрения, css-оформление нашего текста удобней задать прямо в тексте, поскольку он поддерживает обычный HTML и style. Но в образовательных целях, подключим отдельный css-файл.

Создадим файл text-header.css в каталоге components/css.

div.text-header {font-size: 14pt; text-align: center; color: Darkslateblue;}
div.text-header div {margin: 10px 0; padding: 10px; text-shadow: 0 2px 3px gray;}

Вложенный DIV используется для отступов текста. Остальные стили просты и не требуют объяснений. Проверяем вывод на сайте.

Если компонент является обзятельной частью шаблона

Компоненты не только отвечают за оформление, но и выполняют какую-то функциональную часть. Но, иногда встречаются такие дизайны, в которых шапка используется только как оформительская часть. Большинство таких задач решается обычными css-стилями без «привлечения» компонентов. Но, если вдруг этого сделать невозможно, то компоненты могут выполнять и чисто оформительскую функцию.

Подход здесь очень простой: также создаётся отдельный файл компонента, в котором размещается необходимый html-код. Поскольку предполагается, что компонент будет неотъемлемой частью шаблона, то css-стили можно разместить в общем css-файле, например add_style.css (см. «Использование CSS-стилей в шаблоне Default»).