Theming drupal8 - Meetup Paris - 26-mars-2015
-
Upload
romain-jarraud -
Category
Internet
-
view
346 -
download
2
Transcript of Theming drupal8 - Meetup Paris - 26-mars-2015
Meetup Drupal Paris mars 2015
Drupal 8 Theming
Meetup Drupal Paris mars 2015
Romain JARRAUD Formateur/consultant
Trained People @romainjarraud
Meetup Drupal Paris mars 2015
Qu’est-ce que le theming ?
Meetup Drupal Paris mars 2015
Theming ?
Fonctionnel Présentation
Drupal et modules Thème
Meetup Drupal Paris mars 2015
Theming ?
• THEMING = Sortie HTML
• Il existent d’autres façons « d’afficher des données », par exemple sous forme de flux RSS, JSON…
Meetup Drupal Paris mars 2015
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.
Meetup Drupal Paris mars 2015
Theming ?
• Produire le code html de chaque page.
• Habiller les balises de styles : tailles, couleurs, images...
• Ajouter des effets à l’aide de javascript.
Meetup Drupal Paris mars 2015
Principe de base
Meetup Drupal Paris mars 2015
Thème
Navigateur CSS
TemplatesDrupal et modules Contenu
HTML
Page Web
Requête
Meetup Drupal Paris mars 2015
Thème
Meetup Drupal Paris mars 2015
/themes/ive/ive.info.yml
Meetup Drupal Paris mars 2015
Fini !
Meetup Drupal Paris mars 2015
Templates
Meetup Drupal Paris mars 2015
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é.
Meetup Drupal Paris mars 2015
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.
Meetup Drupal Paris mars 2015
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.
Meetup Drupal Paris mars 2015
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 !
Meetup Drupal Paris mars 2015
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 }}.
Meetup Drupal Paris mars 2015
/themes/ive/templates/block.html.twig
Meetup Drupal Paris mars 2015
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!).
Meetup Drupal Paris mars 2015
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.
Meetup Drupal Paris mars 2015
Fonctions de preprocess
Meetup Drupal Paris mars 2015
Fonction de preprocess
TemplatePreprocess par
défaut
$variables
Preprocess de theme
$variables
Preprocess de module
$variables
Meetup Drupal Paris mars 2015
• 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
Meetup Drupal Paris mars 2015
Librairies
Meetup Drupal Paris mars 2015
/themes/ive/ive.libraries.yml• Les fichiers de CSS et JS doivent être
déclarés sous forme de librairie.
Meetup Drupal Paris mars 2015
/themes/ive/ive.info.yml• Le chargement d’une librairie peut se faire
via le fichier .info.yml.
Meetup Drupal Paris mars 2015
/themes/ive/ive.theme• Le chargement d’une librairie peut
également se faire via la fonction THEME_page_attachments_alter() :
Meetup Drupal Paris mars 2015
/themes/ive/ive.theme
• Le chargement d’une librairie peut également se faire via une fonction de preprocess :
Meetup Drupal Paris mars 2015
/themes/ive/ive.theme
• Pour bloquer le chargement d’un fichier de CSS, on utilise la fonction hook_css_alter() :
Meetup Drupal Paris mars 2015
Surcharge
Meetup Drupal Paris mars 2015
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é.
Meetup Drupal Paris mars 2015
Surcharge
• Copier le fichier original dans le dossier de son thème.
• Vider le registre du thème.
• Vous avez la main !
Meetup Drupal Paris mars 2015
Breakpoints
Meetup Drupal Paris mars 2015
/themes/ive/ive.breakpoints.yml
Meetup Drupal Paris mars 2015
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).
Meetup Drupal Paris mars 2015
Configuration Backoffice
Meetup Drupal Paris mars 2015
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.
Meetup Drupal Paris mars 2015
/themes/ive/ive.theme
Meetup Drupal Paris mars 2015
/themes/ive/config/install/ive.settings.yml
Meetup Drupal Paris mars 2015
Autres changements par rapport à Drupal 7
Meetup Drupal Paris mars 2015
• 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.
Meetup Drupal Paris mars 2015
Conclusion
• Adaptation facile par rapport à Drupal 7.
• Plus simple avec Drupal 8 !
• TWIG, c’est que du bonheur !
Meetup Drupal Paris mars 2015
Merci à vous !
Meetup Drupal Paris mars 2015
Questions ?