如果列表中没有 child 个子页面，如何从列表中隐藏该页面的名称？

Question

我只想显示 header 中包含 child 个页面的那些页面。使用以下代码

<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list"  >
    <li aria-haspopup="true"  data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
        <a class="" href="javascript:void(0);" data-sly-test="!${item.hasChild}">${item.title}</a>
        <div class="wsmegamenu clearfix ">
            <div class="container paddingmenu">
                 <div class="row">
                     <div class="menuimgdiv"  data-sly-repeat.subcategory="${item.listChildren}">
                         <h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
                         <ul>
                             <li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path  @ extension='html'}">${page.title}</a></li>
                         </ul>
                     </div>
                 </div>
             </div>
         </div>
     </li>
     <li aria-haspopup="true"><a href="http://dot.odishatourism.gov.in/" target="_blank"> Dept of Tourism</a></li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>

给出以下输出

但是这段代码-

<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
    <ul class="wsmenu-list"  >
        <li aria-haspopup="true"  data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
            <a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
                <div class="wsmegamenu clearfix ">
                    <div class="container paddingmenu">
                        <div class="row">
                            <div class="menuimgdiv"  data-sly-repeat.subcategory="${item.listChildren}">
                                <h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
                                <ul>
                                    <li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path  @ extension='html'}">${page.title}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li aria-haspopup="true"><a href="http://dot.odishatourism.gov.in/" target="_blank"> Dept of Tourism</a></li>
        </ul>
        <a class="wsdownmenu-animated-arrow"><span></span></a>
        <div class="wsdownmenu-text">Navigation</div>
    </nav>

给出如下所示的输出

代码

<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>

工作不正常。

我的网站结构如下图

实际需要的输出是

Answer 1

您不能在测试条件中使用 ${item.hasChild}，因为页面 API 的 hasChild() 方法需要您传递一个参数。 AFAIK，HTL 不支持参数化方法的调用。

由于无法直接API检查页面是否有子页面，您可能需要执行以下操作来验证页面是否有子页面

<a class="" href="javascript:void(0);" data-sly-test="${item.listChildren && item.listChildren.hasNext}">${item.title}</a>

但是，我更愿意使用 Sling 模型或 WCM 使用 API 构建整个导航树，而不是在 HTL 中调用那么多方法。这将使代码更易于维护、更改和测试。 YMMV

如果列表中没有 child 个子页面，如何从列表中隐藏该页面的名称？

How to hide the name of a page from a list if it has no child sub pages in sightly?

aem

sightly