Drupal 8 удаляет лишние элементы и добавляет пользовательские классы в меню - PullRequest
Новая
       26

Drupal 8 удаляет лишние элементы и добавляет пользовательские классы в меню

0 голосов
/ 13 февраля 2019

В настоящее время {{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>';

}

Любое предложение

1 Ответ

0 голосов
/ 21 февраля 2019

  1. Убедитесь, что у вас включена отладка веток , это сделает вашу жизнь намного проще, добавив комментарии к вашей разметке (которую вы можете увидеть встроенным в веб-инспекторе),Используя эти комментарии, вы можете определить, как назвать файл темы.

  2. Создайте новый пользовательский файл ветки в каталоге /templates вашей темы, например themes/[your-theme-name-here]/templates/menu.html.twig.В качестве отправной точки я бы предложил либо использовать классную тему по умолчанию menu.html.twig template , либо клонировать файл, указанный в комментариях на своем сайте, когда у вас включена отладка веток.

  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 %}
...