web-dev-qa-db-fra.com

Comment créer des menus thématiques dans un twig custom

J'ai récupéré le menu principal du site Web en utilisant le code ci-dessous.

public function build() {
    $menu_name = 'main';
    $menu_tree = \Drupal::menuTree();
    $parameters = $menu_tree->getCurrentRouteMenuTreeParameters($menu_name);
    $parameters->setMinDepth(0);
    $tree = $menu_tree->load($menu_name, $parameters);
    $manipulators = array(
      array('callable' => 'menu.default_tree_manipulators:checkAccess'),
      array('callable' => 'menu.default_tree_manipulators:generateIndexAndSort'),
    );
    $tree = $menu_tree->transform($tree, $manipulators);
    $build['menu'] = $menu_tree->build($tree);


return array(
      '#theme' => 'allofus_menu_footer',
      '#build' => $build,
    );
  }

J'essaie de le mettre en bloc, mais je veux le montrer comme un 2 colonnes. Dans la première colonne, le premier menu principal et ses sous-menus et le reste des menus principaux et secondaires dans la deuxième colonne.

J'ai créé un twig mais il n'imprime rien sauf le balisage. J'ai essayé de foreach mais cela ne fonctionne pas.

allofus-menu-footer.html.twig:

{% if build %}
    <nav id ="secondary-menu" class="navigation" role="navigation">
        {{ build }}
    </nav>
{% endif %}
theming8navigation
2
Fazeela Abu Zohra

Je viens de faire beaucoup de cela avec Bloc de men . Je préfère Menu Block car il est un peu plus flexible et offre plus de suggestions de modèles et de crochets que le module de menu principal. Il semble que vous construisez votre propre bloc ci-dessus, je ne peux pas le dire, mais vous pouvez gagner du temps en utilisant Bloc de men dans ce cas.

Dans l'un de mes menus, c'est le fichier twig qui gère la sortie. Je n'ai fait aucun prétraitement ou des trucs supplémentaires, juste construit autour du concept de macro utilisé dans menu.html.twig. Chaque élément parent a des enfants, et si ces éléments enfants dépassent 7, il commencera une nouvelle liste. Par exemple, si le lien du menu a 14 enfants, alors mon code aura une liste déroulante composée de 2 listes non ordonnées avec 7 liens chacune. Notre style les transforme ensuite en colonnes. Ceci est un peu différent de votre cas d'utilisation, mais devrait vous mettre sur la bonne voie.

{#
/**
 * @file
 * Theme override to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 */
#}
{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    <ul>
      {% for item in items %}
        {%
          set classes = [
            'global-top__utility-item',
            'js-utility-item',
            item.in_active_trail ? 'active-trail',
            item.below ? 'has-submenu'
          ]
        %}

        <li{{ item.attributes.addClass(classes) }}>
          {{ link(item.title, item.url) }}
          {% if item.below %}
            {{ menus.submenu_links(item.below, attributes, menu_level + 1) }}
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

{% macro submenu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  <div class="global-top__submenu">
    {% for chunk in items|batch(7) %}
      <ul class="global-top__submenu-col">
        {% for item in chunk %}
          <li{{ item.attributes }}>
            {{ link(item.title, item.url) }}
          </li>
        {% endfor %}
      </ul>
    {% endfor %}
  </div>
{% endmacro %}
2
Kevin