0

使用 Bolt，我想获取我的 4 个最新条目。很容易。但是，我需要第 1 个和第 3 个条目在它们周围有一个特定的 CSS 类，而第 2 个和第 4 个条目将有自己的类。

最终，HTML 应该类似于：

    <div class="quarter alt">
        <h3><a href="{{ record.link }}">{{ record.title }}</a></h3>
        <p>{{ record.teaser }}</p>
        <p><a href="{{ record.link }}">Read more</a>.</p>  
    </div>
    <div class="quarter">
        <h3><a href="{{ record.link }}">{{ record.title }}</a></h3>
        <p>{{ record.teaser }}</p>
        <p><a href="{{ record.link }}">Read more</a>.</p>  
    </div>
    <div class="quarter alt">
        <h3><a href="{{ record.link }}">{{ record.title }}</a></h3>
        <p>{{ record.teaser }}</p>
        <p><a href="{{ record.link }}">Read more</a>.</p>  
    </div>
    <div class="quarter">
        <h3><a href="{{ record.link }}">{{ record.title }}</a></h3>
        <p>{{ record.teaser }}</p>
        <p><a href="{{ record.link }}">Read more</a>.</p>  
    </div>

我玩过代码片段和文档，现在我找到了 loop.first 但当然这只适用于第一个条目：

{% setcontent records = "entries/latest/4" %}
{% for record in records %}

{% if loop.first %}
    <div class="quarter alt">
        <h3><a href="{{ record.link }}">{{ record.title }}</a></h3>
        <p>{{ record.teaser }}</p>
        <p><a href="{{ record.link }}">Read more</a>.</p>  
    </div>
{% else %}
    <div class="quarter">
        <h3><a href="{{ record.link }}">{{ record.title }}</a></h3>
        <p>{{ record.teaser }}</p>
        <p><a href="{{ record.link }}">Read more</a>.</p>  
    </div>
{% endif %}
{% endfor %}

知道如何编辑我的模板来完成我所追求的吗？非常感谢。

4

2 回答 2

1

您可以使用 css :nth-child 选择器

例子：

.quarter:nth-child(odd) {
    /* CSS for row 1 & 3 */
}

.quarter:nth-child(even) {
    /* CSS for row 2 & 4 */
}

（@ruffp，感谢您的反馈）

于 2014-10-16T20:21:10.347 回答
1

您可以使用twig 在循环中使用的loop.indexor变量loop.index0

{% setcontent records = "entries/latest/4" %}
{% for record in records %}
    {% if loop.index is odd %}
        <div class="quarter">
            {{ loop.index }} odd stuff
        </div>
    {% else %}
        <div class="quarter alt">
            {{ loop.index }} even stuff
        </div>
    {% endif %}
{% endfor %}

有关更多信息，您可以查看http://twig.sensiolabs.org/doc/tags/for.html和http://twig.sensiolabs.org/doc/tests/odd.html

于 2014-10-17T11:56:28.757 回答