如何在Jinja2模板中为循环输出的<a>标签添加逗号分隔符？

问题根源 #

直接循环输出每个组件的<a>标签时未添加分隔符，导致内容紧密连接；而直接输出split()返回的列表时，Jinja2会默认将列表转为带方括号的字符串，因此出现不符合预期的格式。

方案1：用Jinja2过滤器组合处理（推荐） #

利用map生成每个组件的<a>标签，再用join添加逗号分隔，最后用safe确保HTML标签不被转义。

模板代码（后端传逗号分隔字符串）： #

{% for part, details in data.items() %}
    {{ part }}: {{ details.status }} (
    {% set component_links = details.components.split(",") | map('format', '<a href="#">{}</a>') | list | join(', ') %}
    {{ component_links | safe }}
    )
{% endfor %}

如果后端传的是组件列表（而非字符串），去掉split(",")即可：

{% for part, details in data.items() %}
    {{ part }}: {{ details.status }} (
    {% set component_links = details.components | map('format', '<a href="#">{}</a>') | list | join(', ') %}
    {{ component_links | safe }}
    )
{% endfor %}

方案2：循环内判断最后一个元素 #

通过Jinja2内置的loop.last变量，判断当前元素是否为循环的最后一个，非最后元素则添加逗号：

{% for part, details in data.items() %}
    {{ part }}: {{ details.status }} (
    {% set components = details.components.split(",") %}
    {% for comp in components %}
        <a href="#">{{ comp }}</a>
        {% if not loop.last %}, {% endif %}
    {% endfor %}
    )
{% endfor %}

方案3：后端预处理字符串 #

在Python后端直接把组件转换成带<a>标签的逗号分隔字符串，再传给模板：

后端代码： #

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = {
        "Part1": {
            "status": "<Status>",
            "components": "component1,component2,component3"
        }
    }
    # 预处理生成带链接的字符串
    comp_list = data["Part1"]["components"].split(",")
    data["Part1"]["component_links"] = ', '.join([f'<a href="#">{comp}</a>' for comp in comp_list])
    return render_template('index.html', data=data)

模板代码： #

{% for part, details in data.items() %}
    {{ part }}: {{ details.status }} ({{ details.component_links | safe }})
{% endfor %}

内容的提问来源于stack exchange，提问作者macder