Блог Vaden Pro

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

Шаблоны page.tpl.php и node.tpl.php. Темизация страницы и ноды материала в Drupal 7.

Дата:23.07.15 в 15:24
Раздел: 

Drupal темизация страницы

Подготовка к работе

Итак, для продолжения разбора работы с темизацией Drupal 7 нам понадобится шаблон сайта. Мы продолжим работать с сайтом из части курса посвященной представлениям, вы же можете использовать любой свой сайт, принцип работы везде будет одинаков.

Подключим нашу тему, и расположим созданные нами блоки по ее регионам:

Drupal блоки сайта

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

Drupal поля страницы

Настроенными для вывода следующим образом:

Drupal Отображение полей

Поскольку цсс у нас пока еще вообще не написан страница книги будет выглядеть следующим образом:

Страница сайта без оформления

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

Сайт после расположения регионов по местам

Если что-то не понятно по начальной конфигурации сайта для работы можно спросить в комментариях или же ознакомиться с предыдущими главами курса.

page.tpl.php и node.tpl.php в чем разница?

Начнем с разбора того какой шаблон и для чего необходим.

page.tpl.php

Как я уже говорил в предыдущем уроке, page.tpl.php используется в Drupal для вывода основных регионов страницы сайта:

Drupal регионы сайта

Для чего стоит его использовать? Создав разные шаблоны для разных типов материала мы можем:

  • Поменять при необходимости местами вывод регионов сайта для разных типов материала
  • Добавить дополнительные элементы на страницу (вывести хлебные крошки над контентом, вывести в коде дополнительные блоки и тд).
  • Убрать из вывода не нужные нам регионы сайта
  • Добавить свои обертки и классы регионам сайта специфичные для конкретного типа материала

Тобишь в целом, если нас исходно все устраивает в конфигурации нашего родного page.tpl.php, то создавать новые под разные типы материалов нет необходимости. Даже более того, это не желательно, ведь в случае переделки сайта в будущем, множество шаблонов page--[системное имя Вашего типа материала].tpl.php может серьезно усложнить работу над сайтом.

Как подключить page--[системное имя Вашего типа материала].tpl.php?

В отличие от шаблонов ноды, которые Drupal увидит сразу без всяких заморочек, для подключения page--[системное имя Вашего типа материала].tpl.php необходимо его предварительно активировать, добавив в файл template.php следующий код:

//добавляем шаблоны типам материалов
function mytheme_preprocess_page(&$vars, $hook) {
    if (isset($vars['node'])) { 
        $vars['theme_hook_suggestions'][] = 'page__'. str_replace('_', '--', $vars['node']->type);
    }
}

Теперь просто копируем наш page.tpl.php, меняем название скопированного нами файла на page--[системное имя Вашего типа материала].tpl.php. Системное имя можно посмотреть тут:

Drupal системное имя материала

В итоге название нового файла у нас вышло page--book.tpl.php. В него мы вносим необходимые нам коррективы стандартного файла (к примеру, выведем сюда хлебные крошки, а у стандартного page.tpl.php удалим их).

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

Drupal очистка кеша

Итак, проверяем. Страница любого другого типа материала:

Страница сайта

Страница типа материала книга:

Страница сайта

Как видим, все подключилось.

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

node.tpl.php

Данный шаблон соответствует содержимому следующего блока:

Drupal содержимое страницы

Тобишь то, что мы выводим в содержимое страницы (содержимое ее полей и тд), следует оформлять используя node.tpl.php.

Для темизации дефолтного представления, как и в случае с page можно использовать просто node.tpl.php, чтобы работать с конкретным типом материала используем node--[системное имя Вашего типа материала].tpl.php шаблон, для нашего случая это node--book.tpl.php.

Как подключить node--[системное имя Вашего типа материала].tpl.php?

Создаем файлик с таким названием в нашей теме, и вставляем в него код из базового шаблона, который мы найдем в директории корень сайта/modules/node/node.tpl.php. В итоге получится что-то вроде:

Drupal node.tpl.php

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

<?php
print render($content);

