Drupal 8 删除额外的 div 并在菜单中添加自定义类

Question

目前 {{page.primary_menu}} 创建了额外的div 和默认的 d8 类，如下所示：

<div class="region region-primary-menu">
    <nav role="navigation" aria-labelledby="block-demo-main-menu-menu" id="block-demo-main-menu">
            <h2 class="sr-only" id="block-demo-main-menu-menu">Main navigation</h2>
      
      <ul class="menu menu--main nav navbar-nav">
                      <li class="first">
                                        <a href="#mu-slider" data-drupal-link-system-path="<front>" class="is-active">Home</a>
              </li>
                      <li>
                                        <a href="/drupal8/" data-drupal-link-system-path="<front>" class="is-active">Home</a>
              </li>
                      <li class="last">
                                        <a href="#mu-about-us" data-drupal-link-system-path="<front>" class="is-active">ABOUT US</a>
              </li>
        </ul>
  
  </nav>
  </div>

但是，我想生成菜单结构，如下所示：

<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
    <li><a href="#mu-slider">HOME</a></li>
    <li><a href="#mu-about-us">ABOUT US</a></li>                       
    <li><a href="#mu-restaurant-menu">MENU</a></li>                       
    <li><a href="#mu-reservation">RESERVATION</a></li>                   
    <li><a href="#mu-gallery">GALLERY</a></li>
    <li><a href="#mu-chef">OUR TEAM</a></li>
    <li><a href="#mu-latest-news">BLOG</a></li> 
    <li><a href="#mu-contact">CONTACT</a></li> 
 </ul>

我创建了一个文件名demo.theme并粘贴了代码，但它没有给我预期的结果。

<?php 
use DrupalCoreFormFormStateInterface;
use DrupalCoreTemplateAttribute;
/**
 * Implements hook_preprocess_HOOK() for HTML document templates.
 *
 * Adds body classes if certain regions have content.
 */
function demo_menu_tree(&$variables) {
  return '<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">' . $variables['tree'] . '</ul>';
}

有什么建议吗？

Answer 1

1. 确保您启用了 twig 调试，它将使您的生活更轻松，方法是在您的标记中添加注释(您可以在 Web 检查器中看到内联(。使用这些注释，您可以弄清楚应该如何命名主题文件。

2. 在主题的/templates目录中创建一个新的自定义树枝文件，如 themes/[your-theme-name-here]/templates/menu.html.twig .作为起点，我建议使用默认的优雅主题menu.html.twig模板，或者在启用 twig 调试时克隆使用站点标记注释中内联引用的文件。

3. 编辑menu.html.twig文件以满足您的需求，如下所示：

{% import _self as menus %}
{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul id="top-menu" {{ attributes.addClass('nav navbar-nav navbar-right mu-main-nav') }}>
    {% else %}
      <ul class="menu">
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          'menu-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-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 %}