Jekyll 中的流动嵌套 For-Loop 语法问题

Question

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

我正在使用 Jekyll 来提供作品集。我正在使用一个投资组合插件以及一个名为 Lightbox 的 JS 库。我有投资组合插件工作。理想的操作是每次用户单击投资组合项目时，它都会执行灯箱（这是有效的）。为了让更多图片存储在灯箱中，我必须给它们起相同的 data-title 名称。

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

我的 .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 文件中调用数据，或两者兼而有之。

再次感谢您的宝贵时间。

丹尼尔

(edit: 在嵌套的 endfor 循环中取出 space，现在运行但是 returns: href="../images/projects/] }}" and data-title and data-lightbox returns 用于每个 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