添加類後傑基爾中

Question

我有以下哲基爾指數

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