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’afﬁcher des
données », par exemple sous forme de ﬂux
RSS, JSON…

Theming ?
• Les modules manipulent les données.

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

• Par exemple, le module block déﬁnit le
template block.twig.html de base permettant
d’afﬁcher 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
Templates
Drupal et
modules Contenu
HTML
Page Web
Requête

Thème

/themes/ive/ive.info.yml

Fini !

Templates

Template ?
• Eléments à afﬁcher : données.

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

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

• Chaque élément (bloc, noeud, vue…) est
afﬁché 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 ﬁchier 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 afﬁche principalement le contenu des
variables.

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

• TWIG sait afﬁcher 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éﬁnit 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 afﬁcher 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
Template
Preprocess 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 ﬁchiers 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 ﬁchier .info.yml.

/themes/ive/ive.theme
• Le chargement d’une librairie peut
également se faire via la fonction
THEME_page_attachments_alter() :

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

• Pour bloquer le chargement d’un ﬁchier 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 aﬁn 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 ﬁchier 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’afﬁchage.

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

Conﬁguration
Backofﬁce

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/conﬁg/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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a Theming drupal8 - Meetup Paris - 26-mars-2015

Semelhante a Theming drupal8 - Meetup Paris - 26-mars-2015 (20)

Theming drupal8 - Meetup Paris - 26-mars-2015