Question

使用博尔特，我想抓住我最近的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 %}

知道如何编辑我的模板以完成我之后的工作吗？非常感谢。

Answer 1

您可以使用css :nth-child selector

示例：

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

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

（@ ruffp，感谢您的反馈）

Answer 2

您可以使用twig在循环中使用的loop.index或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

奇数/偶数记录具有唯一的CSS类

2 个答案: