我有以下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>
感谢您的耐心和时间。
答案 0 :(得分:3)
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>