1

我有以下 Jekyll 索引

---
layout: default
title: My favourite sandwiches
---

<section class="home">
  {% for post in site.posts %}
    <article class="column">
      <img src="{{ post.image }}">
      <a href="{{ post.url }}">{{ post.title }}</a>
    </article>
  {% endfor %}
</section>

我的网站将有 3 篇文章（块）彼此相邻，例如图块。

但是，我想在第一篇和第三篇文章标签上添加一个类，以便添加不同的样式。

我想知道如何添加这种行为，以及是否有办法索引某些东西，例如。class="first" if index == 3/1

我想要的 html 看起来像这样

<section class="home">
    <article class="column first">
      <img src="images/bigsandwich.jpg">
      <a href="site.com/post/bigsandwich.html">My big sandwich</a>
    </article>

    <article class="column">
      <img src="images/icecreamsandwich.jpg">
      <a href="site.com/post/bigsandwich.html">Icecream sandwich</a>
    </article>

    <article class="column last">
      <img src="images/sushisandwich.jpg">
      <a href="site.com/post/sushisandwich.html">Sushi sandwich</a>
    </article>
</section>

感谢您的耐心和时间。

4

1 回答 1

3

Liquid 的 for 循环具有可用的辅助变量，例如forloop.first和forloop.last。请参阅此处的文档。

在你的情况下，我会尝试：

---
layout: default
title: My favourite sandwiches
---

<section class="home">
  {% for post in site.posts %}

    {% if forloop.first %}
      <article class="column first">
    {% elsif forloop.last %}
      <article class="column last">
    {% else %}  
      <article class="column">
    {% endif %}

      <img src="{{ post.image }}">
      <a href="{{ post.url }}">{{ post.title }}</a>
    </article>
  {% endfor %}
</section>
于 2013-07-09T21:18:51.227 回答