Rails使用Twitter Bootstrap设计I18n Flash消息
你好我是ruby on rails的新手,我很难理解I18n的flash消息。 我正在使用devise,rails 4和twitter bootstrap。我明白设计只使用flash[:notice]
和flash[:alert]
。
我可以通过登录和注销来获取适用于我的用户模型的Flash消息。 但是,我无法获得注册的Flash错误或忘记密码才能正常显示。 它看起来像是默认的错误消息。
我看了很多与此相关的问题,我很困惑的方法是用漂亮的CSS显示所有flash消息(错误,成功,通知)。
也许答案已经在我的鼻子下的这篇文章中? rails – 设计 – 处理 – devise_error_messages
目前我的flash消息基于如何使用Twitter Bootstrap Rails gem定义Flash通知
这是我的例子:
在‘app / views / layouts / application.html.erb’中
‘应用程序/视图/布局/ _messages.html.erb’
<div class="alert alert-"> × "flash_#{name}" %>
我在github上的设计维基中创建了一个wiki页面,用于如何:使用设计和引导程序集成I18n Flash消息
网站的Flash消息
首先,我们将创建一个渲染视图,使代码简洁。 在“app / views / layouts / application.html.erb”中,我添加了<%= render 'layouts/messages' %>
。
我的文件看起来像:
<%= render 'layouts/header' %> <%= render 'layouts/messages' %> <%= yield %> <%= render 'layouts/footer' %>
接下来我们要制作消息文件。 在“app / views / layouts / _messages.html.erb”中创建一个新文件并添加:
<% flash.each do |key, value| %> <% end %>
这将为我们提供整个站点的Flash消息。
设计的Flash消息
对于设计,您需要覆盖设计处理Flash消息的方式。 在“app / helpers / devise_helper.rb”中创建一个名为devise_helper的文件。
在文件内部,您必须创建一个名为devise_error_messages!的方法,该方法是告诉设计如何处理Flash消息的文件的名称。
module DeviseHelper def devise_error_messages! return '' if resource.errors.empty? messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join html = <<-HTML #{messages}
HTML html.html_safe end end
接下来,在您的设计视图中,您必须定义出现错误消息的位置。 您需要输入<%= devise_error_messages! %>
<%= devise_error_messages! %>
在设计页面内。 一个例子是在“app / views / devise / registrations / .new.html.erb”中输入此内容(注册页面)
它应该已经在文件中,但您可以移动代码以自定义它的显示位置。
用于Flash消息的CSS
如果您不想使用默认的奇怪的蓝色和黄色警报,我已设置错误和警报以获得相同的colorand成功并注意具有相同的颜色。 我使用红色表示错误和警报,绿色表示成功并注意到。
在我的“app / assets / stylesheets / custom.css.scss”中,我有:
/*flash*/ .alert-error { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; text-align: left; } .alert-alert { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; text-align: left; } .alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; text-align: left; } .alert-notice { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; text-align: left; }
这是我的2美分。 使用case语句检查flash名称是否是较旧的语法alert
或notice
,并将它们更改为success
或danger
如果存在)并将其他所有内容保留。
<% flash.each do |name, msg| %> <% if msg.is_a?(String) %>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %> <% end %>
和辅助方法
def flash_class_name(name) case name when 'notice' then 'success' when 'alert' then 'danger' else name end end
如果您在应用程序中使用Sass,您可以使用Devise的alert-notice
和alert-alert
分别扩展BS类alert-info
和alert-danger
,方法如下:
.alert-notice { @extend .alert-info } .alert-alert { @extend .alert-danger }
通过将此添加到* .scss,Devise Flash消息将inheritanceBS info
和danger
警报的样式。
http://sass-lang.com/guide (扩展/inheritance部分)
我发现最简单的解决方案是在检查以下内容时对所有 flash消息使用公共部分:notice
和:alert
以替换必需的bootstrap类。
所以像这样制作/views/shared/_alerts.html.erb
–
<% flash.each do |message_type, message| %> <%= message %>
<% end %>
添加一个帮助方法(我已将它添加到应用程序助手中),如下所示 –
def flash_class_name(name) case name when "notice" then "success" when "alert" then "danger" else name end end
在应用程序布局中包含_alerts.html.erb
(或应用程序的父布局)。
而已!
使用Boostrap 3.1,对我来说是这样的:
html = <<-HTML
HTML
实际上bootstrap提供一些警报类,请尝试上课, alert alert-warning
黄色警告, alert alert-success
绿色警告, alert alert-danger
红色警告。
对于I18n,您可以直接使用它,就像在视图上一样。
此外,如果你想强制使用你的类而不是bootstrap类,你可以在你的class级使用!important
例如:
.alert { background: #f3f3f3 !important; color: black !important; }
如果我错了,请纠正我。