И далее дописать свой код, но это уже на Ваше усмотрение, для начала я рекомендую все же использовать базовый шаблон.

После, как и с любым шаблоном tpl.php , очистим кеш, чтобы сайт его увидел.

Он выведет все содержимое страницы, как оно передается на страницу по-умолчанию.

Темизация содержимого страницы

Для продолжение дальнейшей работы необходимо установить себе модуль Devel .

Чтобы узнать что передается нам на страницу перед выводом контента (см выделенный блок кода на скрине выше) добавим функцию dpm() в которую поместим интересную нам переменную. Эта функция выведет в сисетмных сообщениях все, что друпал передает в переменную, которая в нее вписана.

В итоге у нас вышло:

  <div class="content"<?php print $content_attributes; ?>>
    <?php
      hide($content['comments']);
      hide($content['links']);
//выводим содержимое страницы
      dpm($content);
      print render($content);
    ?>
  </div>

И на экране появилось (если произошло что-то непонятное, то убедитесь что установлен Devel, поскольку dpm это функция этого модуля):

Drupal dpm node content

Это то, что отдает Drupal для вывода на страницу.

Рассмотрим основные приемы, которые нам могут понадобиться для подобающего оформления страницы:

Изменение порядка полей

Как видим, обычные поля отдаются в том же порядке и с теми же настройками, что и в настройках отображения нашей страницы:

Drupal порядок полей

Перетаскивая поля на данной странице (структура/типы материалов/наш тип материала/управление отображением) мы поменяем и их вывод на самой странице и в dpm соответственно.

Исключение составляют лишь комментарии и линки, которые друпал отдает по-умолчанию и не дает нам доступа к ним из админки.

Убрать из вывода на страницу ненужные элементы

Чтобы вывести комментарии и линки в том месте ноды, где нам это необходимо, как мы могли уже заметить, используется следующий прием: они убираются из стандартного вывода при помощи функции hide() и выводятся в нужном месте шаблона.

Итак, 2 раза кликаем на интересующее нас поле и копируем нужную нам для работы информацию:

Drupal dpm

Синтаксис:

hide($переменая, которая находится в dpm[что мы из него только что скопировали]);

Ну а выводится обычным

print $переменая, которая находится в dpm[что мы из него только что скопировали];

- в случае, если это простое значение или же

print render($переменая, которая находится в dpm[что мы из него только что скопировали]);

- если имеем дело с массивом с несколькими значениями.

Давайте уберем из шаблона линки полностью, а комментарии выведем после контента, в итоге вышло:

Drupal код страницы

Создание оберток

Очень часто необходимо добавить дополнительный контейнер, который бы включал в себя поле или группу полей, чтобы потом было удобно это все оформлять, для этого используем ['#prefix'] и ['#suffix'].

Давайте расположим поля жанр, язык и обложка книги по левой стороне страницы, а все остальные поля по правой, добавив им обертки.

Так же как и в прошлом случае, делаем двойной клик на интересном нам поле, копируем полученный код и при помощи ['#prefix'] добавляем то, что должно вывестись перед полем, а ['#suffix'] после. В итоге у меня вышло:

Drupal обертка полей

Пара строк CSS и вуаля, наши елементы страницы стали на свои места как мы и хотели:

.leftBook {
    display: inline-block;
    vertical-align: top;
    width: 250px;
}
.rightBook {
    display: inline-block;
    vertical-align: top;
    width: 455px;
}

Drupal обертки страницы

Вывести свой блок между полями страницы

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

Давайте выведем под текстом анонса, перед звездочками, блок из сайдбара с популярными книгами.

Заходим на страницу блоков сайта, нажимаем редактирование нашего блока, нам понадобятся 2 значения из строки браузера:

Drupal информация для вывода блока в коде

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

Теперь заходим в наш код и при помощи функции

module_invoke('модуль из адресной строки', 'block_view', 'айди блока');

Получим наш блок, запишем его в переменную, добавим ему обертку и выведем там, где нам необходимо на странице. В нашем примере это выглядит так:

Drupal вывод блока в коде

