杰基尔 - 用前面的数据创建一个画廊

时间:2018-02-21 22:02:06

标签: jekyll shopify liquid static-site jekyll-extensions

我想创建一个"列表"来自我的帖子前面的数据中的标签用于灯箱插件。

所以,让我说我的帖子前面有以下内容:

gallery: true
images:
 - name: image-1.jpg
   alt: image-1
 - name: image-2.jpg
   alt: image-2
 - name: image-3.jpg
   alt: image-3

我想循环遍历该数据并创建以下html:

<img id="thumb01" class="thumbnail" src="/assets/images/image-1.jpg" data-src="/assets/images/image-1.jpg" data-prev="thumb03" data-next="thumb02" alt="image-1">
<img id="thumb02" class="thumbnail" src="/assets/images/image-2.jpg" data-src="/assets/images/image-2.jpg" data-prev="thumb01" data-next="thumb03" alt="image-2">
<img id="thumb03" class="thumbnail" src="/assets/images/image-3.jpg" data-src="/assets/images/image-3.jpg" data-prev="thumb02" data-next="thumb01" alt="image-3">

我在考虑在帖子布局中插入以下内容:

{% if page.gallery %}
some type of loop
{% endif %}

但我还没有获得如何实现这一点的线索, 请帮忙!
谢谢!

1 个答案:

答案 0 :(得分:0)

试试这个:

{% if page.gallery == true %}
  {%- for img in page.images -%}

    {% comment %}
      If we have more than one image,
      we calculate next and prev index
    {% endcomment %}
    {% if forloop.length > 1 %}
      {% if forloop.first %}
        {% assign prev = forloop.length %}
      {% else %}
        {% assign prev = forloop.index | minus: 1 %}
      {% endif %}

      {% if forloop.last %}
        {% assign next = 1 %}
      {% else %}
        {% assign next = forloop.index | plus: 1 %}
      {% endif %}
    {% endif %}

<img id="thumb{{ forloop.index }}" class="thumbnail"
     src="{{ site.basurl }}/assets/images/{{ img.name }}"
     data-src="{{ site.basurl }}/assets/images/{{ img.name }}"
     {% comment %} only necessary if we have more than one image {% endcomment %}
     {%- if forloop.length > 1 -%}
     data-prev="thumb{{ prev }}"
     data-next="thumb{{ next }}"
     {%- endif %}
     alt="{{ img.alt }}" >

  {%- endfor -%}
{% endif %}