Темізація у Drupal 8. Від простого до складного
Ivan Tibezh at InternetDevels
Big Changes
● Twig templating
● IE9 and >
THEME.info.yml
name: Bartiktype: themedescription: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'package: Coreversion: VERSIONcore: 8.x
THEME.info.yml
stylesheets: all: - css/layout.css - css/style.css - css/colors.css print: - css/print.css
THEME.info.yml
regions: header: Header help: Help page_top: 'Page top' page_bottom: 'Page bottom' highlighted: Highlighted featured: Featured content: Content
THEME.info.yml
settings: shortcut_module_link: '0'
logo.svg
logo.png or logo.gif can be addedvia Drupal UI
Declare Base Theme
base theme: classy
Modify Core/Module CSS
stylesheets-override:- global-styling/views.module.css
Remove Core/Module CSS
stylesheets-remove: - normalize.css
Adding Stylesheets
Adding Libraries
Declare Library
THEME.info.yml
liraries: - custom/global-styling
Add CSS and JS
THEME.libraries.ymlglobal-styling:
version: 1.xcss:
theme:global-styling/css/style.css: { media: all }
js:global-styling/js/scripts.js: {}
Optionally Include JQuery
THEME.libraries.yml
dependencies:- core/jquery
Other Ways to include assets
● hook_library_info_alter()
● hook_preprocess_page()
● hook_page_attachments_alter()
Twig
Why Twig
● Secure
● Separate business logic from display
● Faster, smarter templating engine
sites/default/services.yml
debug: trueauto_reload: true
Twig Templates
● 141 Twig templates*
● To override, place in *.html.twig in
theme folder
● Don’t forget to drush cr
Twig Code Basics
● To print {{ my_variable }}
● To comment {# comment #}
● To operate {% if title %}
Twig Code Extras
● Translate {{ 'Home'|t }}
● Check_plain {{ title|striptags }}
Reuse Templates
{% include 'code/modules/node/templates/node.html.twig' %}
Twig Preprocess
THEME.theme replaces template.php
function custom_preprocess_page(&$vars) {$vars['legal'] = t('Legal text');
}
Twig {{dump}}*
● {{ dump()}}
● {{ dump(my_variable) }}
Responsive
Breakpoints in core.
THEME.breakpoints.yml
Other things
● Drupal settings for use in js
● Classy module
● Initialize Image Style Settings in theme
● No HOOK_process
hook_theme
Only templates.
Render API
theme('custom_theme', $params);
$element = array('#theme' => 'custom_theme',// Params.
);
Twig templating
IE9 and >