Comment ajouter des classes à la balise <body> dans Drupal ?
Ajouter l'ID du node affiché et le nom du type de contenu en tant que classe à la balise <body> permet de cibler spécifiquement certaines pages dans le thème Drupal.
On peut avoir besoin d’ajouter des class au body pour styliser ou cibler précisément certains éléments dans une page Drupal. Ce code ajoute une class au body avec le nid du node affiché et une class avec le nom du type de contenu affiché.
Ce hook permet de prétraiter les variables passées au modèle de thème HTML avant leur rendu.
Code
/**
* Implements hook_preprocess_html().
*/
function custom_theme_preprocess_html(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
$variables['attributes']['class'][] = 'page-type-' . $node->getType();
$variables['attributes']['class'][] = 'page-nid-' . $node->id();
}
Résultat
<body class="page-type-contact page-nid-174">Explications
Le hook hook_preprocess_html(&$variables) prend en paramètre un tableau $variables passé par référence. Ce tableau contient les variables à prétraiter avant le rendu HTML.
$node = \Drupal::routeMatch()->getParameter('node');Cette ligne récupère le nœud (ou "node" en anglais) actuellement affiché sur la page. \Drupal::routeMatch() est utilisé pour obtenir les informations sur la route actuelle, et getParameter('node') récupère le nœud à partir de cette route.
$variables['attributes']['class'][] = 'page-type-' . $node->getType();Cette ligne ajoute une classe CSS au tableau $variables['attributes']['class'] basée sur le type du nœud actuellement affiché. Cela permet de styliser différemment les pages en fonction du type de contenu.
$variables['attributes']['class'][] = 'page-nid-' . $node->id();Cette ligne ajoute également une classe CSS basée sur l'ID du nœud actuellement affiché. Cela peut être utile pour cibler spécifiquement cette page avec du CSS ou du JavaScript.
Ajouter un commentaire