Flask结合Jinja2模板如何调整flash消息的显示时长与样式

Flask、Jinja2的flash相关逻辑完全不负责控制消息自动消失时长。你看到的数秒后消失效果，全部来自前端页面的JS代码（或所用UI组件库的自带关闭逻辑）。CSS仅能控制样式，无法修改消失时长，你疑惑的时长配置和样式表无关。

首先找到前端模板中渲染flash消息的代码块（通常为使用get_flashed_messages的Jinja2代码），再找到配套的自动关闭JS逻辑，针对success类单独设置延迟即可，常见场景的修改方案如下：

• 原生Alert元素搭配自定义自动关闭JS：
  若现有逻辑给所有alert设置了统一消失时长，修改为分类判断逻辑即可，示例：

  // success类flash 10秒后消失，其余类别保持3秒
  setTimeout(() => {
    document.querySelectorAll('.alert-success').forEach(el => el.remove())
  }, 10000)
  setTimeout(() => {
    document.querySelectorAll('.alert:not(.alert-success)').forEach(el => el.remove())
  }, 3000)
  

• 用UI组件库（以Bootstrap 5为例）的Toast/Alert组件实现自动关闭：
  可在组件初始化时单独给success类设置延迟参数，示例：

  // 单独给success类Toast设置10秒延迟，其余类别用组件默认值
  document.querySelectorAll('.toast-success').forEach(el => new bootstrap.Toast(el, {delay: 10000}).show())
  document.querySelectorAll('.toast:not(.toast-success)').forEach(el => new bootstrap.Toast(el).show())
  

  若你是在HTML元素上通过data-bs-delay属性配置自动延迟，直接修改success类对应元素的该属性值即可。

颜色修改可直接通过CSS完成，逻辑和你在flash()中传入的category参数绑定：模板渲染时一般会把category作为类名的一部分，比如传入flash("操作成功", "success")会生成类名包含alert-success的元素，直接在样式表中给对应类写规则即可，示例：

/* 把默认success类的绿色改为自定义蓝色 */
.alert-success {
  background-color: #cce5ff;
  border-color: #b8daff;
  color: #004085;
}
/* 自定义error类的颜色 */
.alert-error {
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #842029;
}

如果需要更灵活的自定义，也可以在渲染模板时，给特定category的元素追加自定义类名，后续针对自定义类写CSS即可，不会和UI库的默认样式冲突。

内容的提问来源于stack exchange，提问作者C. Crt