Журнал PC Magazine/RE №11/2009 - PC Magazine/RE

В этой статье я расскажу о трех этапах темизации, охватывающих практически 100% задач, связанных с изменением внешнего вида сайта: разработка общего шаблона для всех страниц сайта и «кастомных» шаблонов для избранных страниц; разработка шаблонов для разных типов документов и списков; изменение внешнего вида форм (поиск, авторизация и любые другие стандартные и создаваемые внешними модулями формы).

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

Используемые термины

Тема оформления – это набор файлов, отвечающих за внешний вид сайта. Тема оформления определяет HTML-макет страницы, используемые на ней CSS-файлы и JavaScript. Несмотря на то что шаблоны, используемые в темах оформления, позволяют исполнять PHP-код, в них не должно быть кода, не связанного с отображением информации. Тема оформления должна на входе получать готовые массивы данных, а на выходе создавать из них HTML-код. Логика программы реализуется в модулях.

Для создания тем оформления можно использовать различные шаблонные «движки» (шаблонизаторы), такие как Smarty, PHPTAL и др., однако по умолчанию в системе может быть применен только PHPTemplate – шаблонный «движок», специально разработанный для Drupal. Если надо разработать тему оформления для Drupal с нуля, то рекомендуется использовать именно его, но если на Drupal переносится существующий сайт, для которого уже разработан шаблон на основе одного из альтернативных шаблонизаторов, то можно добавить его, разместив соответствующий «движок» в папке sites/all/themes/engines вашей инсталляции Drupal. Скачать модули, интегрирующие Drupal с внешними шаблонизаторами, можно по ссылке http://drupal.org/project/Theme+engines.

Все страницы разделяются на регионы – области страницы, каждая из которых может содержать один или несколько блоков с данными. Например, по умолчанию большинство стандартных тем оформления состоит из пяти регионов: левая и правая колонка, шапка, подвал сайта и регион с основным его содержимым. Такой макет страницы наиболее популярен, поскольку удовлетворяет требованиям большинства пользователей; с его помощью удобно строить новостные сайты и блоги. Однако это не означает, что все сайты, использующие Drupal, должны иметь такую структуру. Разработчик может определять в макете страницы любое количество дополнительных регионов и размещать их в любых самых неожиданных местах.

Блок – это набор особым образом сформатированных данных. Внешний вид и содержимое блока определяются создающим его модулем и функциями темизации (подробнее об этих функциях см. PC Magazine/RE, 9/2009), а расположение – администратором сайта. Используя специальный графический интерфейс, администратор может методом буксировки (drag-and-drop) разместить любой блок системы в любом из доступных регионов. Примером блока может служить форма входа в систему или облако тегов.

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

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

Примеры сайтов на Drupal

• http://blogroll.pcmag.ru – система мониторинга ИТ-блогов, специальный проект PC Magazine/RE

• http://zerut.ru – сборник карикатур лучших зарубежных авторов. Здесь темизировано все: списки документов, форма входа, облако тегов и т. д.

• http://www.chopped-tomatoes.com – Интернет-магазин на Drupal.

• http://www.csspig.com – галерея сайтов.

• http://designslices.com – еще один красивый Drupal-сайт.

• Список 70 самых красивых Drupal-сайтов можно найти на http://mogdesign.eu/blog/70-beautiful-drupal-sites/.

