Introductie tot theming in Drupal 8

02 Jun 2014

Joris Snoek - Business Dev
+31 (0)20 - 261 14 99

Drupal 8 komt eraan. Lucius is al enige tijd bezig met ontwikkeling van nieuwe systemen in D8. Daarbij komen we veel positieve veranderingen ten opzichte van Drupal 7 tegen. Wat we bijvoorbeeld tegenkwamen binnen theming in Drupal 8:

Waarschuwing: for nerds only :)

Opbouw theme in Drupal 8.

  • 1) Info files in yaml format, vervangt .info file
  • 2) Libraries toevoegen aan theme met yaml
  • 3) themenaam.theme vervangt template.php
  • 4) Twig implementatie .html.twig, vervangt .tpl.php

1) Yaml files

Allereerst de yaml files, deze files vervangen alle info files uit Drupal 7, sommige vervangen tevens hooks uit D7. De nieuwe info file (themenaam.info.yml) ziet er als volgt uit:

(In een yaml file is '#' een comment)

name: Themename
type: theme
description: 'een omschrijving'
package: packagenaam
version: 8.x-1.0
core: 8.x

# Hiermee kan je libraries toevoegen
libraries:
  - openlucius/openlucius-scripts

# deze regel vervangt het oude stylesheets[all][] = css/style.css
stylesheets:
  all:
    - css/style.css

# deze regels vervangen de oude structuur: regions[navigation]     = ‘Navigation'
regions:
  header: Header
  help: Help
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  main_menu: 'Main Menu'
  featured: Featured
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  footer: Footer

2) Libraries files

Om vervolgens javascript toe te voegen maak je een themenaam.libraries.yml bestand aan binnen je theme. In dit geval gaat het om de library 'openlucius-scripts':

openlucius-scripts:
  version: VERSION

# per file een regel aanmaken met het path, gevolgd door { } hier kan je extra parameters mee toevoegen
# in het geval van css kan je met { print } aangeven dat het gaat om een media type print
  js:
    js/openlucius.js: {}

# voeg css toe aan je theme door de volgende structuur aan te houden
  css:
    theme:
      css/opelucius.css: {}

# als laatste kan je dependencies toevoegen

  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - core/drupal.ajax
    - core/drupal.progress
    - core/jquery.once

3) Template.php

Voor alle theme preprocessing had je in Drupal 6 en 7 de template.php, deze is vervangen door de themenaam.theme file.

Een nieuw fenomeen binnen Drupal 8 is het gebruiken van namespaces. Sommige functies zijn niet aan te roepen zonder deze namespaces te gebruiken.

Volgende decalaraties komen boven je themename.theme file, dit ziet er als volgt uit:

use Drupal\Component\Utility\String;
use Drupal\Core\Template\RenderWrapper;
use Drupal\Core\Template\Attribute;

Deze 3 zijn vrij standaard, om een idee te geven van waar deze voor zijn:

use Drupal\Component\Utility\String
Hier staan alle string functies in zoals check_plain

use Drupal\Core\Template\RenderWrapper;
Deze is voor het renderen van items (drupal_render())

use Drupal\Core\Template\Attribute;
Deze is voor het toevoegen van attributes.

Verder verandert er vrij weinig, je kunt nog steeds vele oude vertrouwde hooks gebruiken. Bijvoorbeeld hook_preprocess_node().

4) Twig implementatie

Een grote verandering ten opzichte van Drupal 7 in Drupal 8 is het gebruik van 'Twig' als theming-engine.

Waar je in Drupal 6 en 7 (het hoorde toen ook al niet) code in je templates kon verwerken is dit nu verbannen ( Jeej!! ).

Een Twig template-bestand wordt soortgelijk als in Drupal 6 en 7 gedeclareerd; in het volgende format **.html.twig*. Je krijgt dan bijvoorbeeld node.html.twig.

Binnen deze template vind je html en placeholders.

  • In Drupal 7 stond er
  • In Drupal 8 staat er {{ data }}

Om te controleren of een variabele ge-set is kan je binnen twig if statements gebruiken bijv.

{% if data %}
  {{ data }}
{% data %}

Voor uitgebreide Twig documentatie zie http://twig.sensiolabs.org/documentation

Wrap up

Dit was de bondige introductie tot theming in Drupal 8. Vragen? Let me know!

Comments

Nóg meer
kennis nodig?

Check ons ons blog archief >