>WikiSysop: /* Ссылки */

2015-09-27T19:52:55Z

Ссылки

Нова сторінка

* [[Создание темы Drupal из HTML файлов]]

== Файлы шаблонов ==

Общее правило работы с шаблонами Drupal:

# Скопировать стандартный файл шаблона (список всех стандартных файлов шаблонов и правила их именования: https://www.drupal.org/node/1089656) в папку темы (в корень или в папку templates внутри папки темы)
# Изменить его имя по правилам, описанным по ссылке выше или в таблице ниже.
# Добавить в шаблон строку типа: <pre>Это шаблон из файла <?php echo basename(__FILE__); ?></pre>
# Очистить кэш: <pre>drush cc all</pre>
# Посмотреть, что получилось.

Если строка видна, то с шаблоном можно работать дальше — использовать переменные и пр. Не забывая очищать кэш.

== Часто используемые шаблоны ==

{| cellpadding="5" cellspacing="0" border="1"
|+
! Где лежит
! Имя файла
! Вариации (сверху max приоритет)
! Назначение
|-
| modules/system/
| '''html.tpl.php'''
| html--internalviewpath.tpl.php<br>html--node--id.tpl.php
| Основная верстка сайта
|-
| modules/system/
| '''page.tpl.php'''
| page--front.tpl.php<br>page--node--edit.tpl.php<br>page--node--1.tpl.php<br>page--node.tpl.php
|
|-
| modules/node/
| '''node.tpl.php'''
| node--nodeid.tpl.php<br>node--type.tpl.php
| Страницы материалов (нод)
|-
| modules/taxonomy/
| '''taxonomy-term.tpl.php'''
| taxonomy-term--tid.tpl.php<br>taxonomy-term--vocabulary-machine-name.tpl.php
| Страница термина таксономии
|}

== Ноды ==

=== Шаблон ноды ===

Базовым шаблоном для материалов (нод) в Drupal 7 является файл '''node.tpl.php'''.

Оригинальный файл node.tpl.php находится здесь:

/modules/node/node.tpl.php

Скопируйте его в папку вашей темы (или в папку '''templates''' темы) и добавьте в него строку:

Это шаблон из файла <?php echo basename(__FILE__); ?>

Обновите кэш:

drush cc all

Зайдите на любую ноду, чтобы увидеть строку: «''Это шаблон из файла node.tpl.php''»

Файл шаблона определенного типа материалов должен иметь название:

node--<type>.tpl.php

где '''<type>''' — машинное имя типа материала. Например, шаблон для типа материала ''video'':

node--video.tpl.php

Машинное имя типа материала можно увидеть в списке «Структура → Типы материалов» admin/structure/types.

Стандартное содержимое файла шаблона можно взять из файла modules/node/node.tpl.php.

Посмотреть все доступные переменные полей можно с помощью модуля Devel: “Домик → Разработка → Информация о поле”, Поля → клинуть “Array”.

=== Переменные ноды ===

Получить все переменные ноды из шаблона:

<nowiki><pre><?php print_r($node); ?></pre></nowiki>

Или на странице ноды нажать вкладку ''Devel'' (рядом c Просмотр и Правка).

==== Пример 1: выведем в шаблоне содержимое поля body (основной текст) ====

С помощью ''<?php print_r($node); ?>'' найдем полный путь к переменной body:

[[Файл:Drupal print body.png]]

Также его можно узнать через вкладку Devel: ''body → und → 0 → value''.

Теперь в шаблоне ноды напишем:

<?php print $node->body['und'][0]['value']; ?>

==== Пример 2: получим название термина, к которому относится нода, из словаря таксономии hotel_type ====

<pre><?php
$termid = $node->field_hotel_type['und'][0]['tid'];
$term = taxonomy_term_load($termid);
$termname = $term->name; // Название термина
?>

<?php print $termname; ?></pre>

==== Часто используемые переменные ====

<pre>
<h1><?php print $title; ?></h1>
<h1><?php print $node->title; ?></h1>

<li>Тип материала: <?php print $node->type; ?></li>
<li>Изображения: <?php print render($content['field_photo']); ?></li>
</pre>

=== Условия ===

Примеры использования условия:

