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

确保已启用twig debugging，通过在标记中添加注释（您可以在Web检查器中以内联方式看到），可以使您的生活更加轻松。使用这些注释，您可以弄清楚应该为主题文件命名的名称。
像/templates一样在主题的themes/[your-theme-name-here]/templates/menu.html.twig目录中创建一个新的自定义树枝文件。首先，我建议您使用默认的经典主题menu.html.twig template，或者在启用了细枝调试后，克隆使用网站标记注释中的内联引用文件。
编辑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 %}

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

1 个答案: