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>
我使用 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>