Question

在Jinja2中只有apparently没有任何东西能让Zebra风格的行开箱即用，所以我们“手工”完成。

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    mydict = {'a': 8, 'k': 5, 'e': 7}
    return render_template('index.html', mydict=mydict)

if __name__ == '__main__':
    app.run()

样式是在两种背景颜色之间交替。

静态/ CSS / mystyle.css

.gray1 { background-color: #bbb; }
.gray2 { background-color: #eee; }

我正在使用一个需要在Jinja内设置一个计数器的字典。一世讨厌在五行代码中提出问题反击，但在这些情况下，我不确定是否有办法设置 up breakpoints等来调试模板。

模板/ index.html中

<!DOCTYPE HTML>
{% block styles %}
    <link rel="stylesheet" type="text/css"
        href="{{url_for('static', filename='css/mystyle.css')}}">
{% endblock %}
<body>
    {% set enum = 0 %}
    {% for item in mydict %}
        {% set enum = (enum + 1) %}
        {% if enum % 2 == 0 %}
            <div class="gray1">
        {% else %}
            <div class="gray2">
        {% endif %}
        {{ item }}: {{ mydict[item] }}<br />
            </div>
    {% endfor %}
</body>

如何使用Jinja2在dicts上获得斑马样式？我正在使用Bootstrap，因此依赖它的解决方案会很好（甚至很好）。

可能相关的Q＆amp; As：1 2

Answer 1

您可以使用loop.index0或loop.index并将其模数为2来替换行：

<style>.alt { background-color: blue }</style>
<ul>
    {% for i in [1,2,3,4,5] %}
        <li class="{% if loop.index0 % 2 %}alt{% endif %}">{{ i }}</li>
    {% endfor %}
</ul>

或者，您可以在纯CSS中执行此操作：

<style>li:nth-child(odd) { background: blue; }</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

如何使用Jinja2在dicts上获得斑马样式？

1 个答案: