Flask问题集:flash消息分类与美化

bootstrap alert style

Bootstrap提供的alert样式,依次为:‘success’、‘info’、‘warning’、‘danger’。

 

Flask提供了一个很方便的flash函数,在视图函数里只需要一行就可以在网页上闪现一个消息(alert),像这样:

我们今天来为它添加样式。

 

基本用法

在视图函数里使用flash:

然后在基模板里使用get_flashed_messages()来获取消息,并渲染出来。
比如《Flask Web开发》里使用alert-warning渲染所有的消息:

下面我们使用Bootsrtap的消息样式来渲染不同的消息。

 

使用Bootstrap的消息(alert)样式

如果想要开启消息的分类,需要在调用get_flashed_messages()时传入参数with_categories=True。这时,在基模板里使用这个函数获取消息时,得到的是一个由(category, message)形式的元组组成的一个列表。

之后,就可以在使用flash函数时加入消息类别:

你可以使用‘success’、‘info’、‘warning’、‘danger’这四个值中的任一个。具体样式文章开头的图片。

这时基模板里渲染消息的部分要改成这样:

这样一来,每个消息就会按照我们提供的分类样式来渲染了。

 

DIY

当然,你也可以自己定义每一类消息的样式。我推荐你在Bootstrap的四个类别的基础上增加样式,这样只需要在你的css文件里添加一个新的alert样式,比如下面我添加了一个code样式:

然后使用:

效果:

我设计的alert样式

我设计的alert样式:p

如果你不用Bootstrap,只需要加将上面的为div指定类的那行改成:

然后在你的css文件里定义类别对应的样式就可以了。

 

多看源码

源码里面有很多有趣和有价值的东西,要养成看源码的习惯。很多问题靠看源码里的注释基本上就能解决。所以,问题的正确解决方式应该是:看源码——Google——提问。

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*