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

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

 

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

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

  1. <?php foreach ($fields as $id => $field): ?>
  2. <?php if (!empty($field->separator)): ?>
  3. <?php print $field->separator; ?>
  4. <?php endif; ?>
  5.  
  6. <<?php print $field->inline_html;?> class="views-field-<?php print $field->class; ?>">
  7. <?php if ($field->label): ?>
  8. <label class="views-label-<?php print $field->class; ?>">
  9. <?php print $field->label; ?>:
  10. </?php></label>
  11. <?php endif; ?>
  12. <?php
  13. // $field->element_type is either SPAN or DIV depending upon whether or not
  14. // the field is a 'block' element type or 'inline' element type.
  15. ?>
  16. <<?php print $field->element_type; ?> class="field-content"><?php print $field->content; ?></?php></<?php>element_type; ?>>
  17. </?php></?php></?php></?php></<?php>inline_html;?>>
  18. <?php endforeach; ?>
  19. </?php></?php></?php></?php></?php>

На его основе создаем php файл со следующим содержимым.
  1. <?php foreach ($fields as $id => $field): ?>
  2. <?
  3. if($id=='field_news_img_fid'){if($field->label){$img=$field->label.':'.$field->content;}else{$img=$field->content;}}
  4. if($id=='created'){if($field->label){$created=$field->label.':'.$field->content;}else{$created=$field->content;}}
  5. if($id=='title'){if($field->label){$title=$field->label.':'.$field->content;}else{$title=$field->content;}}
  6. if($id=='totalcount'){if($field->label){$count=$field->label.':'.$field->content;}else{$count=$field->content;}}
  7. ?>
  8. <?php endforeach; ?>
  9.  
  10. <table style='border: 1px solid #FF7F27;margin-top: 23px;'>
  11. <tbody style='border-top: 1px solid #FF7F27'>
  12. <tr>
  13. <td><?=$img?></?=$img?></td>
  14. <td><?echo $title.'<br />'.$created.'<br />'.$count;?></?echo></td>
  15. </tr>
  16. <tbody>
  17. </tbody></tbody></table>
  18. </?php></?></?php>
Называем его views-view-fields--lenta-novostei--block-1.tpl.php(подчеркнуто на фото) и кладем его в папку темы.

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

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

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


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

  1. <p style='font-size:14px;color:#FF5027'>Случайное фото</p><?php print $output; ?>
  2. </?php>
Стилизируйте как вам угодно.

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

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

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

Открываем папку темы и создаем файл с именем node-statia.tpl.php .Копируем в него содержимое файла node.tpl.php
Ниже я приведу некоторые комментарии по коду.
  1. <?php
  2. // $Id: node.tpl.php,v 1.3 2008/12/25 13:33:29 troy Exp $
  3. ?>
  4. <div class="node<?php if ($sticky&&$page == 0) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
  5. <?php if ($picture) {
  6. print $picture; //Изображение ноды.
  7. }?>
  8.  
  9. <span class="submitted"><?php print $submitted; //Инфо о том кем и когда была создана нода. ?></?php></span>
  10.  
  11. <?php /* заголовок материала */ if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></?php></a></h2><?php }; ?>
  12.  
  13.  
  14. <div class="content clear-block"><?php print $content; //содержимое ноды ?></?php></div>
  15. <?php if ($terms): ?><div class="taxonomy"><?php print $terms; //теримины таксономии данного материала ?></?php></div><?php endif; ?>
  16. <?php if ($links) { ?><div class="links">&raquo; <?php print $links; //ссылка на редактирование ?></?php></div><?php }; ?>
  17. </?php></?php></?php></?php></?php></?php></?php></?php></div>
  18. </?php>
Давайте под заголовком разместим тэги,дату публикации уберем,а ссылку на комментарии подвинем налево. Изменим шаблон следующим образом.
  1. <?php
  2. // $Id: node.tpl.php,v 1.3 2008/12/25 13:33:29 troy Exp $
  3. ?>
  4. <div class="node<?php if ($sticky&&$page == 0) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
  5. <?php if ($picture) {
  6. print $picture;
  7. }?>
  8.  
  9. <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></?php></a></h2><?php }; ?>
  10.  
  11. <?php if ($terms): ?><div class="taxonomy"><?php print $terms; ?></?php></div><?php endif; ?>
  12.  
  13. <div class="content clear-block"><?php print $content; ?></?php></div>
  14.  
  15. <?php if ($links) { ?><div class="links">&raquo; <?php print $links; ?></?php></div><?php }; ?>
  16. </?php></?php></?php></?php></?php></?php></?php></?php></div>
  17. </?php>

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

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


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


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


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

  1. $node->field_news_img[0]['filepath']
хранится путь к изображению новости, а в
  1. $node->content['body']['#value']
текст новости.
Давайте поместим фото в начало новости и сделаем обтекание. Код шаблона будет выглядеть вот так.
  1. <img src="<?php print $node- />field_news_img[0]['filepath'] ?>" style="float:left;margin: 0 5px 5px 0;" />
  2. <?php print $node->content['body']['#value'] ?>
  3. </?php>


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

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