Question

我试图通过制作自己的速度模板在Liferay中进行一些非正统的导航。但是，似乎我的标记不起作用。这就是我想要做的事情：

我希望在4种不同选项之间做出主要选择。对于每个选项，都有两个级别的子菜单。到目前为止，它应该足够简单。但是，我希望主选项菜单与子菜单分开（主要是因为不同的部分或多或少是不同的网站）。

这就是我想要的：

<nav id="portal-choice">
    <ul>
        <li class="selected">Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
</nav>

<nav id="main-nav">
    <ul>
        <li class="parent-menu">Child of selected
            <ul class="child-menu">
                <li>Grandchild of selected</li>
                <li>Grandchild of selected</li>
            </ul>
        </li>
        <li class="parent-menu">Child of selected
            <ul class="child-menu">
                <li>Grandchild of selected</li>
            </ul>
        </li>
        <li>Child of selected</li>
    </ul>
</nav>

这就是我的尝试：

<nav id="portal-choice">
    <ul>
        #foreach ($nav_item in $nav_items)
            #set ($navHasChildren = $nav_item.hasChildren())
            #set ($nav_item_class = "")

            #if ($nav_item.isSelected())
                <li class="selected">
            #else
                <li>
            #end
                    <a href="$nav_item.getURL()" $nav_item.getTarget()>$nav_item.icon() $nav_item.getName()</a>
                </li>
            #if ($nav_item.isSelected())
                    </ul>
                </nav>
                <nav class="$nav_css_class" id="main-nav" title='#language("navigation")'>
                    <ul>
                        #if ($navHasChildren)
                            #foreach ($nav_child in $nav_item.getChildren())
                                #set ($hasGrandChildren = $nav_child.hasChildren())
                                #set ($nav_child_class = "")

                                #if ($nav_child.isSelected() || $nav_child.isChildSelected())
                                    #set ($nav_child_class = "selected")
                                #end
                                #if ($hasGrandChildren)
                                    #set ($nav_child_class = ${nav_child_class} + " parent-menu")
                                #end

                                <li class="$nav_child_class">
                                    <a href="$nav_child.getURL()" class="nav-link" $nav_child.getTarget()><span class="navigation-item">$nav_child.icon() $nav_child.getName()</span></a>
                                    #if ($hasGrandChildren)
                                        <a href="#" class="toggle-menu"></a>
                                    #end

                                    #if ($hasGrandChildren)
                                        <ul class="child-menu">
                                            #foreach ($nav_grandchild in $nav_child.getChildren())
                                                #if ($nav_grandchild.isSelected())
                                                    <li class="selected">
                                                #else
                                                    <li>
                                                #end
                                                <a href="$nav_grandchild.getURL()" class="child-link" $nav_grandchild.getTarget()><span class="sub-navigation-item">$nav_grandchild.getName()</span></a>
                                                </li>
                                            #end
                                        </ul>
                                    #end
                                </li>
                            #end
                        #end
                    </ul>
                </nav>
            #else
                    </ul>
                </nav>
            #end
        #end

帮助我Obi-wan Kenobi你是我唯一的希望。

Answer 1

你最好循环两次顶层导航。一次只是构建单级<ul>列表。然后，第二次，不显示任何顶级<ul>，仅显示一个选定的顶级导航项，显示其所有子项，如您所愿深度嵌套。

伪代码：

<nav id="portal-choice">
<ul>
    #foreach ($nav_item in $nav_items)
        #if ($nav_item.isSelected())
            <li class="selected">
        #else
            <li>
        #end
                <a href="$nav_item.getURL()" $nav_item.getTarget()>$nav_item.icon() $nav_item.getName()</a>
            </li>
    #end
</ul>
</nav>

<nav id="main-nav">
<ul>
    #foreach ($nav_item in $nav_items)
        #if ($nav_item.isSelected())
             #if ($navHasChildren)
                 #foreach ($nav_child in $nav_item.getChildren())
                     <li><!-- display any level of children --></li>
                 #end
             #end
         #end
    #end
</ul>
</nav>

Velocity并不适用于递归应用程序，因此“显示任何级别的子级”可能包含您想要显示的所有嵌套级别的一些重复代码。或者你创建一个宏 - 任何方式，至少这将有助于你开始。关键是循环导航两次。

另一种方法是使用“导航”Portlet，您可以将其配置为显示从级别“1”开始的所有页面，这将是当前顶级页面的子级。你只需在你的主题中嵌入这个portlet。

Liferay高级导航

1 个答案: