Трехуровневое меню Deep Timber (Wordpress)

Я совсем не знаком с деревом, но помогаю другу завершить проект, который был построен из него. Так что любая помощь будет иметь большое значение, пожалуйста!

У меня появляются только первые два уровня. Есть ли способ вызвать ребенка к ребенку?

Я использую здесь код и добавляю к нему еще один уровень под дочерним https://timber.github.io/docs/guides/menus/

{% if menu %}


<div class="header-menu-items">

  <div class="header-menu-item mod-title">
    <a href="{{ site.url }}" class="" rel="home">
      <div class="header-item-logo">
        <div class="sitelogo">{{ site.name }}</div>
      </div>
    </a>
  </div>

  {% for item in menu.get_items() %}
    <div class="header-menu-item {{ item.current ? 'is-active' : '' }}">

      <div class="header-menu-item-link">
        <a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
      </div>

      <div class="header-menu-item-triangle"></div>

      <div class="header-menu-item-mega {{ item.section_colour ? " mod-#{item.section_colour}" : '' }}">

        {% if item.master_object.thumbnail %}
          <div class="mega-image mod-image" style="background-image: url( {{item.master_object.thumbnail.src('thumbnail') }} )">
        {% else %}
          <div class="mega-image">
        {% endif %}
          {{ item.title }}
        </div>

        <div class="mega-items">
          {% for child in item.children %}
            <div class="mega-item">
              <a target="{{ child.target }}" href="{{ child.link }}">
                <span class="mega-item-title">{{ child.title }}<br /></span>
                <span class="mega-item-excerpt">Mega menu description lorem ipsum dolores</span>
              </a>
            </div>
            {% for child in child.children %}
               Just testing to see if it'll even show up first before applying style<br />
               {{ child.title }}<br />
            {% endfor %}
          {% endfor %}
        </div>
      </div>


    </div>
  {% endfor %}

</div>
{% endif %}

menu wordpress timber
person KatrinaL    schedule 18.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете получить доступ к меню на несколько уровней, вложив петли друг в друга. Вот фрагмент кода, который я протестировал и работал.

{% for item in menu__main.items %} {# This is the top level #}
  <p>{{ item }}</p>

  {% if item.children %}
    {% for child in item.children %} {# 2nd Level #}
      <p><em>{{ child }}</em></p>

      {% if child.children %}
        {% for third in child.children %} {# 3rd Level #}
          <p><strong>{{ third }}</strong></p>
        {% endfor %} {# for third in child.children #}
      {% endif %} {# if child.children #}

    {% endfor %} {# for child in item.children #}
  {% endif %} {# if item.children #}
{% endfor %} {# for item in menu__main.items #}

Я добавил комментарии в конце строк, чтобы, надеюсь, прояснить это. Итак, вверху вы проходите через item in menu__main.items

Затем, чтобы получить дочерние элементы внутри них, вы выполняете цикл item.children, поскольку item - это переменная, которая представляет каждый элемент навигации на верхнем / основном уровне. Вы проходите через item.children, чтобы перейти на следующий уровень или к дочерним элементам основного / верхнего уровня.

Затем, чтобы попасть внутрь третьего уровня, вы выполняете цикл child.children, поскольку child - это переменная, представляющая 2-й уровень. Мы хотим перебрать потомков этого 2-го уровня. так что делаем third in child.children. third - это переменная, которая представляет элементы на 3 уровня ниже.

Надеюсь, вы видите здесь закономерность и можете продолжить это еще дальше, если у вас есть предметы на еще более глубоких уровнях, хотя в какой-то момент это, вероятно, станет смешным. Например, если у вас есть предметы, вложенные в 5 или 6 уровней.

Дайте мне знать, есть ли в этом смысл, а если нет, я буду более чем счастлив попытаться объяснить это по-другому, если у вас все еще есть вопросы.

Ваше здоровье

person robertguss    schedule 20.03.2018
comment
Я люблю тебя, большое спасибо за срыв. Это сработало - person KatrinaL; 07.04.2018