Question

我正在寻找一种方法来构建一个用.yaml文件填充的导航。我可以迭代yaml来创建导航项和正确的URL，当你在特定网址上时，它还会为导航项添加一个活动类。我上传了现有导航的截图 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>

我遇到一个问题，子文件夹项目是手风琴，并且当其中一个子项与当前网址匹配并因此处于活动状态时，父级手风琴被打开。有没有找到yaml和液体的父项目？然后我可以以某种方式检查父导航项是否包含活动子项？

Answer 1

如果有其他人坚持这一点，我可以在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>

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

1 个答案: