如何在 Drupal 8 中为子菜单设置自定义类？答案

【问题标题】：How to set a custom class to submenus in Drupal 8?如何在 Drupal 8 中为子菜单设置自定义类？
【发布时间】：2019-02-27 22:27:43
【问题描述】：

我正在处理 Custom Drupal 8 Theme 中的侧边栏菜单。我正在尝试根据子菜单的级别设置 sidebar__menu--submenu-1、sidebar__menu--submenu-2、sidebar__menu--submenu-3 等的 class。

到目前为止，我已经能够将 class sidebar__menu 添加到第一级并将 sidebar__menu--submenu 添加到所有子菜单级别。不过，我想添加 'class' sidebar__menu--submenu-(number of the level)，这样我就可以使用 CSS 更好地设置和控制侧边栏的样式。

这是我的代码 menu.html.twig：

{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level, menu_name) %}
  {% import _self as menus %}
  {%
    set menu_classes = [
      'sidebar__menu' ~ menu_name|clean_class,
    ]
  %}
  {%
    set submenu_classes = [
      'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
    ]
  %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
    {% else %}
      <ul {{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}>
    {% endif %}

    {% for item in items %}
     {%
      set classes = [
        'sidebar__item',
        item.is_expanded ? 'sidebar__item--expanded',
        item.is_collapsed ? 'sidebar__item--collapsed',
        item.in_active_trail ? 'sidebar__item--active-trail',
      ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {{ link(item.title, item.url) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

任何帮助将不胜感激！

【问题讨论】：

标签： php drupal twig drupal-8

【解决方案1】：

我找到了答案。首先我们设置类：

{%
set submenu_classes = [
  'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
  'sidebar__menu--submenu-' ~ (menu_level + 1),
]

然后使用如下逻辑：

{% if menu_level == 0 %}
  <ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
{% else %}
  <ul{{ attributes.removeClass(menu_classes, 'sidebar__menu--submenu-' ~ (menu_level)).addClass(submenu_classes) }}>
{% endif %}

【讨论】：