• В блоге Дриса Байтаерта, создателя Drupal, публикуются самые интересные, причем не только с точки зрения дизайна, Drupal-сайты (см. http://buytaert.net/tag/drupal-sites).

Анатомия темы оформления

Как и в случае с модулем, разработка которого рассматривалась в предыдущей статье, тема оформления должна иметь уникальное имя, состоящее из строчных латинских букв, цифр и знаков подчеркивания, и это имя должно начинаться с буквы. Тема оформления – это несколько файлов, которые располагаются в папке sites/all/themes/имя_темы относительно корня Drupal.

PHPTemplate при сборке страницы берет информацию из пяти основных файлов: имя_темы.info, page.tpl.php, node.tpl.php, block.tpl.php, template.php. Если же включен модуль comment, для вывода комментариев используется шаблон comment.tpl.php.

Файл имя_темы.info содержит служебную информацию: название и описание темы оформления, список используемых в ней *.css– и *.js-файлов и список регионов (ссылку на подробное описание всех параметров, используемых в *.info-файле темы, можно найти во врезке в конце статьи). Данные, находящиеся в этом файле, кэшируются в базе данных, и чтобы внесенные в него изменения вступили в силу, нужно этот кэш сбросить. Самый простой способ сделать это – просто зайти на страницу со списком тем и нажать кнопку Save configuration; при этом сбросится только закэшированная информация из *.info-файла, но не весь кэш сайта.

Page.tpl.php – это основной шаблон, в нем размещается HTML-код всей страницы, которая позже будет выведена пользователю. В частях страницы, где будет выводиться содержимое регионов и основной текст, должны располагаться соответствующие переменные. Например, если в *.info-файле не указано иное, то в каждой теме оформления присутствует пять основных регионов (их описание я давал выше), которые представлены переменными $left, $right, $header, $footer, $content. В первых четырех переменных выводятся блоки, размещенные в соответствующих регионах, в переменной $content находится основное содержимое страницы, а это или шаблон node.tpl.php (если просматривается документ, – например, новость или запись в блоге) с выведенными в нем данными, или страница, созданная каким-либо модулем, – например, список, генерируемый модулем Views.

Описание схемы страницы

1 – основной шаблон страницы, определяется в файле page.tpl.php;

2-1 – регион «левая колонка» (определяется переменной $left в шаблоне page.tpl.php);

2-2 – регион «основное содержимое страницы» ($content),

2-3 – регион «подвал сайта» ($footer);

3 – блоки, размещенные в левой колонке, определяются шаблонами block.tpl.php или его модификациями (block-region.tpl.php и др.);

4 – документы из «ленты новостей», определяются шаблоном node.tpl.php или его модификациями (например, node-имя_типа_контента.tpl.php).

Кроме переменных, содержащих видимые пользователю данные, в шаблоне page.tpl.php должно размещаться несколько служебных переменных. Скажем, между тегами <head> страницы располагаются переменные $head, $styles, $scripts. В этих переменных Drupal собирает HTML-код, добавляющий к странице мета-теги, файлы стилей и java-скрипты соответственно. Наличие этих трех переменных позволяет программистам в своих модулях, используя API-функции drupal_add_css(), drupal_add_js() и некоторые другие, добавлять к странице свои стили или другие файлы, не изменяя файлов темы оформления.

В файле page.tpl.php, кроме перечисленных выше, может находиться еще десяток переменных, выполняющих разные функции: $primary_links, $secondary_links, $search_box, $tabs, $messages, $breadcrumbs, $closure и т. д. Все они важны. При необходимости описание всех доступных в page.tpl.php переменных можно найти по ссылке, размещенной во врезке в конце статьи.

На заметку: готовые решения

• Темы оформления, позволяющие менять цветовую схему через интерфейс администратора: Pixture Reloaded (http://drupal.org/project/pixture_reloaded), Dropshadow (http://drupal.org/project/dropshadow), Wabi (http://drupal.org/project/wabi), Garland (стандартная тема Drupal).

• Темы оформления, обладающие множеством настроек и регионов: Deco (http://drupal.org/project/deco), Acquia Marina (http://drupal.org/project/acquia_marina).

Часто бывает нужно создать разное оформление для страниц сайта. Движок PHPTemplate имеет необходимые для этой задачи возможности. Чтобы задать свой шаблон для определенной страницы, следует в папке с темой оформления создать копию файла page.tpl.php и присвоить ей имя, соответствующее одной из масок: page-front.tpl.php будет использоваться как шаблон для главной страницы сайта; а page-путь_к_внутренней_странице.tpl.php – как шаблон для указанной внутренней страницы; page-node.tpl.php – при просмотре материала; page-node-nid.tpl.php, где nid – id документа – при просмотре документа с указанным id; page-node-edit.tpl.php используется при редактировании документа. Кроме того, вы можете использовать шаблоны maintenance-page.tpl.php и maintenance-page-offline.tpl.php, которые будут выводиться в случае ошибок соединения с базой данных или в случае первода сайта в offline-режим.

Node.tpl.php – шаблон, по умолчанию используемый для вывода содержимого документа. В шаблоне node.tpl.php размещается HTML-код, задающий форматирование документов, таких как Страницы (Page) и Новости (Story); в нем доступны переменные $title, $teaser, $content, содержащие заголовок, анонс и полный текст документа, а также ряд служебных переменных.