<pre><?php if ($is_front): ?>
<p>Этот текст будет показан только на главной странице.</p>
<?php endif; ?></pre>

Если тип материала «hotel»:

<pre><?php if (isset($node)): ?>
<?php if (($node->type) != "hotel"): ?>
<p>Это НЕ гостиница.</p>
<?php else: ?>
<p>Это гостиница!</p>
<?php endif; ?>
<?php endif; ?></pre>

или упрошенный вариант:

<pre><?php if (isset($node) and ($node->type) != "hotel"): ?>
<h1><?php print $title; ?></h1>
<?php endif; ?></pre>

Другие условия:

* $is_front — если главная страница
* $logged_in — если пользователь авторизован
* $is_admin — если пользователь администратор
* $status — если материал опубликован
* $sticky — если материал закреплен сверху
* $promote — если материал отображается на главной странице
* $page — если режим полного материала
* $teaser — если режим анонса
* $readmore — если анонс не включает в себя весь материал
* $comment — если комментарии включены
* $view_mode — режим просмотра (full, teaser и т.д.)

== Таксономия ==

Получить все переменные термина таксономии из шаблона ''taxonomy-term.tpl.php'' (взять из папки ''modules/taxonomy/''):

<nowiki><pre><?php print_r($term); ?></pre></nowiki>

== Меню ==

Для темизации меню Drupal 7 использует два шаблона:

* <code>menu_tree</code> — обертка для всего меню
* <code>menu_link</code> — вывод отдельного пункта меню

Чтобы темизировать вывод блока меню, нужно добавить в <code>sites/all/themes/tiun/template.php</code> следующий код, в котором:

* <code>tiun</code> — название темы
* <code>menu_catalog</code> — машинное имя меню

<source lang="php">
function tiun_preprocess_menu_tree(&$variables) {
$tree = new DOMDocument();
@$tree->loadHTML($variables['tree']);
$links = $tree->getElementsByTagname('li');
$parent = '';
foreach ($links as $link) {
$parent = $link->getAttribute('data-menu-parent');
break;
}
$variables['menu_parent'] = $parent;
}
function tiun_menu_tree__menu_catalog(&$variables) {
return '<ul class="menu ' . $variables['menu_parent'] . '">' . $variables['tree'] . '</ul>';
}
function tiun_menu_link__menu_catalog(&$variables) {
$element = $variables['element'];
$sub_menu = '';
$element['#attributes']['data-menu-parent'] = array($element['#original_link']['menu_name'] . '-' . $element['#original_link']['depth']);
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
}
$element['#localized_options']['html'] = true;
// чтобы отобразить дополнительную иконку (например, стрелочку, которая
// отмечает развернутый пункт списка), нужно внутрь тега '<a href...>'
// добавить '<span class="arrow"></span>':
// иконка в начале пункта:
// $output = l($element['#title'], $element['#href'].'<span class="arrow"></span>', $element['#localized_options']);
// иконка в конце пункта:
$output = l($element['#title'].'<span class="arrow"></span>', $element['#href'], $element['#localized_options']);
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
</source>

Этот шаблон формирует код типа такого:

<source lang="html5">
<ul class="menu menu-catalog-1">
<li class="first expanded active-trail" data-menu-parent="menu-catalog-1">
<a href="/catalog/telefony" title="Телефоны" class="active-trail">Телефоны</a>
<ul class="menu menu-catalog-2">
<li class="first last expanded active-trail" data-menu-parent="menu-catalog-2">
<a href="/catalog/aksessuary" title="Аксессуары" class="active-trail">Аксессуары</a>
<ul class="menu menu-catalog-3">
<li class="first leaf active-trail" data-menu-parent="menu-catalog-3">
<a href="/catalog/akkumulyatory" title="Аккумуляторы" class="active-trail active">Аккумуляторы</a>
</li>
<li class="last leaf" data-menu-parent="menu-catalog-3">
<a href="/catalog/chehly" title="Чехлы">Чехлы</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="last leaf" data-menu-parent="menu-catalog-1">
<a href="/catalog/planshety" title="Планшеты">Планшеты</a>
</li>
</ul>
</source>

где используются такие стили:

