アコーディオンを含むJekyllでyamlをnavに取り込む方法

Question

.yamlファイルが埋め込まれたナビゲーションを構築する方法を探しています。 yamlを繰り返して、navアイテムを作成し、urlを修正して、その特定のURLにいるときにnavアイテムにアクティブなクラスを追加することもできます。私は、サブフォルダ項目がアコーディオンにいるとなると問題に実行しています既存のNAV nav getting populated with active class

私のYAMLファイル

nav: 
    - page: Home 
    url: /index.html 
    - page: Getting Started 
    url: /getting-started.html 
    - title: Delivery 
    subfolderitems: 
     - page: Intro 
     url: /Delivery/delivery-intro.html 
     - page: Set Up 
     url: /Delivery/delivery-deploy.html 
     - page: Thing 3 
     url: /thing3.html 
    - title: Group 2 
    subfolderitems: 
     - page: Piece 1 
     url: /piece1.html 
     - page: Piece 2 
     url: /piece2.html 
     - page: Piece 3 
     url: /piece3.html 
    - title: Group 3 
    subfolderitems: 
    - page: Widget 1 
     url: /widget1.html 
    - page: Widget 2 
     url: /widget2.html 
    - page: Widget 3 
     url: /widget3.html 

私のhtmlファイル

<nav> 
<ul id="nav-menu" class="nav nav-list"> 
    {% for item in site.data.static-nav.nav %} 
    <li class="{% if item.url == page.url %} active-item {% endif %}"> 
     <a href="{{ item.url }}">{{ item.page }}</a> 
    </li> 
     {% if item.subfolderitems[0] %} 
      {% for subitem in item.subfolderitems %} 
      {% if subitem.url == page.url %} 
       {% assign activesubitem = true %} 
      {% endif %} 
      {% endfor %} 
     <li class="parent {% if activesubitem == true %}collapsibleListOpen{% else %}collapsibleListClosed{% endif %}"> 
      <div class="subtree-name">{{ item.title }}</div> 
      <ul class="nav nav-list"> 
       {% for subitem in item.subfolderitems %} 
        <li class="{% if subitem.url == page.url %} active-item {% endif %}"> 
         <a href="{{ subitem.url }}">{{ subitem.page }}</a> 
        </li> 
       {% endfor %} 
      </ul> 
     </li> 
     {% endif %} 
    {% endfor %} 
</ul> 
</nav> 

のスクリーンショットをアップロード副項目の1つが現在のURLと一致し、したがってアクティブであるときに、親アコーディオンが開かれます。 yamlと液体の親アイテムを見つけるために離れていますか？私は親ナビアイテムにアクティブなサブアイテムが含まれているかどうか調べることができましたか？

Answer 1

他の誰かがこれに執着している場合、私は{% break %}をforループ内でループから抜け出すことができました。 {% break %}を使用するには、新しいバージョンの液体が必要な場合があります。次に、そのアコーディオン内にあるサブページを開いたときに正しいアコーディオンを開くようにクラスを追加する変数を割り当てました。

<nav> 
<ul id="nav-menu" class="nav nav-list"> 
    {% for item in site.data.static-nav.nav %} 
    <li class="{% if item.url == page.url %} active-item {% endif %}"> 
     <a href="{{ item.url }}">{{ item.page }}</a> 
    </li> 
    {% assign item_isOpen = false %} 
     {% if item.subfolderitems[0] %} 
      {% for subitem in item.subfolderitems %} 
       {% if subitem.url == page.url %} 
        {% assign item_isOpen = true %} 
        {% break %} 
       {% endif %} 
      {% endfor %} 
    <li class="{% if item_isOpen == true %} parent collapsibleListOpen {% else %} parent collapsibleListClosed {% endif %}"> 
     <div class="subtree-name">{{ item.title }}</div> 
     <ul class="nav nav-list"> 
      {% for subitem in item.subfolderitems %} 
      <li class="{% if subitem.url == page.url %} active-item {% endif %}"> 
       <a href="{{ subitem.url }}">{{ subitem.page }}</a> 
      </li> 
      {% endfor %} 
     </ul> 
    </li> 
    {% endif %} 
    {% endfor %} 
</ul>