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 »...
Meetup Drupal Paris mars 2015
Theming ?
• Les modules manipulent les données.	

• Ils proposent également un rendu par déf...
Meetup Drupal Paris mars 2015
Theming ?
• Produire le code html de chaque page.	

• Habiller les balises de styles : taill...
Meetup Drupal Paris mars 2015
Principe de base
Meetup Drupal Paris mars 2015
Thème
Navigateur CSS
Templates
Drupal 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’).	

•...
Meetup Drupal Paris mars 2015
Moteur de thème TWIG
• Drupal 8 utilise le moteur de thème TWIG.	

• TWIG a été créé par Fab...
Meetup Drupal Paris mars 2015
Templates
• Tous les templates ont l’extension .html.twig.	

• Chaque fichier de template reç...
Meetup Drupal Paris mars 2015
TWIG (rapidement)
• Afficher le contenu d’une variable : {{ var }}.	

• TWIG sait afficher n’i...
Meetup Drupal Paris mars 2015
TWIG (rapidement)
• Filtres :	

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

• chaine à traduire :	...
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é...
Meetup Drupal Paris mars 2015
Suggestions de template
• Déterminer le template à utiliser :	

• hook_theme_suggestions_HOO...
Meetup Drupal Paris mars 2015
Fonctions de
preprocess
Meetup Drupal Paris mars 2015
Fonction de preprocess
Template
Preprocess par
défaut
$variables
Preprocess de
theme
$variab...
Meetup Drupal Paris mars 2015
• Fonction de preprocess de base :
template_preprocess().	

• Fonction de preprocess dédiée ...
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...
Meetup Drupal Paris mars 2015
/themes/ive/ive.info.yml
• Le chargement d’une librairie peut se faire
via le fichier .info.y...
Meetup Drupal Paris mars 2015
/themes/ive/ive.theme
• Le chargement d’une librairie peut
également se faire via la fonctio...
Meetup Drupal Paris mars 2015
/themes/ive/ive.theme
• Le chargement d’une librairie peut
également se faire via une foncti...
Meetup Drupal Paris mars 2015
/themes/ive/ive.theme
• Pour bloquer le chargement d’un fichier de
CSS, on utilise la fonctio...
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'adapt...
Meetup Drupal Paris mars 2015
Surcharge
• Copier le fichier original dans le dossier
de son thème. 	

• Vider le registre d...
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’...
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 ...
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...
Meetup Drupal Paris mars 2015
Conclusion
• Adaptation facile par rapport à Drupal 7.	

• Plus simple avec Drupal 8 !	

• T...
Meetup Drupal Paris mars 2015
Merci à vous !
Meetup Drupal Paris mars 2015
Questions ?
Prochain SlideShare
Chargement dans…5
×

Theming drupal8 - Meetup Paris - 26-mars-2015

958 vues

Publié le

Introduction au theming avec Drupal 8.

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
958
Sur SlideShare
0
Issues des intégrations
0
Intégrations
41
Actions
Partages
0
Téléchargements
81
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Theming drupal8 - Meetup Paris - 26-mars-2015

  1. 1. Meetup Drupal Paris mars 2015 Drupal 8 Theming
  2. 2. Meetup Drupal Paris mars 2015 Romain JARRAUD Formateur/consultant Trained People @romainjarraud
  3. 3. Meetup Drupal Paris mars 2015 Qu’est-ce que le theming ?
  4. 4. Meetup Drupal Paris mars 2015 Theming ? Fonctionnel Présentation Drupal et modules Thème
  5. 5. 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…
  6. 6. 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.
  7. 7. 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.
  8. 8. Meetup Drupal Paris mars 2015 Principe de base
  9. 9. Meetup Drupal Paris mars 2015 Thème Navigateur CSS Templates Drupal et modules Contenu HTML Page Web Requête
  10. 10. Meetup Drupal Paris mars 2015 Thème
  11. 11. Meetup Drupal Paris mars 2015 /themes/ive/ive.info.yml
  12. 12. Meetup Drupal Paris mars 2015 Fini !
  13. 13. Meetup Drupal Paris mars 2015 Templates
  14. 14. 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é.
  15. 15. 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.
  16. 16. 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.
  17. 17. 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 !
  18. 18. 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 }}.
  19. 19. Meetup Drupal Paris mars 2015 /themes/ive/templates/block.html.twig
  20. 20. 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!).
  21. 21. 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.
  22. 22. Meetup Drupal Paris mars 2015 Fonctions de preprocess
  23. 23. Meetup Drupal Paris mars 2015 Fonction de preprocess Template Preprocess par défaut $variables Preprocess de theme $variables Preprocess de module $variables
  24. 24. 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
  25. 25. Meetup Drupal Paris mars 2015 Librairies
  26. 26. 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.
  27. 27. Meetup Drupal Paris mars 2015 /themes/ive/ive.info.yml • Le chargement d’une librairie peut se faire via le fichier .info.yml.
  28. 28. 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() :
  29. 29. Meetup Drupal Paris mars 2015 /themes/ive/ive.theme • Le chargement d’une librairie peut également se faire via une fonction de preprocess :
  30. 30. 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() :
  31. 31. Meetup Drupal Paris mars 2015 Surcharge
  32. 32. 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é.
  33. 33. 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 !
  34. 34. Meetup Drupal Paris mars 2015 Breakpoints
  35. 35. Meetup Drupal Paris mars 2015 /themes/ive/ive.breakpoints.yml
  36. 36. 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).
  37. 37. Meetup Drupal Paris mars 2015 Configuration Backoffice
  38. 38. 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.
  39. 39. Meetup Drupal Paris mars 2015 /themes/ive/ive.theme
  40. 40. Meetup Drupal Paris mars 2015 /themes/ive/config/install/ive.settings.yml
  41. 41. Meetup Drupal Paris mars 2015 Autres changements par rapport à Drupal 7
  42. 42. 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.
  43. 43. Meetup Drupal Paris mars 2015 Conclusion • Adaptation facile par rapport à Drupal 7. • Plus simple avec Drupal 8 ! • TWIG, c’est que du bonheur !
  44. 44. Meetup Drupal Paris mars 2015 Merci à vous !
  45. 45. Meetup Drupal Paris mars 2015 Questions ?

×