Как отобразить класс для активного меню?

Question

Вот шаблон menu.twig.html, предоставленный Drupal Bootstrap:

{#
/**
 * @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?

In 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 (Прочтите руководство), особенно следующее:

• core / themes / stable / templates / menu . html .twig
• core / themes / classy / templates / menu. html .twig содержит {% extends "меню. html .twig"%} (для добавления спецификаций c class) и ожидает расширения меню. } (переопределяет блок Twig) и ожидает, что меню Classy будет расширено. html .twig - или, по сути, любой из его тем-предков, потому что ему безразлично, будет ли удалено меню Classy. html .twig

Примечания:
в пункте 3 мы специально НЕ хотим указывать {% extends "@ classy / menu. html .twig"%}, потому что мы не хотим заботиться , Мы просто хотим, чтобы шаблон родительской темы - в соответствии с реестром темы - был расширен. в пункте 1 «root шаблон» также может жить не в теме, а в модуле. Это также допустимый вариант использования.

Итак, у вас есть проблема, потому что вы указали menu.twig.html, но ваш модуль extends "menu.html.twig", поэтому убедитесь, что ваше имя правильно.

Руководство по Drupal утверждает, что НИКОГДА не возиться с доставленными шаблонами, а скорее расширять его с помощью пользовательских c модулей.

Q: Где мне вносить изменения?

A: В настраиваемая подтема

Вы никогда не должны изменять какие-либо темы или подтемы, упакованные и выпущенные с Drupal.org. Если вы это сделаете, все внесенные вами изменения будут потеряны после обновления этой темы. Это делает отслеживание изменений практически невозможным.

Вместо этого вам следует создать собственную подтему, которая не размещается на Drupal.org.