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

HTML

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


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


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

basemeetup drupal paris

themingmeetup drupal

jsonmeetup drupal paris

templatesmeetup drupal

twigmeetup drupal paris

ymlmeetup drupal paris

thme twig drupal

template de base