Шаблоны для новичков. Урок 14. Поблочная вёрстка

После достаточно долгого перерыва, решил продолжить публикацию серии уроков по созданию шаблонов. За эти месяцы я немного переосмыслил некоторые моменты и, с текущей позиции считаю, что последние 12 и 13 уроки не совсем верные в стратегическом плане. (Я не стал их убирать, поскольку информация в них всё-таки полезная.)

В новом свете есть смысл вернуться к 11 уроку, где я привожу прототип будущего сайта. Принципиальное отличие будет в том, что я всё-таки постараюсь давать поменьше готового кода, иначе мы просто в нём увязнем. Я постараюсь показать саму методику создания шаблонов.

Еще важный момент. Я всегда ориентируюсь на последнюю версию MaxSite CMS, которая отмечается как prelatest. Это самая последняя и свежая версия системы.

Впрочем, вернёмся к нашим баранам шаблонам.

С точки зрения вебмастера, шаблон сайта можно рассматривать сразу с нескольких сторон.

Визуальное оформление шаблона делается через CSS. По сути работа верстальщика и сводится к написанию css-кода. Мы используем для верстки LESS. И не спрашивайте почему, поскольку это очевидно уже даже самым отсталым слоям населения. Но написание css-кода тоже задачка не такая простая, поскольку кода довольно много, и нужно как-то в этом всём ориентироваться.

LESS позволяет разбивать верстку шаблона на части. То есть вместо единого мессива кода, мы можем выделить в отдельные файлы различные блоки и верстать их независимо. Дополнительный плюс этого подхода ещё в том, что какие-то файлы могут быть повторно использованы в других шаблонах. Можно даже заранее создавать их коллекции.

Главная задача вебмастера в этом разрезе придумать удобную для себя структуру каталогов для less-файлов. Об этом речь пойдет позже, но нетерпеливые могут обратиться к моей статье «Организация Less-файлов».

Функциональность шаблона обеспечивается php-файлами. Мне нравится MaxSite CMS тем, что в отличие от других систем, здесь вебмастер получает в своё распоряжение уже массу готовых решений. Наверное это потому что я сам делаю сайты и по природе своей достаточно ленив (впрочем, как и все программисты). Поэтому лучше поручить какой-нибудь функции генерировать скучный html-код, чем писать его ручками.

Получается, что в MaxSite CMS для большинства задач уже имеются готовые решения в виде, скажем, функций. Задача вебмастера - узнать о них.

На физическом уровне все php-файлы размещены по отдельным каталогам:

• components - компоненты шапки и подвала
• custom - «расширение» шаблона
• type - файлы типов
• type_foreach - меняем типовой вывод type-файла
• stock - прочие файлы шаблона

Вебмастер должен в них ориентироваться. Во всех случаях php-файлы подключаются при их реальном наличии. Например custom/head.php подключается в секцию HEAD. Нужно что-то добавить в эту секцию? Делаем файл (или копируем из default-шаблона). Не нужно,- ничего и не делаем, как говорится: нет файла, нет проблемы. :lol:

Теперь важный момент: процесс вёрстки шаблона происходит поблочно. Что это значит?

Ещё раз приведу прототип шаблона.

Из предыдущих уроков мы знаем, что вначале нужно задать модульную сетку. На данном шаблоне модульная сетка задаётся блоками header, main (content и sidebar) и footer. Внутри каждой ячейки мы уже располагаем внутренние блоки, в терминах MaxSite CMS - компоненты.

Например header состоит из компонентов: верхнее дополнительное меню и иконки, логотип (можно справа ещё что-нибудь добавить, например баннер) и основное меню с поиском.

Блок main состоит из контента и сайдбара. Здесь особенность в том, что эти вещи выводятся автоматом самой системой (пока будем считать так). Здесь в задачу вебмастера входит лишь указать количество сайдбаров.

Подвал состоит из компонента, который в 4-е колонки выводит 4-е дополнительных сайдбара. Плюс внизу компонент копирайтов и статистики сайта.

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

Секрет вёрстки в том, что сверстать и настроить отдельные блоки проще и быстрей, чем делать это всё в одной куче.

Исходя из этого постулата, нетрудно догадаться, что на физическом уровне верстальщик будет иметь дело с отдельными файлами. Например верхнее дополнительное меню будет состоять из двух файлов: components/menu2.php, где формируется html-код, получаются опции и т.п. и menu2.less, который расположен где-то в less-каталоге и подключается к главному var_style.less через обычный @import.

Этот подход применим ко всем компонентам шаблона.

Следующий момент, на котором нужно остановиться - это то с чего, собственно, начинается новый шаблон. Понятно, что за основу берется каталог _create_a_new_template - этот момент мы даже рассматривать не будем.

Любой шаблон должен начинаться с двух «параллельных» действий:

• формирование через less модульной сетки
• подключение используемых блоков/компонентов

HTML-код модульной сетки уже задан в main.php шаблона. Менять его не следует, но посмотреть где-какие тэги прописаны, лишним не будет. От этого, собственно, и нужно скакать.

В var_style.less подключаем:

@import url('layouts/layout01.less'); // структура сайта

Сама вёрстка в файле layouts/layout01.less. Причём, поскольку будут и другие шаблоны, есть смысл сохранять стили в разных файлах. После в var_style.less подключаем ближайший подходящий файл. Это то повторное использование, о котором я написал выше.

Второе «параллельное» действие выполняется в custom-файлах. Прежде всего нужно определить количество сайдбаров. Если он один, ничего делать и не придется. Если сайдбаров несколько, как в нашем случае, то создаем файл custom/my_functions.php и добавляем:

mso_register_sidebar('2', t('Подвал: 1-й сайдбар', 'templates'));
mso_register_sidebar('3', t('Подвал: 2-й сайдбар', 'templates'));
mso_register_sidebar('4', t('Подвал: 3-й сайдбар', 'templates'));

Это регистрация дополнительных сайдбаров. (Первый - не нужно, он уже зарегистрирован в другом файле.) После этого, сайдбары станут доступны в админ-панели.

Эти сайдбары будут выводиться в компоненте подвала (footer), поэтому код непосредственного вывода будет располагаться уже в этом файле. Если же потребуется вывести сайдбары в «стандартном» месте рядом с контентом, то вывод оформляется в custom/sidebars.php. Впрочем об этом речь пойдет несколько позже.

Далее нужно определить и подключить используемые компоненты. Тут у нас два пути.

Первый - компоненты можно настроить через админ-панель. Это стандартная возможность MaxSite CMS. Рассматривать её не будем: там всё работает автоматом.

Второй - явно указать используемые компоненты/файлы. В этом случае выбор в админ-панели учитываться уже не будет. Для решения этой задачи используются custom/header_components.php и/или custom/footer_components.php.

В своём шаблоне Vehicle я использую вот такой код для компонентов шапки:

$_components = array(
	'components/ns-descr-icons-search.php',
	'components/menu.php',
	'stock/slides/slides.php',
	'components/home-text-header.php'
);
 
foreach ($_components as $_component)
{
	if ($fn = mso_fe($_component)) require($fn);
}

В массиве $_components перечислены используемые файлы с путями относительно каталога шаблона. Далее цикл foreach подключает эти файлы. Технически этот код будет полностью эквивалентен такому:

if ($fn = mso_fe('components/ns-descr-icons-search.php')) require($fn);
if ($fn = mso_fe('components/menu.php')) require($fn);
if ($fn = mso_fe('stock/slides/slides.php')) require($fn);
if ($fn = mso_fe('components/home-text-header.php')) require($fn);

Функция mso_fe() проверяет наличие файла и если есть, то возвращает его полный путь на сервере. Соответственно файл подключается через require(). Если файла нет, то условие не выполняется и подключения не происходит.

Ещё отмечу, что при использовании custom/header_components.php и custom/footer_components.php можно подключать файлы расположенные в любом каталоге шаблона. В этом примере есть подключение слайдера из stock-каталога.

Что делать, если компонент ещё не создан? Тут всё просто: либо используем другой максимально подходящий, либо ставим файл-заглушку.

Например компонент ns-descr-icons-search.php у меня расшифровывается как «Название сайта - описание - иконки - поиск». Вы можете придумать свои сокращения. Они пригодятся, поскольку компонент может использоваться в другом шаблоне.

«Заглушка» представляет собой какой-то простой html-код, вроде такого:

<div class="ns-descr-icons-search"><div class="wrap">
Название сайта - описание - иконки - поиск
</div></div>

Основной div-контейнер всегда имеет css-класс совпадающий с именем файла. Точно по такой же аналогии будет создан и ns-descr-icons-search.less, в котором находятся все стили компонента.

div.ns-descr-icons-search {
	> div.wrap {}
	
	color: red;
}

Подключение в var_style.less:

@import url('components/ns-descr-icons-search.less');

Вот по такой схеме делаются все компоненты и другие блоки шаблона.

Что нам это даёт?

В первую очередь мы разделяем программный и html-код от css/less-стилей. Как показывает опыт, менять html и php-код приходится гораздо реже, чем работать со стилями. В общем-то html и php-код задаётся лишь один раз. После - нужно сверстать/переверстать блок. Поскольку стили выделены в отдельный файл, то и работать с ним будет просто и удобно. Главное на забыть подключить less-файл в var_style.less.

Итого

Нужно понять, что верстка шаблона должна происходить поблочно. Для удобства мы разбиваем шаблон на отдельные файлы: стили, компоненты и custom-файлы. Именно через них и формируется то, что называется шаблоном сайта. Если при этом соблюдать правила именования файлов, то ориентироваться в них будет просто и удобно.

««« Урок 15 | Урок 13 »»»