lviv euro drupal camp 2015_От front-end разработки к темизации в drupal
TRANSCRIPT
![Page 1: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/1.jpg)
![Page 2: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/2.jpg)
![Page 3: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/3.jpg)
![Page 4: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/4.jpg)
![Page 5: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/5.jpg)
Темизация - процесс внедрения верстки в CMF/СMS. Иными словами - процесс приведения внешнего вида сайта в соответствие с макетом.
Что нужно знать:- HTML, CSS, JS- Основы PHP или другого бекендового языка
![Page 6: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/6.jpg)
1. Сначала вывод данных, потом стилизация
2. Сначала верстка статических данных согласно дизайну, затем замена статических данных динамическими
![Page 7: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/7.jpg)
1. Своя тема “с нуля”
2. Наследование от родительской темы
Почитать подробнее: https://www.drupal.org/node/225125
Скачать готовую тему: https://www.drupal.org/project/project_theme
![Page 8: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/8.jpg)
1. .info файл
2. разметка страниц в файлах шаблонов
3. изменение, добавление переменных и переопределение функций
![Page 9: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/9.jpg)
![Page 10: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/10.jpg)
![Page 11: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/11.jpg)
![Page 12: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/12.jpg)
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
![Page 13: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/13.jpg)
Движок темизации в Drupal - функционал, обеспечивающий возможность взаимодействия слоя темизации с другими слоями в Drupal посредством шаблонов. Определяет синтаксис написания кода.
PHPTemplate - стандартный движок темизации начиная с Drupal 4.7Twig - стандартный движок темизации в Drupal 8
Почитать подробнее: https://www.drupal.org/project/project_theme_engine
![Page 14: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/14.jpg)
; подключение стилей
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: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/15.jpg)
![Page 16: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/16.jpg)
regions[content] = Content - обязательный регион!regions[custom_region] = My custom regionregions[sidebar_first] = Sidebar firstregions[page_top] = Page topregions[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: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/17.jpg)
![Page 18: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/18.jpg)
![Page 19: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/19.jpg)
Реестр темы - это некая таблица в базе данных, которая является частью таблицы кеша Drupal, и в которой Drupal хранит информацию о доступных функциях темы и ее структуре.
Почитать подробнее: https://www.drupal.org/node/173880#theme-registry
![Page 20: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/20.jpg)
![Page 21: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/21.jpg)
![Page 22: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/22.jpg)
![Page 23: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/23.jpg)
Дебаггинг (отладка) – этап разработки программы, в ходе которого обнаруживают, локализуют и исправляют баги (ошибки). Отладка в Drupal - модуль Devel Основные функции отладки: dpm, dvm, kpr Синтаксис: <?php dpm($content); ?>
Полезные ссылки:https://api.drupal.org/api/devel/devel.module/7
http://xandeadx.ru/blog/drupal/304
![Page 24: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/24.jpg)
![Page 25: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/25.jpg)
![Page 26: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/26.jpg)
![Page 27: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/27.jpg)
Theme hook suggestion - это
альтернативный файл шаблона, который мы
создаем, чтобы переопределить вывод какого-
либо блока.
Пример:
node--story.tpl.php
field--story.tpl.php
page--front.tpl.php
https://www.drupal.org/node/1089656
![Page 28: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/28.jpg)
/*** 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 share_block_theme() { return array( 'mytheme_share' => array( 'variables' => array(), 'template' => 'mytheme_share', ), );}
![Page 29: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/29.jpg)
/*** 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: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/30.jpg)
Пишем строку в settings.php:
$conf['theme_debug'] = TRUE;
![Page 31: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/31.jpg)
При необходимости подключения из функции:
- 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: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/32.jpg)
Не объявлена переменная $
(function () {
$('div.menu-expanded').hide();
$(....);
});
(function ($) {
$(function () {
$('div.menu-expanded').hide();
$(...);
});
}) (jQuery);
![Page 33: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/33.jpg)
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
![Page 34: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/34.jpg)
- 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
![Page 35: Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal](https://reader034.vdocuments.net/reader034/viewer/2022042722/588961f71a28abef658b6a67/html5/thumbnails/35.jpg)