почему flask jinja выдает ошибку, когда я использую этот {{bg_color}} в качестве цвета фона

Question

это мой код, который я хочу придать комментариям разные цвета, например, от серого (#eee) до нечетного и синего (#e6f9ff) до четного

вот эта строка выдает ошибку

цвет фона: {{bg_color}}

      {% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index % 2 == 0 %}
                {% set bg_color = '#e6f9ff' %}
            {% else %}
                {% set bg_color = '#eee' %}
            {% endif %}

            <div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

Я думаю, что версия jinja обновлена, а мой курс, которому я следую, устарел, поэтому любой, кто знает, ответит мне.

Answer 1

Вы должны отметить область действия переменных. Если вы определяете переменную в блоке if-else, она действительна только там.

      <div style="width: 50%; margin: auto">
    {% for comment in comments -%}
    {% set bg_color = '#e6f9ff' if loop.index % 2 == 0 else '#eee' %}
    <div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
        <p>#{{ loop.index }}</p>
        <p style="font-size: 24px">{{ comment }}</p>
    </div>
    {% endfor -%}
</div>

Вместо использования jinja вы также можете использовать css, чтобы назначить другой цвет фона для каждой второй строки.

      <div class="comments">
    {% for comment in comments -%}
    <div>
        <p>#{{ loop.index }}</p>
        <p class="text">{{ comment }}</p>
    </div>
    {% endfor -%}
</div>

<style type="text/css">
    .comments {
        width: 50%; 
        margin: auto;
    }

    .comments div {
        padding: 10px; 
        background-color: #e6f9ff;
        margin: 20px
    }

    .comments div:nth-child(odd) {
        background-color: #eee;
    }

    .comments .text {
        font-size: 24px
    }
</style>