Советы и хитрости создания шаблонов

За время с последней публикации статьи из цикла «MaxSite CMS для верстальщиков» накопилось несколько новых идей по вёрстке шаблонов. В частности я бы хотел ещё раз вернуться к структуре типичного шаблона MaxSite CMS. Я об этом подробно остановился во второй статье из которой известно, что сам html-шаблон состоит из двух файлов: main-start.php и main-end.php. Данные файлы подключаются type-файлом автоматически до и после непосредственного вывода type-данных.

Таким образом предполагается, что main-start.php и main-end.php являются обязательными файлами шаблона MaxSite CMS и верстальщику необходимо разделять исходный html-шаблон на две части.

Но можно ли ещё упростить работу верстальщика: исключить деление на два файла, а использовать единый файл html-шаблона? Ответ - да, можно.

Для решения этой задачи необходимо вспомнить, что подключение дизайна (html-шаблона) как такового происходит в type-файле:

• получаются type-данные
• подключается main-start.php
• выводятся type-данные
• подключается main-end.php

То есть type-данные выводятся между двумя файлами и именно поэтому мы используем разделение html-шаблона. Однако данный алгортм подключения файлов позволяет использовать main-start.php и main-end.php не для вывода html-шаблона, а для буферизации вывода type-данных в переменную, которую после можно вывести в произвольном месте.

Чтобы было понятно приведу исходные коды.

Файл main-start.php:

ob_start(); // включаем буферизацию вывода

Файл main-end.php:

global $MAIN_OUT; // глобальная переменная
 
$MAIN_OUT = ob_get_contents(); // получаем в $MAIN_OUT весь буфер
ob_end_clean(); // очищаем буфер
 
require('main.php'); // подключаем html-шаблон

Я специально прокомментировал каждую строчку, чтобы было понятно. В целом же алгоритм очень прост: включаем буферизацию вывода, type-данные из буфера сохраняем в переменную $MAIN_OUT и после подключаем html-шаблон - файл main.php.

Таким образом верстка шаблона несколько упрощается, поскольку полностью переносится в один файл. Для примера рассмотрим произвольный main.php, но перед этим я хочу напомнить шестую статью, в которой я рассказываю про Многократно используемые компонеты, представляющие из себя php-файлы с типовыми готовыми решениями, например код меню, форма поиска, шапка и т.п. Особо хочу отметить, что данный подход пригодится не только для шаблонописателя MaxSite CMS, но и любой другой системы. Это здорово облегчает трудозатраты по верстке и я смело советую его использовать.

Рассмотрим небольшой пример. Файл main.php одного из моих шаблонов:

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
	require(getinfo('template_dir') . 'header.php'); 
 
?>
 
<div id="all">
 
<div id="ushka-top"><?php if (function_exists('ushka')) echo ushka("top"); ?></div><!-- /div id="ushka-top"  -->
 
<div id="header">
	<div class="b1"><?php 
		if (file_exists(getinfo('template_dir') . 'component/headers.php')) 
			require(getinfo('template_dir') . 'component/headers.php'); 
		?></div><!-- /div class="b1" -->
 
	<div class="b2"><?php 
		if (file_exists(getinfo('template_dir') . 'component/randomtext.php')) 
			require(getinfo('template_dir') . 'component/randomtext.php'); 
		?></div><!-- /div class="b2" -->
 
	<div id="header-menu"><?php 
		if (file_exists(getinfo('template_dir') . 'component/main-menu.php')) 
			require(getinfo('template_dir') . 'component/main-menu.php'); 
		?></div><!-- /div id="header-menu" -->
</div><!-- /div id="header" -->
 
<div id="main">
	<div id="content"><?php global $MAIN_OUT; echo $MAIN_OUT; ?></div><!-- /div id="content" -->
 
	<div id="sidebar1"><?php 
		mso_show_sidebar('1', NR . '<div class="widget widget_[NUMW] widget_[SB]_[NUMW] [FN] [FN]_[NUMF]"><div class="w0"><div class="w1">', '</div><div class="w2"></div></div></div>' . NR); 
		?></div><!-- /div id="sidebar1" -->
 
</div><!-- /div id="main" -->
 
<div id="footer"><?php 
		if (file_exists(getinfo('template_dir') . 'footer.php')) 
			require(getinfo('template_dir') . 'footer.php'); 
		?></div><!-- /div id="footer"  -->
 
</div><!-- /div id="all"  -->
 
<?php if (function_exists('ushka')) echo ushka('google_analytics'); ?>
</body></html>

В данном случае мы видим достаточно простую html-структуру с легкочитаемым кодом. Отмечу лишь несколько моментов.

1. При вёрстке сайтов я всегда вначале делаю модульную сетку (1, 2, 3). Основа сетки - это тэги с id-атрибутом.

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

if (file_exists(getinfo('template_dir') . 'component/headers.php')) 
			require(getinfo('template_dir') . 'component/headers.php'); 

Поскольку шапка в разных шаблонах может быть разной (например: фоновая картинка, название, описание текстом; фон, лого ссылкой, название, описание; картинкой-ссылкой и т.д.), то у меня есть несколько заготовок из которых я просто выбираю необходимую. Очевидно, что поменять имя файла несравненно проще, чем менять html-код в основном шаблоне.

3. Некоторые функции я прописываю прямо в шаблоне. В данном примере это ушки и сайдбар. То есть если компонента состоит из одной функции, то нет смысла делать из неё отдельный файл.

4. Главная «фишка» - вывод type-данных осуществляется так:

<?php global $MAIN_OUT; echo $MAIN_OUT; ?>

Объявлять $MAIN_OUT глобальной имеет смысл, если она используется ещё где-то в других функциях. Если этого нет (как в этом примере), то global можно удалить.

Думаю, что при таком подходе вёрстка шаблонов под MaxSite CMS становится ещё проще и удобней. Для себя я сразу ставил задачу разделять в MaxSite CMS труд программиста, верстальщика и дизайнера и на текущий момент можно смело заявлять, что мы движемся в верном направлении. :-)

ps Вопрос к моим читателям. Можно попробовать сделать несколько статей с чисто практическим уклоном, где подробно рассказать о вёрстке шаблона с нуля (с картинками и описаниями). Есть интерес?