yaml - Jekyll 中的液体嵌套 For-Loop 语法问题

Question

第一次发帖，提前感谢您的宝贵时间c:

我正在使用 Jekyll 来提供作品集。我正在使用一个作品集插件以及一个名为 Lightbox 的 JS 库。我的投资组合插件正在运行。理想的操作是每次用户单击投资组合项目时，它都会执行灯箱(正在运行)。为了将更多图像存储在灯箱中，我必须为它们提供相同的数据标题名称。

我的理解是，我需要在当前循环中嵌套一个 for 循环，以检查数组中的所有项目以返回任何其他灯箱项目。

我的 .yml 文件如下所示:

title: Portfolio Title
description: A crazy portfolio item
bg-image: Test-01.png
lb-images:
  - Test-01.png
  - Test-02.png
  - Test-03.png`

我的 .md 文件如下所示:

<div class="flex-container">
  <!-- portfolio-item -->
{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}
{% for project in projects reversed %}

    <div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
      <a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
      <div id="overlay">
        <span id="reveal-text">
          <h3>{{ project.title }}</h3>
          <p>{{ project.description }}</p>
          <p>{{ project.category }}</p>
        </span>
      </div>
      </a>
    </div>

    {% for project in projects %}
    <a href="../images/projects/{{ project.lb-images[{{forloop.index}}] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}"></a>
    {% endfor %}

{% endfor %}
</div>

我假设 forloop.index 将从 [1] 开始，然后继续遍历该数组，直到不再有 lb-images >。但有事发生了。我的猜测是语法或我如何从 .yml 文件调用数据，或两者兼而有之。

再次感谢您的宝贵时间。

丹尼尔

(编辑:在嵌套 endfor 循环中取出空间，现在运行但返回:href="../images/projects/] }}" 和 data-title 和 data-lightbox 返回的是每个 data.project 文件，而不是 data.project.lb-images 中的每个项目)

Answer 1

公开项目图像的正确循环是:

{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}

<div class="flex-container">
  {% for project in projects reversed %}
    <!-- portfolio-item -->
    <div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
      <a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
      <div id="overlay">
        <span id="reveal-text">
          <h3>{{ project.title }}</h3>
          <p>{{ project.description }}</p>
          <p>{{ project.category }}</p>
        </span>
      </div>
      </a>
    </div>
    {% for img in project.lb-images %}
      {% if forloop.first != true %}
        <a href="../images/projects/{{ img }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}"></a>
      {% endif %}
    {% endfor %}
  {% endfor %}
</div>

Liquid forloop documentation