如何显示活动菜单的类？

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>

问题是当我点击菜单链接时，菜单没有显示为活动状态。

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

我还能如何将我的自定义代码集成到menu.html.twig 或menu--main.html.twig 模板之一？

在 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',
  ]
%}

默认情况下带有打开链接的主菜单示例（它是活动的，因为页面已显示）：

使用打开链接个性化的主菜单示例（它不活动，因为模板 menu.twig.html 不会自动添加类）：

Answer 1

他们在引用的问题中给你的答案是一个非常明确的 RTFM（阅读 f***ing 手册），尤其是以下内容：

• core/themes/stable/templates/menu.html.twig
• core/themes/classy/templates/menu.html.twig 包含 {% extends "menu.html.twig" %}（以添加特定类）并期望扩展稳定版的 menu.html.twig
• core/themes/YOUR_DIR/templates/menu.html.twig 包含 {% extends "menu.html.twig" %} （覆盖 Twig 块）并期望 Classy 的 menu.html.twig 被扩展 - 或者，真的，它的任何祖先主题，因为如果 Classy 的 menu.html.twig 被删除，它不在乎

注意事项：
在第 3 点中，我们特别不想指定 {% extends "@classy/menu.html.twig" %} 因为我们不想关心。我们只想扩展父主题的模板（根据主题注册表）。 在第 1 点中，“根模板”也可以不在主题中，而是在模块中。这也是一个有效的用例。

所以你有一个问题，因为你声明 menu.twig.html 但你的模块 extends "menu.html.twig" 所以确保你的命名是正确的。

The Drupal handbook states永远不要摆弄提供的模板，而是使用用户特定的模块来扩展它。

问：我应该在哪里进行更改？

A：在自定义子主题中

您不应修改任何已打包的主题或子主题 从 Drupal.org 发布。如果这样做，您所做的所有更改都会 一旦该主题更新，就会丢失。这使得跟踪 几乎不可能的变化。

相反，您应该创建一个未托管的自定义子主题 Drupal.org。