35

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

Embed Size (px)

Citation preview

Page 1: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 2: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 3: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 4: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 5: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка

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

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

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

- HTML, CSS, JS

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

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

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

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

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

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

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

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

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

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

1. .info файл

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

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

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

Page 9: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 10: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 11: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 12: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка

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

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

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

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

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

кода.

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

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

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

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

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

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

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

Page 15: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 16: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка

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

Page 17: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 18: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 19: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка

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

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

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

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

Page 20: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 21: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 22: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 23: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка

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

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

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

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

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

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

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

Page 24: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 25: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 26: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Page 27: Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка

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

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

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

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

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

/**

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

),

);

}

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

/**

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

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

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

$conf['theme_debug'] = TRUE;

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

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

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

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

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

});

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

});}) (jQuery);

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

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

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

- 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

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