{| class="wikitable"
|-
| <code>menu</code> || <code>ul</code> контейнер для пунктов одного уровня
|-
| <code>menu-catalog-1</code><br><code>menu-catalog-2</code> || там же, обозначают соответствующие уровни меню <code>ul</code>
|-
| <code>first</code> || первый элемент <code>li</code> списка пунктов меню одного уровня
|-
| <code>last</code> || последний элемент <code>li</code> списка пунктов меню одного уровня<br>(если на одном уровне только один пункт, то он будет помечен обоими стилями: <code>first last</code>)
|-
| <code>expanded</code> || развернутый (открытый) пункт меню <code>li</code>
|-
| <code>active-trail</code> || этим стилем помечаются все пункты меню <code>li</code> и ссылки <code>a href</code>, которые формируют хлебные крошки к текущей странице
|-
| <code>leaf</code> || листья <code>li</code>
|}

=== Примеры стилей ===

'''Стрелочка из спрайта для пометки развернутого пункта списка'''

<source lang="css">
/* Стрелочка справа от развернутой категории. */
/* По умолчанию стрелочку скрываем. */
span.arrow {
display: none;
}
/* Показываем стрелочку только в случае, если li помечен стилем `expanded`. */
li.expanded > a.active > span.arrow {
display: inline-block;
background: url('../icon.png') no-repeat -51px -17px;
width: 7px;
height: 4px;
margin-left: 5px;
margin-bottom: 3px;
}
</source>

'''Иконка из спрайта вместо стандартного буллета'''

<source lang="css">
/* Иконка слева от активной категории */
li {
position: relative;
}
li > a.active:before {
content: '';
/* позиция и размер в спрайте: */
background: url($icon) no-repeat -52px -26px;
height: 5px;
width: 5px;
/* позиция относительно родительского элемента: */
position: absolute;
top: 20px;
left: 10px;
}
</source>

== Меню редактора ==

Поменять page в 'edit any page content' на соответствующий тип материала.

<pre><?php if (user_access('edit any page content')): ?>
<div class="editor_menu">
<div class="btn-group">
<a href="<?php print 'node/'.$node->nid.'/edit'; ?>" class="btn btn-primary btn-danger">Редактировать</a>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Меню редактора</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="<?php print 'node/'.$node->nid.'/edit'; ?>">Редактировать</a></li>
<li><a href="<?php print 'node/'.$node->nid.'/delete'; ?>">Удалить</a></li>
<li class="divider"></li>
<li><a href="/admin/content">Все страницы</a></li>
</ul>
</div>
</div>
<?php endif; ?></pre>

== Ссылки ==

* [http://xandeadx.ru/blog/drupal/65 Как вывести два поля ввода на одной строке]
* [http://delay-delo.com/content/temizaciya-formy-poiska-drupal-7 Темизация формы поиска Drupal 7]
* http://delay-delo.com/теги/темизация

* [http://internetdevels.ru/blog/drupal_theming Drupal-верстка: html-макет или psd-эскиз?]
* [http://drupalace.ru/lesson/temizatsiya-drupal-7-obzor-failov-temy-shablona Обзор файлов темы]
* Создание своего шаблона для Drupal 7 на конкретном примере (drupalfly.ru)
** [http://drupalfly.ru/lesson/mask_generation_drupal_7_1 Часть 1]
*** [http://drupalfly.ru/lesson/info_files Список значений info файла]
** [http://drupalfly.ru/lesson/mask_generation_drupal_7_2 Часть 2. Разметка регионов]
** [http://drupalfly.ru/lesson/mask_generation_drupal_7_3 Часть 3. Вывод блоков]
** [http://drupalfly.ru/lesson/mask_generation_drupal_7_4 Часть 4. Темизация ноды]

'''Bootstrap'''

* [http://petu.ru/drupal/bootstrap-drupal-7-bystryy-ekskurs Bootstrap + Drupal 7: быстрый экскурс для начинающих]
* [http://makina-corpus.com/blog/metier/2014/a-drupal-front-end-theme-with-bootstrap-less-and-gulp A Drupal front-end theme with Bootstrap, LESS and Gulp — Makina Corpus]

[[Категория:Drupal]]

Темизация Drupal - Історія редагувань

>WikiSysop: /* Ссылки */