我一直在尝试在Bolt中实现一个三层子菜单。我希望菜单只显示顶层,除非在菜单中选择了顶层,此时,我希望只显示第二层。如果选择了第二层中的菜单选项,我希望只显示该选择的子菜单。到目前为止,我已经尝试过这个:
{% for item in menu %}
<li class="{% if item|current %}active{% endif %}">
<a href=" {{ item.link }}" {% if item.title is defined %}title='{{ item.title|escape }}'{% endif %}
class='{% if item.class is defined %}{{item.class}}{% endif %}'>
{% if item.submenu is defined and item|current %} <i class='fa fa-lg fa-caret-down'></i> {% elseif item.submenu is defined and not item|current %}<i class='fa fa-lg fa-caret-right'></i>{% endif %}
{{item.label}}
</a>
</li>
{% if item.submenu is defined and item|current %}
<ul class="nav nav-level2">
{% for item in item.submenu %}
<li {% if item|current %}class='active' {% endif %}>
<a href="{{ item.link }}" {% if item.title is defined %}title='{{ item.title|escape }}'{% endif %}>
{{item.label}}
</a>
</li>
{% if item.submenu is defined%}
{% if item|current %}
<ul class='nav nav-level3'>
{% for item in item.submenu %}
<li class='{% if item|current %}active{% endif %}'>
<a href="{{ item.link }}" {% if item.title is defined %}title='{{ item.title|escape }}'{% endif %}>
{{item.label}}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
{%endfor%}
我在config.yml中的菜单结构为:
_sample menu:
- label: First Section
path: First_Section_Path
- label: Second Section
path: second_section_path
submenu:
-label: Second tier
path: second_tier_path
submenu:
-label: Third tier
-path: third_tier_path
- label: Third Section
path: third_section_path
有更好的方法吗?还是我只是错过了一些显而易见的东西?
提前感谢您的帮助。
默认主题使用宏。https://github.com/bolt/bolt/blob/master/app/theme_defaults/_sub_menu.twig
如果你想限制你的结果深度,你可以通过宏传递一个参数,增加它并阻止它递归。