Comment remplir un nav avec yaml dans Jekyll qui contient des accordéons

Question

Je cherche un moyen de construire une navigation qui est peuplée avec un fichier .yaml. Je peux itérer sur le yaml pour créer les éléments nav et corriger les URLs qui ajoutent également une classe active à l'élément nav lorsque vous êtes sur cette URL particulière. J'uploadé une capture d'écran de la navigation existante nav getting populated with active class

mon fichier 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 

mon fichier 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> 

Je suis en cours d'exécution dans un problème avec les éléments de sous-dossier étant en Accordéons et ayant la l'accordéon parent étant basculé lorsque l'un des sous-éléments correspond à l'URL en cours et est donc actif. Y at-il loin de trouver l'élément parent avec yaml et liquide? Puis je pourrais vérifier si un élément de nav parent contient un sous-élément actif?

Answer 1

Si quelqu'un d'autre est bloqué à ce sujet, j'ai pu utiliser {% break %} à l'intérieur de la boucle for pour sortir de la boucle. Vous aurez peut-être besoin d'une nouvelle version de liquide pour utiliser {% break %}. J'ai alors assigné une variable qui ajoutera la classe pour avoir l'accordéon correct ouvert quand vous ouvrez une sous-page qui est dans cet accordéon.

<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>