Liferay高级导航

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

欧比万·克诺比帮帮我，你是我唯一的希望。

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 对于递归应用程序来说并不是很好，因此 "display any level of children" 可能包含一些要显示的所有嵌套级别的重复代码。或者你创建一个宏——无论如何，至少这会帮助你开始。关键是循环导航两次。

另一种选择是利用 "Navigation" Portlet，您可以将其配置为显示从级别“1”开始的所有页面，这将是当前顶级页面的子页面。您只需将此 portlet 嵌入到您的主题中即可。

Liferay高级导航

Liferay advanced navigation

navigation

templates

themes

velocity

liferay