使用 Jinja 循环项目，每 5 个项目后添加 div

2024-01-01

Problem

我有 100 个高尔夫球场的列表，我希望插入一个 div，其中每五个球场后包含一个广告图像。我该怎么做呢？

更新#1

content.html（修订后的最新版本）

我已经更新了我的原始代码片段，因为 leovp 的建议在下面编辑。我无法仅显示{% if content.featured == "Test" %}并想知道我应该如何结束我的 if-else 语句。

    {% for content in COPY.courses %}
            <div class="course course--featured">
                <a href=""><img src="" class="course__image image--region"></a>

                <div class="course__inner">
                    <div class="course__wrapper">
                        {% if content.state == "MO" %}
                            <p class="course__state">Missouri</p>
                        {% elif content.state == "IL" %}
                            <p class="course__state">Missouri</p>
                        {% endif %}
                    </div>

                    <div class="course__wrapper">
                        <a href=""><p class="course__name name--region">{{ content.name }}</p></a>
                    </div>
                    <p class="course__desc">{{ content.description }}</p>
                </div>
            </div>

    {% if loop.index % 5 == 0 %}
    <div class="advertising advertising--inline">
        <div class="ad ad--rect">

            <div class="text-center hidden-xs">
                <div id="fixed-leaderboard-region-top"
                    class="dfp-ad"
                    data-dfp-custom-pos="fixed-leaderboard-top, htf"
                    data-dfp-size="[728,90]">
                </div>
            </div>

            <div class="text-center hidden-sm hidden-md hidden-lg">
                <div id="fixed-leaderboard-region-top-mobile"
                    class="dfp-ad"
                    data-dfp-custom-pos="fixed-leaderboard-top, htf"
                    data-dfp-size="[320,50]">
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>

content.html（以前的旧版本用于比较）

我研究过使用batch http://jinja.pocoo.org/docs/2.9/templates/#batch来自这个堆栈溢出question https://stackoverflow.com/questions/17797921/jinja2-create-new-row-for-every-3-items这看起来很相似，但我不确定这是否能解决我的问题？

{% COPY.courses 中的内容 %} {% if content.featured == "测试" %}

<div class="course__inner">
    <div class="course__wrapper">
        {% if content.state == "MO"%}
        <p class="course__state">Missouri</p>
        {% elif content.state == "IL" %}
        <p class="course__state">Illinois</p>
        {% endif %}
    </div>

    <div class="course__wrapper">
        <a href=""><p class="course__name name--home">{{ content.name }}</p></a>
    </div>
    <p class="course__desc">{{ content.description }}</p>
</div>

{％万一％} {% 结束 %}

迭代时，您可以获取当前索引并检查它是否能被 5 整除：

{% set count = 0 %}
{% for content in COPY.courses %}
{% if content.featured == "Test" %}
<div class="course course--featured">
    <a href=""><img src="" class="course__image image--home"></a>
    [...]
    </div>
</div>

{% set count = count + 1 %}
{% if count % 5 == 0 %}
    <!-- additional content once every 5 courses -->
{% endif %}
{% endif %}
{% endfor %}

注意：此方法在 2.10 版本之后不再有效。

详细请参见：如何在 jinja 模板中的 for 循环上增加变量？ https://stackoverflow.com/questions/7537439/how-to-increment-a-variable-on-a-for-loop-in-jinja-template

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)