有没有办法在本地闪烁的 Flask 中使用 Bootstrap toast？

Question

我想在 Flask 中使用 flash() 方法显示 toast 消息。我知道 Bootstrap alerts 有效，所以我使用相同的逻辑并将 alerts 的代码替换为 toasts。但它似乎对我不起作用。

app.py

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'GET':
        flash('This is a demo message.')
        return render_template('home.html')

flash.html

{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Message</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            {{ message }}
        </div>
    </div>
</div>
{% endfor %}
{% endif %}
{% endwith %}

base.html

<html>
<head>
    ...
</head>

<body>

    {% include 'flash.html' %}
    ....
</body>
</html>

home.html

{% extends 'base.html' %}
{% block main %}
    ...
{% endblock %}

我想知道如何在 Flask 中实现这一点。如果没有，那么我将需要探索 Flask-Toastr（您可以提出替代方案以防万一）

Answer 1

使用 flask 中的 flash 功能绝对可以实现，我不建议使用 Flask-Toastr。

flask 中的 flash 功能可以包装任何 HTML。

您的代码的问题出在您的 bootstrap/html 中，您可以通过删除所有 flash 内容并只拥有：

来测试它

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Message</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            {{ message }}
        </div>
    </div>
</div>

您会看到那里也没有显示闪光灯。我怀疑问题是您没有根据需要使用 javascript 初始化吐司。 Bootstrap Toasts 的文档在这里：https://getbootstrap.com/docs/5.0/components/toasts/

我建议让它在普通 HTML 中工作，然后将其包装在闪存中。

有没有办法在本地闪烁的 Flask 中使用 Bootstrap toast？

Is there a way to use Bootstrap toast in Flask flashing natively?

toast

flask