Темизация и верстка под Drupal 6 (часть 2)

Опубликовано 2011.08.26

Теперь правильно расположим элементы.Это уже чистая верстка.
Нажмите на слово тема и увидите список элементов вьюса.

Нажмите на Стиль вывода колонок и увидите код, который выводит этот вьюс.

<?php foreach ($fields as $id => $field): ?>
  <?php if (!empty($field->separator)): ?>
    <?php print $field->separator; ?>
  <?php endif; ?>
 
  <<?php print $field->inline_html;?> class="views-field-<?php print $field->class; ?>">
    <?php if ($field->label): ?>
      <label class="views-label-<?php print $field->class; ?>">
        <?php print $field->label; ?>:
      </?php></label>
    <?php endif; ?>
      <?php
      // $field->element_type is either SPAN or DIV depending upon whether or not
      // the field is a 'block' element type or 'inline' element type.
      ?>
      <<?php print $field->element_type; ?> class="field-content"><?php print $field->content; ?></?php></<?php>element_type; ?>>
  </?php></?php></?php></?php></<?php>inline_html;?>>
<?php endforeach; ?>
</?php></?php></?php></?php></?php>

На его основе создаем php файл со следующим содержимым.

<?php foreach ($fields as $id => $field): ?>
<?
if($id=='field_news_img_fid'){if($field->label){$img=$field->label.':'.$field->content;}else{$img=$field->content;}}
if($id=='created'){if($field->label){$created=$field->label.':'.$field->content;}else{$created=$field->content;}}
if($id=='title'){if($field->label){$title=$field->label.':'.$field->content;}else{$title=$field->content;}}
if($id=='totalcount'){if($field->label){$count=$field->label.':'.$field->content;}else{$count=$field->content;}}
?>
<?php endforeach; ?>
 
<table style='border: 1px solid #FF7F27;margin-top: 23px;'>
	<tbody style='border-top: 1px solid #FF7F27'>
		<tr>
			<td><?=$img?></?=$img?></td>
			<td><?echo $title.'<br />'.$created.'<br />'.$count;?></?echo></td>
		</tr>
	<tbody>
</tbody></tbody></table>
</?php></?></?php>

Называем его views-view-fields--lenta-novostei--block-1.tpl.php(подчеркнуто на фото) и кладем его в папку темы.

Потом обязательно нажимаем кнопку Пересканировать файлы шаблонов.

Сохраняем вьюс.Открывает главную страницу сайта.

Теперь темизируем случайное фото.
Открываем его вьюс, убираем метку поля Изображение. Также жмем Тема и смотрим код Поле Содержимое: Изображение (field_pic_img) (ID: field_pic_img_fid).

Создаем файл с именем, которое находится последним в списке(обведено).
Давайте темизируем его так:

<p style='font-size:14px;color:#FF5027'>Случайное фото</p><?php print $output; ?>
</?php>

Стилизируйте как вам угодно.

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

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

Создание tpl файла темы ноды.
Вначале узнаем машинное имя типа материала

Открываем папку темы и создаем файл с именем node-statia.tpl.php .Копируем в него содержимое файла node.tpl.php
Ниже я приведу некоторые комментарии по коду.

<?php
// $Id: node.tpl.php,v 1.3 2008/12/25 13:33:29 troy Exp $
?>
  <div class="node<?php if ($sticky&&$page == 0) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print $picture; //Изображение ноды.
    }?>
 
 <span class="submitted"><?php print $submitted; //Инфо о том кем и когда была создана нода. ?></?php></span>
 
    <?php /* заголовок материала */ if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></?php></a></h2><?php }; ?>
 
 
    <div class="content clear-block"><?php print $content; //содержимое ноды  ?></?php></div>
	<?php if ($terms): ?><div class="taxonomy"><?php print $terms; //теримины таксономии данного материала ?></?php></div><?php endif; ?>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links; //ссылка на редактирование ?></?php></div><?php }; ?>
  </?php></?php></?php></?php></?php></?php></?php></?php></div>
</?php>

Давайте под заголовком разместим тэги,дату публикации уберем,а ссылку на комментарии подвинем налево. Изменим шаблон следующим образом.

<?php
// $Id: node.tpl.php,v 1.3 2008/12/25 13:33:29 troy Exp $
?>
  <div class="node<?php if ($sticky&&$page == 0) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print $picture; 
    }?>
 
    <?php  if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></?php></a></h2><?php }; ?>
 
	<?php if ($terms): ?><div class="taxonomy"><?php print $terms; ?></?php></div><?php endif; ?>
 
    <div class="content clear-block"><?php print $content;  ?></?php></div>
 
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links; ?></?php></div><?php }; ?>
  </?php></?php></?php></?php></?php></?php></?php></?php></div>
</?php>

Так как у нашего типа материала нет кучи cck-ейных полей-то темизировать особо нечего.
Сохраняем файл.Выглядеть это будет так

Теперь обязательно надо очистить кэш друпала. Открываем Настройка сайта->Производительность. Внизу кнопка очистки кэша.
Открываем любой материал типа статья, как видите всё получилось.

Новости будем темизировать с помощью Content Templates.Качаем.Включаем его

Открываем Управление содержимым->Content Templates. Жмём править шаблон напротив типа содержимого новости.

Раскрываем поля Содержимое и Переменные тела.Если отметить пункт Влияет на вывод тела, от материал будет отображаться как будет задано в поле Шаблон тела. Кликая по названиям переменных в поле Переменные тела можно добавлять их в шаблон.Например в переменной

$node->field_news_img[0]['filepath']

хранится путь к изображению новости, а в

$node->content['body']['#value']

текст новости.
Давайте поместим фото в начало новости и сделаем обтекание. Код шаблона будет выглядеть вот так.

<img src="<?php print $node- />field_news_img[0]['filepath'] ?>" style="float:left;margin: 0 5px 5px 0;" />
<?php print $node->content['body']['#value'] ?>
</?php>

Сохраняемся.

Читаем следующую статью