Theming drupal8 - Meetup Paris - 26-mars-2015

Meetup Drupal Paris mars 2015

Drupal 8 Theming

Romain JARRAUD Formateur/consultant

Trained People @romainjarraud

Qu’est-ce que le theming ?

Theming ?

Fonctionnel Présentation

Drupal et modules Thème

Theming ?

• THEMING = Sortie HTML

• Il existent d’autres façons « d’afficher des données », par exemple sous forme de flux RSS, JSON…

Theming ?

• Les modules manipulent les données.

• Ils proposent également un rendu par défaut.

• Par exemple, le module block définit le template block.twig.html de base permettant d’afficher un bloc.

• Le thème SURCHARGE ce que font les modules.

Theming ?

• Produire le code html de chaque page.

• Habiller les balises de styles : tailles, couleurs, images...

• Ajouter des effets à l’aide de javascript.

Principe de base

Thème

Navigateur CSS

TemplatesDrupal et modules Contenu

Page Web

Requête

Thème

/themes/ive/ive.info.yml

Fini !

Templates

Template ?

• Eléments à afficher : données.

• Render Array : array(‘#theme’ => ‘HOOK’).

• Passe les données au template désigné.

• Chaque élément (bloc, noeud, vue…) est affiché grâce à un template dédié.

Moteur de thème TWIG

• Drupal 8 utilise le moteur de thème TWIG.

• TWIG a été créé par Fabien Potencier.

• Il offre un système de templates (template.html.twig) pour générer le code HTML.

• La partie dynamique est obtenue grâce à du code TWIG inséré dans le code HTML.

Templates• Tous les templates ont l’extension .html.twig.

• Chaque fichier de template reçoit, non pas le tableau $variables, mais autant de variables que le tableau $variables contient de clés.

• Ex. : si $variables = array(‘data1’ => $data_1, ‘data2’ => $data_2) est passé au template, ce dernier reçoit les variables TWIG data1 et data2.

• Un template contient le code HTML avec du code TWIG qui affiche principalement le contenu des variables.

TWIG (rapidement)• Afficher le contenu d’une variable : {{ var }}.

• TWIG sait afficher n’importe quel type de variable (chaine, tableau, objet) : {{ node.title }}.

• Fonction : {% if var %} {% endif %}.

• Commentaires : {# commentaire #}

• Traduction :

• {% trans %} {{ chaine }} {% endtrans %}.

• Disponible ensuite via l’interface de Drupal !

TWIG (rapidement)• Filtres :

• {{ date|format_date(‘medium’) }}

• chaine à traduire :

• Echappement : {{ texte }} (équivalent à @).

• Interprétation : {{ texte|passthrough }} (équivalent à !).

• Placeholder : {{ texte|placeholder }} (équivalent à %).

• {{ content|without(‘links’) }}.

• {{ chaine|lower }} (upper également).

• {{ class_name|clean_class }}.

• {{ id_name|clean_id }}.

/themes/ive/templates/block.html.twig

Suggestions de template• Chaque module définit le template de base pour rendre un

type d’élément en particulier.

• Mais chaque élément individuellement peut être rendu avec un template dédié.

• Le module propose la plupart du temps des templates alternatifs utilisés dans un contexte plus précis : suggestions de template.

• Par exemple pour afficher un nœud, le template utilisé par défaut est node.html.twig. Si ce nœud est de type article, Drupal peut potentiellement utiliser le template node--article.html.twig (s’il existe!).

Suggestions de template• Déterminer le template à utiliser :

• hook_theme_suggestions_HOOK() définit par le module déclarant le HOOK.

• hook_theme_suggestions_alter() : modules et thèmes voulant modifier les suggestions pour tous les hooks.

• hook_theme_suggestions_HOOK_alter() : modules et thèmes voulant modifier les suggestions de HOOK.

Fonctions de preprocess

Fonction de preprocess

TemplatePreprocess par

défaut

$variables

Preprocess de theme

$variables

Preprocess de module

$variables

• Fonction de preprocess de base : template_preprocess().

• Fonction de preprocess dédiée : template_preprocess_HOOK().

• $variables['attributes']['class'] : contient un nom de classe correspondant au nom du hook de thème invoqué.

Fonction de preprocess

Librairies

/themes/ive/ive.libraries.yml• Les fichiers de CSS et JS doivent être

déclarés sous forme de librairie.

/themes/ive/ive.info.yml• Le chargement d’une librairie peut se faire

via le fichier .info.yml.

/themes/ive/ive.theme• Le chargement d’une librairie peut

également se faire via la fonction THEME_page_attachments_alter() :

/themes/ive/ive.theme

• Le chargement d’une librairie peut également se faire via une fonction de preprocess :

• Pour bloquer le chargement d’un fichier de CSS, on utilise la fonction hook_css_alter() :

Surcharge

• L'un des rôles du thème est de surcharger le formatage par défaut afin de l'adapter aux besoins.

• Drupal propose un mécanisme de surcharge pour les templates.

• Dès qu’un hook de thème est invoqué, le thème est sollicité en premier. Dans le cas où aucune surcharge n’est proposée, c’est l’élément par défaut qui est appelé.

Surcharge

• Copier le fichier original dans le dossier de son thème.

• Vider le registre du thème.

• Vous avez la main !

Breakpoints

/themes/ive/ive.breakpoints.yml

Breakpoints

• Les breakpoints sont exposés côté serveur, permettant ainsi de conditionner l’affichage.

• En particulier on gère le chargement des images en fonction de ces breakpoints (via un groupe).

Configuration Backoffice

• Comment paramétrer le thème depuis le backoffice de Drupal.

• Il existe une page avec un formulaire par défaut pour chaque thème.

• On peut le modifier avec la fonction THEME_form_system_theme_settings_alter() en utilisant la Form API.

/themes/ive/config/install/ive.settings.yml

Autres changements par rapport à Drupal 7

• Tout est bloc : fil d’Ariane, zone de message, logo…

• Le logo est au format SVG.

• Les classes CSS sont ajoutées dans le template par défaut, ou bien via les fonctions de preprocess (cas de logique plus complexe).

• Thème de base Classy.

• Disparition de la fonction theme() au profit des Render Array.

• TWIG a un mode Debug affichant les suggestions de template sous forme de commentaires HTML.

Conclusion

• Adaptation facile par rapport à Drupal 7.

• Plus simple avec Drupal 8 !

• TWIG, c’est que du bonheur !

Merci à vous !

Questions ?

Theming drupal8 - Meetup Paris - 26-mars-2015

Internet

Transcript of Theming drupal8 - Meetup Paris - 26-mars-2015

Drupal8 : novedades y nuevas funcionalidades

Come portare il profiler di symfony2 in drupal8

Maintainable theming

[Luca Cracco] - DevOps: strumenti di automazione per Drupal8

Xdebug and Drupal8 tests (PhpUnit and Simpletest)

Power Theming

Drupal8 themingdeepdive drupaldevdays-montpellier17042015

Theming 101

Drupal8 que cuandoque

Drupal8 for Symfony Developers

Олексій Калініченко — Configuration Management in Drupal8

Drupal7 Theming

Drupal8 simplepage v2

[drupalday2017] - DevOps: strumenti di automazione per Drupal8

Drupal Theming

Drupal Theming Introduction

[Marco Capobussi] - DevOps: strumenti di automazione per Drupal8

Twig in drupal8

Theming & Sculpting

Meetup Drupal Nantes: Le Theming (25/05/2011)