如何在包含手风琴的Jekyll中使用yaml填充导航

我正在寻找一种方法来构建用.yaml文件填充的导航。我可以遍历yaml来创建导航项目并更正URL，当您位于特定的URL上时，这些URL也会将活动类添加到导航项目。我上传的现有资产净值 nav getting populated with active class 如何在包含手风琴的Jekyll中使用yaml填充导航

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

我正在与子项手风琴是和具有该问题的一个屏幕截图当其中一个子项匹配当前网址并因此处于活动状态时，父母手风琴即被打开。有没有找到与yaml和液体的父母项目？然后我可以以某种方式检查父导航项是否包含活动的子项？

来源

2017-10-16 John Wallace

我真的不明白这个问题。你要求找到一个子项的父项，但是你已经有了它的父项'item'变量。您正在寻找另一位家长吗？ – flyx

如果有其他人被困在这，我可以在for循环中使用{% break %}来跳出循环。您可能需要更新版本的液体才能使用{% 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>

来源

2017-10-19 15:32:41

如何在包含手风琴的Jekyll中使用yaml填充导航

回答

相关问题