web-dev-qa-db-fra.com

Remplacer menu.html.twig uniquement pour le menu principal

Drupal 8 Beta 1 a beaucoup de modèles Nice à utiliser qui peuvent être amenés dans un thème personnalisé puis personnalisés. J'ai introduit le menu.html.twig de base dans mon thème personnalisé et je peux en effet personnaliser le balisage. Cependant, ce modèle remplace tous les menus Drupal, pas seulement le menu principal qui est celui que je veux remplacer.

J'ai essayé le module Devel pour Drupal 8 en pensant que je pourrais avoir un aperçu de ce qui se passe sous le capot. Cependant, le module semble toujours dans un état de flux et j'ai eu d'énormes erreurs. Mon module goto pour les suggestions de modèles pour Drupal 7 est Devel Themer (Theme Developer) mais hélas pas de version Drupal 8.

J'ai également essayé d'être précis avec le nom du modèle et j'ai essayé menu--primary.html.twig Mais cela n'a pas fonctionné non plus.

J'ai ensuite essayé dans le modèle d'envelopper un if autour de la partie que je souhaite modifier en tant que telle:

{% if primary_menu %}
   <ul{{ attributes.addClass('foobar-menu') }}>
{% endif %}

... mais pas de joie non plus. donc je suis à court d'idées sur la façon de faire cela.

routes8theming
5
Danny Englander

Répondant à ma propre question ici, cela sera probablement utile pour ceux qui cherchent à déboguer une brindille.

  1. Activez devel Kint (partie du module Devel) sur la page des modules ou avec Drush

  2. Dans votre site /sites/default/services.yml Modifiez les paramètres suivants:

    parameters: twig.config: debug: true cache: false auto_reload: true

  3. Ensuite, dans le modèle que vous souhaitez déboguer, placez-y ce code:

    {{ kint() }}

Maintenant, vous obtenez un bel arbre de variables qui s'imprime de la même manière que si vous faisiez un ancien style kpr(get_defined_vars()); in Drupal 7.

{{ kint() }} printout of vars

  1. Je vois d'après l'impression de débogage que le nom du menu est simplement main.
  2. Maintenant, je change le modèle remplacé dans le dossier de modèles de mon thème personnalisé en menu--main.html.twig
  3. Voila, le modèle est uniquement spécifique pour le menu principal principal maintenant
  4. Personnalisez-le en tant que thème au contenu de votre cœur.
  5. Tout au long de ce processus, n'oubliez pas de vider le cache et de modifier/supprimer tout code de débogage lorsque vous avez terminé.

De plus, avec le débogage actif, Chrome affiche les suggestions de modèles possibles à la devel_themer afin que vous n'ayez pas nécessairement à utiliser Kint.

enter image description here

11
Danny Englander

Juste au cas où l'OP signifiait le menu principal et non le menu principal, nous devons nous rappeler que les régions peuvent avoir n'importe quel menu qui leur est assigné, ou même plusieurs menus.

Donc, si vous essayez de créer un thème quel que soit le menu placé dans des régions spécifiques, vous devez ajouter une suggestion de crochet de thème. Voici comment je l'ai fait:

Dans votre fichier .theme ou .module:


use \Drupal\block\Entity\Block;

/**
 * Implements hook_theme_suggestions_HOOK_alter() for block templates.
 */
function TEMPLATE_theme_suggestions_block_alter(array &$suggestions, array $variables) {
  $base_plugin_id = $variables['elements']['#base_plugin_id'];
  $system_menu_block = $base_plugin_id == 'system_menu_block';

  if ($system_menu_block) {
    $id = $variables['elements']['#id'];
    $block = Block::load($id);
    $region = $block->get('region');
    $suggestions[] = 'block__' . $region . '__menu';
  }
}

Vous avez maintenant de nouvelles suggestions de crochets de thème pour tous les blocs de menu système:

TEMPLATE_preprocess_block__REGION__menu()

Utilisez les suggestions de crochets à thème comme ceci:


/**
 * Implements template_preprocess_block() for the primary menu region.
 */
function TEMPLATE_preprocess_block__primary_menu__menu(&$variables) {
  $variables['content']['#theme'] = 'menu__primary';
}

Enfin, créez le fichier modèle en utilisant la variable #theme Que vous avez affectée ci-dessus:

menu--primary.html.twig

Donc, si vous avez une région sidebar_first, Utilisez:


/**
 * Implements template_preprocess_block() for the sidebar_first region.
 */
function TEMPLATE_preprocess_block__sidebar_first__menu(&$variables) {
  $variables['content']['#theme'] = 'menu__sidebar_first';
}

et:

menu--sidebar-first.html.twig

1
Richard Buchanan