Від frontend розробки до Drupal-темізації. Основи і специфіка

5. Темизация - процесс внедрения верстки в CMF/СMS. Иными словами -
процесс приведения внешнего вида сайта в соответствие с макетом.
Что нужно знать:
- HTML, CSS, JS
- Основы PHP или другого бекендового языка

6. 1. Сначала вывод данных, потом стилизация
2. Сначала верстка статических данных согласно дизайну, затем замена
статических данных динамическими

7. 1. Своя тема “с нуля”
2. Наследование от родительской темы
Почитать подробнее: https://www.drupal.org/node/225125
Скачать готовую тему: https://www.drupal.org/project/project_theme

8. 1. .info файл
2. разметка страниц в файлах шаблонов
3. изменение, добавление переменных и
переопределение функций

12. name required
description
core required
engine
base theme
regions
stylesheets
scripts
php
…
name = Mytheme
description = Tableless, recolorable, multi-column,
fluid width theme.
core = 7.x
engine = phptemplate
base theme = bartik
Почитать подробнее: https://www.drupal.org/node/171205#php

13. Движок темизации в Drupal - функционал, обеспечивающий
возможность взаимодействия слоя темизации с другими слоями в
Drupal посредством шаблонов. Определяет синтаксис написания
кода.
PHPTemplate - стандартный движок темизации начиная с Drupal 4.7
Twig - стандартный движок темизации в Drupal 8
Почитать подробнее:
https://www.drupal.org/project/project_theme_engine

14. ; подключение стилей
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
stylesheets-conditional[lte IE 7][all][] = css/ie7.css
; подключение скриптов
scripts[] = mytheme.js
Доступные условия IE: https://msdn.microsoft.com/en-
us/library/ms537512(v=vs.85).aspx

16. regions[content] = Content - обязательный регион!
regions[custom_region] = My custom region
regions[sidebar_first] = Sidebar first
regions[page_top] = Page top
regions[page_bottom] = Page bottom
<?php if ($page['custom_region']): ?>
<div id="custom_region"><div class="section">
<?php print render($page['custom_region']);
?>
</div></div>
<?php endif; ?>

19. Реестр темы - это некая таблица в базе данных, которая является
частью таблицы кеша Drupal, и в которой Drupal хранит информацию о
доступных функциях темы и ее структуре.
Почитать подробнее: https://www.drupal.org/node/173880#theme-registry

23. Дебаггинг (отладка) – этап разработки программы, в ходе которого
обнаруживают, локализуют и исправляют баги (ошибки).
Отладка в Drupal - модуль Devel
Основные функции отладки: dpm, dvm, kpr
Синтаксис: <?php dpm($content); ?>
Полезные ссылки:
https://api.drupal.org/api/devel/devel.module/7
http://xandeadx.ru/blog/drupal/304

27. Theme hook suggestion - это
альтернативный файл шаблона, который мы
создаем, чтобы переопределить вывод
какого-либо блока.
Пример:
node--story.tpl.php
field--story.tpl.php
page--front.tpl.php
https://www.drupal.org/node/1089656

28. /**
* Implements hook_block_view().
*/
function share_block_view($delta = '') {
$block = array();
switch ($delta) {
case 'mytheme_share':
$variables = array('url' => url(current_path(),
array('absolute' => TRUE)));
$block['content'] = theme('mytheme_share',
$variables);
break;
}
return $block;
}
/**
* Implements hook_theme().
*/
function lliwell_share_theme() {
return array(
'lliwell_share' => array(
'variables' => array(),
'template' => 'lliwell_share',
),
);
}

29. /**
* Implements hook_preprocess_node().
*/
function mytheme_preprocess_node(&$variables) {
// Add to node template mytheme_share block.
$block = block_load('mytheme_share', 'mytheme_share');
$render_array = _block_get_renderable_array(_block_render_blocks(array($block)));
$variables['content']['mytheme_share'] = $render_array;
$variables['classes_array'][] = 'clearfix';
}
Вывод в шаблоне:
<?php print render($content['mytheme_share']); ?>

30. Пишем строку в settings.php:
$conf['theme_debug'] = TRUE;

31. При необходимости подключения из функции:
- drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',
array('type' => 'inline', 'scope' => 'footer')
);
- drupal_add_js('misc/collapse.js');
Внешние скрипты:
- drupal_add_js('http://example.com/example.js', 'external');
Drupal_add_js docs
https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7

32. Не объявлена переменная $
(function () {
$('div.menu-expanded').hide();
$(....);
});
(function ($) {
$(function () {
$('div.menu-expanded').hide();
$(...);
});
}) (jQuery);

33. jQuery(document).ready(function($){
$('.view-display-id-page .views-
row').addClass('fancy-pants');
});
Drupal.behaviors.infiniteScrollAddClass = {
attach: function (context, settings) {
$('.view-display-id-page .views-
row').addClass('fancy-pants');
}};
Drupal.behaviors.infiniteScrollAddClass = {
attach: function (context, settings) {
// these are the elements loaded in first
$('.view-display-id-page').once(function(){
$(this).find('.views-row').addClass('i-was-here-
first'); });
// everybody
$('.view-display-id-page .views-
row').addClass('fancy-pants');
}};
Managing JS in drupal https://www.drupal.org/node/756722
http://www.amazeelabs.com/en/blog/drupal-behaviors-quick-how

34. - Drupal general concepts https://www.drupal.org/node/19828
- Drupal 7 Theming Cookbook Karthik Kumar
https://www.drupal.org/node/1849888
- Theming Drupal 7 https://www.drupal.org/theme-guide/6-7
- Documentation https://www.drupal.org/documentation/theme
- Definitive Guide to Drupal 7 Theming http://themery.com/dgd7
- Lullabot.com - Theming Basics For Drupal - video
- Lullabot.com - Advanced Theming For Drupal - video