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 Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Template\Attribute;

/**
 * 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

1234563使用这些 cmets，您可以确定您应该为主题文件命名。

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

2. 编辑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 %}