Question

我有以下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>

感谢您的耐心和时间。

Answer 1

Liquid for循环有辅助变量，例如forloop.first和forloop.last。请参阅文档here。

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

---
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>

在Jekyll的帖子中添加一个类

1 个答案: