Олена Ольховик — Від frontend розробки до Drupal-темізації....

Темизация - процесс внедрения верстки в CMF/СMS. Иными словами -

процесс приведения внешнего вида сайта в соответствие с макетом.

Что нужно знать:

- HTML, CSS, JS

- Основы PHP или другого бекендового языка

1. Сначала вывод данных, потом стилизация

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

статических данных динамическими

1. Своя тема “с нуля”

2. Наследование от родительской темы

Почитать подробнее: https://www.drupal.org/node/225125Скачать готовую тему: https://www.drupal.org/project/project_theme

1. .info файл

2. разметка страниц в файлах шаблонов

3. изменение, добавление переменных и

переопределение функций

name requireddescriptioncore requiredenginebase themeregionsstylesheetsscriptsphp…

name = Mythemedescription = Tableless, recolorable, multi-column, fluid width theme.core = 7.xengine = phptemplatebase theme = bartik

Почитать подробнее: https://www.drupal.org/node/171205#php

Движок темизации в Drupal - функционал, обеспечивающий

возможность взаимодействия слоя темизации с другими слоями в

Drupal посредством шаблонов. Определяет синтаксис написания

кода.

PHPTemplate - стандартный движок темизации начиная с Drupal 4.7

Twig - стандартный движок темизации в Drupal 8

Почитать подробнее:

https://www.drupal.org/project/project_theme_engine

; подключение стилей

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

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; ?>

Реестр темы - это некая таблица в базе данных, которая является

частью таблицы кеша Drupal, и в которой Drupal хранит информацию о

доступных функциях темы и ее структуре.

Почитать подробнее: https://www.drupal.org/node/173880#theme-registry

Дебаггинг (отладка) – этап разработки программы, в ходе которого

обнаруживают, локализуют и исправляют баги (ошибки).

Отладка в Drupal - модуль Devel

Основные функции отладки: dpm, dvm, kpr

Синтаксис: <?php dpm($content); ?>

Полезные ссылки:

https://api.drupal.org/api/devel/devel.module/7http://xandeadx.ru/blog/drupal/304

Theme hook suggestion - этоальтернативный файл шаблона, который мысоздаем, чтобы переопределить вывод

какого-либо блока.

Пример: node--story.tpl.phpfield--story.tpl.phppage--front.tpl.php

https://www.drupal.org/node/1089656

/**

* 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',

),

);

}

/**

* 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']); ?>

Пишем строку в settings.php:

$conf['theme_debug'] = TRUE;

При необходимости подключения из функции:- 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

Не объявлена переменная $

(function () {$('div.menu-expanded').hide();$(....);

});

(function ($) {$(function () {$('div.menu-expanded').hide();$(...);

});}) (jQuery);

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/756722http://www.amazeelabs.com/en/blog/drupal-behaviors-quick-how

- Drupal general concepts https://www.drupal.org/node/19828

- Drupal 7 Theming Cookbook Karthik Kumarhttps://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