如果循环中的第一项，Nunjucks 将 class 添加到元素

Question

我正在对存储在 yaml 文件中的一组内容执行循环，该文件概述了我页面的 table 内容。对于循环中的第一项，我想向 class 添加一个 'is-active' 修饰符。所有其他项目不应接收此项目。 'is-active' class 将导致我的手风琴 open/expanded 而不是关闭。

出于某种原因，我使用的语法不起作用。非常感谢您能给我的任何帮助。

template.html

<!-- language: lang-html -->
<div class="grid-container leader-1">
  <div class="column-6 tablet-column-12">
    <aside class="js-accordion accordion tablet-hide" aria-role="complementary">
      {% for group in data.table_of_contents[section].navigation %}
      {% if group.hidden != true %}
      {% if loop.first == true %}
      <div class="accordion-section is-active">
      {% else %}
      <div class="accordion-section">
      {% endif %}
        <h4 class="accordion-title">
          <span class="accordion-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/>
            </svg>
          </span>
          {{ group.group }}
        </h4>
        <!-- accordion-menu -->
        <div class="accordion-content">
          {% for page in group.pages %}
          {% if page.title == 'Overview' %}
          <a href="#{{group.group | replace(" ", "-") | lower}}" class="side-nav-link">{{page.title}}</a>
          {% else %}
          <a href="#{{page.link}}" class="side-nav-link">{{page.title}}</a>
          {% endif %}
          {% endfor %}
        </div>
      {% endif %}
      {% endfor %}
      </div>
    </aside>
  </div>
</div>

出于某种原因，我的 'is-active' 修饰符被添加到所有 'accordion-section' div 中。我只想将它添加到它创建的第一个 'accordion-section' div 中，以便展开第一个手风琴部分，并关闭其下方的其余部分。

table-的-contents.yml

get-started:
title: 'Get Started'
base: 'get-started'
navigation:
  - group: 'Get Started'
    pages:
      - title: 'Overview'
        link: get-started
      - title: 'Static Files'
        link: static-files
      - title: 'Ruby Gem'
        link: ruby-gem
      - title: 'Whats New'
        link: whats-new
javascript:
title: 'JavaScript'
base: javascript
navigation:
  - group: 'Interactive Patterns'
    pages:
      - title: 'Overview'
        link: overview
      - title: 'Import calcite-web.js'
        link: importing
      - title: 'Event Bus'
        link: event-bus
  - group: 'Utility Functions'
    pages:
      - title: 'Overview'
        link: utility-functions
      - title: 'DOM Utilities'
        link: dom-utilities

table的内容持续了很长一段时间，但这是结构的代表性示例。

Answer 1

此比较不能使用双等号。尝试简单地检查布尔值而不进行比较：

{% if loop.first %}
  <div class="accordion-section is-active">
{% else %}
  <div class="accordion-section">
{% endif %}

如果循环中的第一项，Nunjucks 将 class 添加到元素

Nunjucks add class to element if first item in loop

html

yaml

jinja2

templating

nunjucks