web-dev-qa-db-fra.com

Comment ajouter des classes au menu principal ul et li dans Drupal 8

Je veux générer les éléments html et leurs classes pour s'adapter à mon style du menu principal.

Je suis confus par toutes les quasi-possibilités offertes dans la documentation de l'API et en regardant les thèmes principaux, etc. et je ne vois toujours pas vraiment ce que je dois faire, ni où je dois le faire.
Je serais très reconnaissant d'avoir des indications claires pour:

  1. quelles fonctions php je dois écrire;
  2. quelles variables je dois ajouter/mettre à jour;
  3. dans quels fichiers les fonctions iront.

Vraisemblablement, dans MYTHEME.theme J'aurai besoin d'une fonction de prétraitement quelconque à ajouter aux attributes et item.attributes variables qui links.html.twig utilise pour imprimer le menu ul et l'élément de menu li.

[Mise à jour] Jusqu'à présent, j'ai découvert une façon de placer des classes dans le ul du menu principal, mais idéalement, j'aimerais ajouter une classe au ul de chaque sous-menu indiquant la profondeur du sous-menu.
Et je ne trouve pas de documentation ou d'exemples à partir desquels je peux comprendre la génération/modification des différents éléments link du menu principal.

Cette fonction va dans le fichier MYTHEME.theme.

function MYTHEME_preprocess_page(&$variables) {

  // Pass the main menu and secondary menu to the template as render arrays.
  if (!empty($variables['main_menu'])) {
    $variables['main_menu']['#attributes']['id'] = 'main-menu-links';
    $variables['main_menu']['#attributes']['class'] = array('links', 'clearfix', 'MYNEW_class');
  }

}
themingroutes8
5
iainH

Remplacez le fichier twig pour le menu principal en enregistrant menu--main.html.twig Dans votre thème. Copiez le menu.html.twig original de /core/modules/system/templates/menu.html.twig Ou /core/themes/classy/templates/navigation/menu.html.twig si votre thème s’étend de Classy.

Vous pouvez ensuite modifier la macro Twig utilisée pour générer la sortie du menu. Pour obtenir une classe sur les ul pour indiquer le niveau, vous pouvez faire ceci:

{% if menu_level == 0 %}
  <ul{{ attributes.addClass('menu', 'menu-level--' ~ menu_level) }}>
{% else %}
  <ul class="menu {{ 'menu-level--' ~ menu_level }}">
{% endif %}

Vous pouvez faire des manipulations similaires aux li:

<li{{ item.attributes }}>

Tack sur .addClass('class-name') pour des attributs comme ceci:

<li{{ item.attributes.addClass('class-name') }}>

Si vous êtes un snob HTML/nom de classe comme moi, vous pouvez également supprimer des classes comme ceci: {{ item.attributes.removeClass('menu-item') }}

Ce que j'ai fait sur la ligne au-dessus de li dans la boucle for.

12
wesruv

La façon d'obtenir le menu principal avec des éléments à tous les niveaux a été résolue dans Drupal 8 - "Implémenter les liens de menu en tant que plugins", essayant de construire une arborescence de men

Pour ajouter une classe à ul et li, nous avons eu 3 options:

A. Menu prioritaire Service d'arbre:

  1. créez un nouveau MenulinkTree dans votre module MyprojectMenuLinkTree qui étend le MenuLinkTree du noyau
  2. Remplacez MenulinkTree :: build en ajoutant MyprojectMenuLinkTree :: build
  3. Mettez à jour votre classe de spécification de niveau dans une logique comme celle-ci https://Gist.github.com/vijaycs85/308d2d0287a9ab1cd168
  4. ovrride defult menu.link_tree at sites/default/services.yml https://Gist.github.com/vijaycs85/1179c6009c6932405f1

P.S: Pas très sûr, si vous avez besoin de faire tout ce remplacement pour ajouter de la classe.

Remplacez simplement la construction d'arbre sur la couche de thème:

  1. Ajoutez le code dans le fichier mytheme.theme: https://Gist.github.com/vijaycs85/61f2b2757f83aaa5260e

C. Utilisation de Drupal.behaviors.MYTHEME en JavaScript (à partir de https://www.drupal.org/project/gratis )

  1. Créer MYTHEME/script.js
  2. Ajouter MYTHEME.behaviour.menuTree
  3. Mettez à jour ce code: https://Gist.github.com/vijaycs85/346c14aedffcafe8945e
1
vijaycs85