Код, который использовался для вывода блока:

//готовим к выводу нужный нам блок
$custom_block = module_invoke('views', 'block_view', 'book-block_1');
//делаем ему обертку
$custom_block = '<div class="myBlock"><h2>Популярно</h2>' . render($custom_block['content']) . '</div>';
//выводим блок после поля body
$content['body']['#suffix'] = $custom_block;

В итоге получили:

Drupal блок между полей

При желании теперь из сайдбара этот блок можно убрать.

Обратите внимание!

  • В PHP для объединения разных по типу частей строки используется точка:PHP объединение частей строки
  • Обычный текст , которым мы делаем обертки, берется в кавычки
  • Модификации в страницу мы вносим ДО строчки с выводом в печать переменной с которой работаем ( в нашем случае это print render($content);)

Вывести заголовок страницы, автора и дату создания

Итак, страица уже практически собрана, остались последние штрихи, поскольку шаблон типичный, то стоило бы вывести в него еще заголовок страницы из админки, и нормально автора и дату публикации.

Как Вы уже могли догадаться, в переменной $content мы его не найдем- там только содержимое страницы, необходимая нам информация хранится в переменной $node, вставляем ее в наш dpm() и извлекаем нужные нам значения:

drupal dpm

drupal dpm

drupal dpm

Чтобы вывести заглавие и автора нам ничего особого не понадобится, а для вывода даты воспользуемся функцией

format_date(данные о дате, 'custom', 'как их вывести')

И выведем их просто над нашим содержимым страницы, в итоге наш код выглядит следующим образом:

drupal code node

А на странице появилась необходимая нам информация:

Страница сайта

Осталось отключить вывод системной подписи «Опубликовано чт, 05/28/2015 - 20:59 пользователем library-admin» это делается снятием галочки на странице редактирования типа материала:

Drupal убрать со страницы автора и дату публикации

На этом работу с шаблоном node.tpl.php можно считать завершенной.

Итоги работы с node.tpl.php

О темизации полей страницы, аннонса материала который тут был выведен в поле, и комментариев мы поговорим в дальнейших уроках курса.

Теперь удалим наш dpm() из node.tpl.php, чтобы он не выводил ненужной теперь информации. Весь код страницы, который мы получили в итоге:

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
 
    <?php print $user_picture; ?>
 
    <?php print render($title_prefix); ?>
    <?php if (!$page): ?>
      <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
    <?php endif; ?>
    <?php print render($title_suffix); ?>
 
    <?php if ($display_submitted): ?>
      <div class="submitted">
          <?php print $submitted; ?>
      </div>
    <?php endif; ?>
 
    <div class="content"<?php print $content_attributes; ?>>
        <?php
        //готовим к выводу нужный нам блок
        $custom_block = module_invoke('views', 'block_view', 'book-block_1');
        //делаем ему обертку
        $custom_block = '<div class="myBlock"><h2>Популярно</h2>' . render($custom_block['content']) . '</div>';
        //убираем из вывода среди полей комментарии и линки
        hide($content['comments']);
        hide($content['links']);
        //добавляем обретки полям
        $content['field_janr']['#prefix'] = '<div class="leftBook">';
        $content['field_pic']['#suffix'] = '</div><div class="rightBook">';
        $content['field_napisana']['#suffix'] = '</div>';
        //выводим блок после поля body
        $content['body']['#suffix'] = $custom_block;
        //выводим перед содержимым страницы ее заглавие, дату создания и автора
        print '<div class="titleGroup"><h1>' . $node->title . '</h1>';
        print '<span class="name">' . $node->name . '</span>';
        print '<span class="date">' . format_date($node->created, 'custom', 'j.m.y в G:i') . '</span></div>';
        //выводим на экран уже обработанное содержимое страницы
        print render($content);
        ?>
    </div>
 
    <?php 
    //выводим под контентом комментарии
    print render($content['comments']); 
    ?>
 
</div>

Ее скриншот:

drupal темизированная страницы

Подводя итоги

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

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

Оценок: 12 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по Drupal (в открытом доступе)