如何显示活动菜单的类？

Question

这里是Drupal Bootstrap提供的menu.twig.html模板：

{#
/**
 * @file
 * Default theme implementation to display a menu.
 *
 * Available variables:
 * - classes: A list of classes to apply to the top level <ul> element.
 * - dropdown_classes: A list of classes to apply to the dropdown <ul> element.
 * - 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.
 *
 * @ingroup templates
 *
 * Define a custom macro that will render all menu trees.
 */
#}
{% macro menu_links(items, attributes, menu_level, classes, dropdown_classes) %}
  {% if items %}
    <ul{{ attributes.addClass(menu_level == 0 ? classes : dropdown_classes) }}>
    {% for item in items %}
      {%
        set item_classes = item.url.getOption('container_attributes').class | split(" ")
      %}
      {%
        set item_classes = [
          item.is_expanded and item.below ? 'expanded dropdown',
          item.in_active_trail ? 'active active-trail',
          loop.first ? 'first',
          loop.last ? 'last',
        ]
      %}
      <li{{ item.attributes.addClass(item_classes) }}>
        {% set link_title = item.title %}
        {% set link_attributes = item.link_attributes %}
        {% if menu_level == 0 and item.is_expanded and item.below %}
          {% set link_title %}{{ link_title }} <span class="caret"></span>{% endset %}
          {% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}
        {% endif %}
        {# Must use link() here so it triggers hook_link_alter(). #}
        {{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }}
        {% if item.below %}
          {{ _self.menu_links(item.below, attributes.removeClass(classes), menu_level + 1, classes, dropdown_classes) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

{#
  Invoke the custom macro defined above. If classes were provided, use them.
  This allows the template to be extended without having to also duplicate the
  code above. @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ _self.menu_links(items, attributes, 0, classes ?: ['menu', 'menu--' ~ menu_name|clean_class, 'nav'], dropdown_classes ?: ['dropdown-menu']) }}

这是主菜单HTML代码：

<ul class="menu menu--main nav navbar-nav">
  <li class="first">
    <a href="/banque" data-drupal-link-system-path="banque">Banques</a>
  </li>
  <li>
    <a href="/cashback" data-drupal-link-system-path="cashback">Cashback</a>
  </li>
  <li class="active active-trail">
    <a href="/avis" class="active-trail is-active" data-drupal-link-system-path="avis">Avis</a>
  </li>
  <li>
    <a href="/essentiel" data-drupal-link-system-path="essentiel">Essentiel</a>
  </li>
  <li class="last">
    <a href="/actu" data-drupal-link-system-path="actu">Actu</a>
  </li>
</ul>

我想自定义此菜单，并在每个菜单链接和徽章中的页面元素数量之前添加一个图标。

这是我要用于主菜单的自定义代码：

<ul class="menu menu--main nav navbar-nav">
  <li>
    <a href="/banque" data-drupal-link-system-path="banque"><i class="fas fa-piggy-bank fa-lg"></i> Banques <span class="badge badge-light">{{ drupal_view_result('accueil_banque', 'page_1')|length }}</span></a>
  </li>
  <li>
    <a href="/cashback" data-drupal-link-system-path="cashback"><i class="fas fa-undo fa-lg"></i> Cashback <span class="badge badge-light">{{ drupal_view_result('accueil_cashback', 'page_1')|length }}</span></a>
  </li>
  <li>
    <a href="/avis" data-drupal-link-system-path="avis"><i class="fas fa-gift fa-lg"></i> Avis <span class="badge badge-light">{{ drupal_view_result('accueil_avis', 'page_1')|length }}</span></a>
  </li>
  <li>
    <a href="/essentiel" data-drupal-link-system-path="essentiel"><i class="fas fa-thumbs-up fa-lg"></i> Essentiel <span class="badge badge-light">{{ drupal_view_result('accueil_essentiel', 'page_1')|length }}</span></a>
  </li>
  <li>
    <a href="/actu" data-drupal-link-system-path="actu"><i class="fas fa-newspaper fa-lg"></i> Actu <span class="badge badge-light">{{ drupal_view_result('accueil_actu', 'page_1')|length }}</span></a>
  </li>
</ul>

问题是，当我单击菜单链接时，菜单未显示为活动菜单。

如何在我的自定义代码中具有相同的行为？活动班级会自动添加到当前显示的菜单链接中。

我还能如何将自定义代码与默认代码集成？

在Bootstrap中，有一个menu--main.html.twig模板可以复制到子主题，但是我不知道如何使用它。以下是其内容：

{#
/**
 * @file
 * Default theme implementation to display a menu.
 *
 * Available variables:
 * - classes: A list of classes to apply to the top level <ul> element.
 * - dropdown_classes: A list of classes to apply to the dropdown <ul> element.
 * - 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.
 *
 * @ingroup templates
 */
#}
{% extends "menu.html.twig" %}
{%
  set classes = [
    'menu',
    'menu--' ~ menu_name|clean_class,
    'nav',
    'navbar-nav',
  ]
%}

Answer 1

显然有区别：

<li class="first">

在您的代码中丢失。作为调试帮助：

• 采用原始代码
• 向一个链接测试添加一个图标
• 将其他代码添加到一个选项卡-测试

所以您可以找到“破坏代码（部分）-逐行执行并经常保存。似乎很慢，但最终比查找错误或破坏代码要快