夹层中的自定义菜单

Question

我有以下夹层树.html

{% if page_branch_in_menu %}
<ul class="nav nav-list navlist-menu-level-{{ branch_level }}">
  {% for page in page_branch %}
  {% if page.in_menu %}
  {% if page.is_current_or_ascendant or not page.is_primary %}
     <li class="
        {% if page.is_current %} active{% endif %}
        {% if page.is_current_or_ascendant %} active-branch{% endif %}
        " id="tree-menu-{{ page.html_id }}">
        <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
        {% if page.has_children_in_menu %}{% page_menu page %}{% endif %}
     </li>
  {% endif %}
  {% endif %}
  {% endfor %}
</ul>
{% endif %}

在 base.html 我有以下块：

<div class="col-md-2 left">
    {% block left_panel %}
    <div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
    {% endblock %}
</div>

问题在于，在某些菜单为空的页面上，css 样式会应用于具有空菜单列表的 div，并且用户可以观察到空容器。在 html 中它看起来像：

<div class="col-md-2 left">
<div class="panel panel-default tree">
<ul class="nav nav-list navlist-menu-level-0"></ul>
</div>
</div>

我可以用 .nav:empty { display:none;} 之类的东西隐藏子 ul，但父级仍然可见。以下是关于类似问题的讨论：:empty selector for parent element

Mezzanine 模板标签可以解决这个问题吗？

Answer 1

{% if page_branch %} 无济于事，因为它充满了所有不在 in_menu 中的页面。 所以最好在上下文之前过滤它们。

menu_pages = page_branch.filter(in_menu=True)

您还应该将if 块放在div.tree 之上

{% if menu_pages %}
    <div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
{% endif %}

另一种方法是编写自定义过滤器

{% with menu_pages=page_branch|filter_in_menu %}
    {% if menu_pages %}
        ...
    {% endif %}
{% endif %}

但是没有办法对带有内置语法或夹层标签的查询集应用额外的过滤器。

Answer 2

您可以使用if 标记包装代码。

{% if page_branch %}
<ul>
{% for page in page_branch %}
{% if page.in_menu %}
{% if page.is_current_or_ascendant or not page.is_primary %}
<li>
    {% if not page.is_primary %}
    <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
    {% endif %}
    {% page_menu page %}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endif %}