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> 

速度不是遞歸應用確實不錯，所以「顯示孩子的任何級別」可能包含有點重複的代碼對所有要顯示的嵌套級別。或者你創建一個宏 - 至少這會幫助你開始。關鍵是要循環瀏覽兩次。

另一種替代方法是利用「導航」Portlet，您可以將其配置爲顯示從級別「1」開始的所有頁面，這將是當前頂級頁面的子級。您只需將此portlet嵌入到您的主題中。