DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)

Темізація у 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 >