3 级 Deep Timber 菜单（WordPress）

Question

我对木材一点都不熟悉，但正在帮助一个朋友完成一个用它建造的项目。所以任何帮助都会有很长的路要走！

我只显示了前两层。有没有办法调用 child 的 child？

我在这里使用代码，并在 child 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 %}

Answer 1

您可以通过在彼此内部嵌套 for 循环来访问多层菜单。这是我测试过并有效的代码片段。

{% 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

然后为了在其中获取 children，您循环遍历 item.children，因为 item 是代表 top/main 级别的每个导航项的变量。您循环遍历 item.children 以到达下一个级别或 main/top 级别内的 children。

然后要进入第三层，循环遍历 child.children，因为 child 是表示第二层的变量。我们想遍历第二层的 children 。所以我们 third in child.children。 third 是表示向下 3 层的项目的变量。

我希望你能看到这里的模式，如果你有更深层次的项目，你可以继续这个，尽管在某些时候它可能会变得荒谬。就像你的项目嵌套了 5 或 6 层深。

让我知道这是否合理，如果不合理，如果您仍有疑问，我将非常乐意尝试以另一种方式进行解释。

干杯

3 级 Deep Timber 菜单（WordPress）

3 Level Deep Timber menu (Wordpress)

wordpress

menu

timber