Question

我正在尝试使用树枝模板在drupal 8上构建一个简单的下拉菜单。我的问题是我找不到给下拉链接一个类的方法。这是我的代码

{#
/**
 * @file
 * Theme override to display a menu.
 */
#}
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0, menu_name) }} {# 1. #}

{% macro menu_links(items, attributes, menu_level, menu_name) %} {# 1. #}
  {% import _self as menus %}
  {# 1. #}
  {%
     set menu_classes = [
       'c-menu-' ~ menu_name|clean_class,
     ]
 %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('navbar-nav u-header__navbar-nav') }}>
    {% else %}
      <ul class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-offset animated">
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          menu_level ? 'dropdown-item u-header__sub-menu-list-item' : 'nav-item u-header__nav-item',
          item.is_expanded ? 'menu-item',
          item.is_collapsed ? 'menu-item',
          item.in_active_trail ? 'active',
          item.below ? 'nav-item hs-has-sub-menu u-header__nav-item hs-sub-menu-opened',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }} data-event="hover" data-animation-in="fadeInUp" data-animation-out="fadeOut">
        {%
          set link_classes = [
            not menu_level ? 'nav-link u-header__nav-link',
            item.in_active_trail ? 'active',
            item.below ? 'nav-link u-header__nav-link',
            item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
          ]
        %}
        {% if item.below %}
          {{ link(item.title, item.url, {'class': link_classes, 'data-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' }) }}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% else %}
          {{ link(item.title, item.url, {'class': link_classes}) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

我只需要给{{ menus.menu_links(item.below, attributes, menu_level + 1) }}一个完全独立于其父母的课程。有办法实现吗？我的输出就是这样

<a href="/" data-drupal-link-system-path="<front>" class="is-active">Sublink</a>

我需要这样更改

<a href="/" data-drupal-link-system-path="<front>" class="nav-link u-header__sub-menu-nav-link">Sublink</a>

如果还有其他方法（例如使用自定义模块或挂钩），请告诉我

Answer 1

使用以下代码实现结果

{#
/**
 * @file
 * Theme override to display a menu.
 */
#}
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0, menu_name) }} {# 1. #}

{% macro menu_links(items, attributes, menu_level, menu_name) %} {# 1. #}
  {% import _self as menus %}
  {# 1. #}
  {%
     set menu_classes = [
       'c-menu-' ~ menu_name|clean_class,
     ]
 %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('navbar-nav u-header__navbar-nav') }}>
    {% else %}
      <ul class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-offset animated">
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          menu_level ? 'dropdown-item u-header__sub-menu-list-item' : 'nav-item u-header__nav-item',
          item.is_expanded ? 'expanded',
          item.is_collapsed ? 'collapsed',
          item.in_active_trail ? 'active',
          item.below ? 'nav-item u-header__nav-item expanded nav-item hs-has-sub-menu u-header__nav-item',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }} data-event="hover" data-animation-in="fadeInUp" data-animation-out="fadeOut">

        {%
        set link_classes = [
        'nav-link',
        not menu_level ? 'u-header__nav-link' : 'u-header__sub-menu-nav-link',
        item.in_active_trail ? 'active',
        item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
        ]
        %}
        {% if item.below %}
          {% set title %}
          {{ item.title }}<span class="fa fa-angle-down u-header__nav-link-icon"></span>
          {% endset %}

          {{ link(title, item.url, {'class': link_classes, 'data-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' })}}

          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% else %}
          {{ link(item.title, item.url, {'class': link_classes}) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}

{% endmacro %}

Drupal 8如何为下拉链接提供课程？

1 个答案: