TWIG - 将项目 class 分成几列

TWIG - Divide into columns with item class

我使用 TIWG 和 Wordpress。

我正在尝试为菜单创建一个系统,以便在项目获得 class 时生成新列。

当菜单项变得特定时 class (.split)。我想创建一个新专栏。

例如,我得到:

<ul class="menu__list">
    <li class="menu__item"></li>
    <li class="menu__item split"></li>
    <li class="menu__item"></li>
    <li class="menu__item"></li>
    <li class="menu__item split"></li>
    <li class="menu__item"></li>
</ul>

当一个项目得到 class .split,我想创建一个新的 .menu__list

像那样:

<ul class="menu__list">
    <li class="menu__item"></li>
</ul>

<ul class="menu__list">
    <li class="menu__item split"></li>
    <li class="menu__item"></li>
    <li class="menu__item"></li>
</ul>

<ul class="menu__list">
    <li class="menu__item split"></li>
    <li class="menu__item"></li>
</ul>

我写了那个,但是我遇到了一个问题:

{% for item in menu_main.get_items %}
    <ul class="nav__col">
        <li class="menu__item">{{ item.title }}</li>
    {% if item.classes[0] == 'split'  %}
    </ul><ul class="menu__list">
    {% endif %}
    </ul>
{% endfor %}

我得到一个空的输出 ul :

<ul class="menu__list">
    <li class="menu__item"></li>
</ul>

<ul class="menu__list">
    <li class="menu__item split"></li>
</ul>

<ul class="menu__list">

</ul>

<ul class="menu__list">
    <li class="menu__item"></li>
    <li class="menu__item"></li>
</ul>

我试过一次用变量获取这个条件,没有成功

{% set break = false %}
{% for item in menu_main.get_items %}
    <ul class="menu__list">
        <li class="menu__item">{{ item.title }}</li>
    {% if item.classes[0] == 'split' and not break  %}
    {% set break = true %}
    </ul><ul class="menu__list">
    {% endif %}
    </ul>
{% endfor %}

请问有什么帮助吗?

问题是在你的循环中,你有一个外部 <ul>。然后为每个菜单项创建一个 ul

没有看到什么 menu_main.get_items returns,这是我最好的猜测:

{# only create one outer list #}
<ul class="menu__list">
  {% for item in menu_main.get_items %}
    {% if item.classes[0] is defined and item.classes[0] is same as('split') %}
      {# the duplication here is intended to add the split class,
         this could be more *dry* but this way it's easier to read #}
      <li class="menu__item split">{{ item.title }}</li>

      {# close and reopen #}
      </ul><ul class="menu__list">
    {% else %}
      <li class="menu__item">{{ item.title }}</li>
    {% endif %}
  {% endfor %}
</ul>

演示:https://twigfiddle.com/zhm9bh