设计Flash方法导轨
我正在使用Rails 4,Twitter Bootstrap 3.0和Devise 3.0。 我正在尝试为设计和我的网站的其余部分获得完全相同的flash消息。 到目前为止我有这个:
在“app / views / layouts / application.html.erb”中 :
“app / views / layouts / _messages.html.erb” :
<div class="alert alert-"> ×
我正在使用Rails 4,Twitter Bootstrap 3.0和Devise 3.0。 我正在尝试为设计和我的网站的其余部分获得完全相同的flash消息。 到目前为止我有这个:
在“app / views / layouts / application.html.erb”中 :
“app / views / layouts / _messages.html.erb” :
<div class="alert alert-"> ×
我创建了一个“app / helpers / devise_helper.rb”来覆盖默认的设计错误消息:
module DeviseHelper def devise_error_messages! end end
“app / helpers / application_helper.rb” :
def devise_flash if controller.devise_controller? && resource.errors.any? flash.now[:error] = flash[:error].to_a.concat resource.errors.full_messages flash.now[:error].uniq! end end
“app / assets / stylesheets / custom.css.scss” :
.alert-error { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; text-align: center; } .alert-alert { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; text-align: center; } .alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; text-align: center; } .alert-notice { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; text-align: center; }
它显示正常的闪存消息,但问题是我有一个设计错误。 它看起来像这样:
我试图列出更多这样的错误:
我不希望错误被“”包围。 它不需要有子弹,但我想让它垂直列出。 我想我需要在“app / helpers / application_helper.rb”文件中编辑我的devise_flash方法。
我怎样才能做到这一点?
我在github上的设计维基中创建了一个wiki页面,用于如何:使用设计和引导程序集成I18n 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| %> × - <%= value %>
<% end %>
这将为我们提供整个站点的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”中输入此内容(注册页面)
方法调用应该已经在文件中,但您可以移动代码以自定义它的显示位置。
如果您不想使用默认的奇怪的蓝色和黄色警报,我已设置错误和警报以获得相同的颜色和成功,并注意具有相同的颜色。 我使用红色表示错误和警报,绿色表示成功并注意到。
在我的“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; }
我猜是因为flash[:error].to_a resource.errors.full_messages
生成一个数组,然后通过<%= value %>
在警报中打印出来,它会打印出你想要的整个数组。
您可能希望尝试循环遍历内容,而不是直接打印数组:
<% value.each do |n| %> # Print content here to get desired effect <% end %>