twitter-bootstrap 设计 Flash 方法 Rails
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20260151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Devise Flash Method Rails
提问by Daniel
I am using Rails 4, Twitter Bootstrap 3.0, and Devise 3.0. I am trying to get identical looking flash messages for devise and the rest of my site. So far I have this:
Within "app/views/layouts/application.html.erb":
我正在使用 Rails 4、Twitter Bootstrap 3.0 和 Devise 3.0。我正在尝试为设计和我网站的其余部分获取外观相同的 Flash 消息。到目前为止，我有这个：
在"app/views/layouts/application.html.erb" 中：
<%= render 'layouts/messages' %>
"app/views/layouts/_messages.html.erb":
“应用程序/视图/布局/_messages.html.erb”：
<% devise_flash %>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>">
<a href="#" data-dismiss="alert" class="close">×</a>
<%= value %>
</div>
<% end %>
I have created a "app/helpers/devise_helper.rb"in order to override the default devise error messages:
我创建了一个“app/helpers/devise_helper.rb”以覆盖默认的设计错误消息：
module DeviseHelper
def devise_error_messages!
end
end
"app/helpers/application_helper.rb":
“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":
“应用程序/资产/样式表/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; }
It displays normal flash messages fine but the issue is when I have a devise error. It looks like this:
它可以正常显示正常的 Flash 消息，但问题是当我出现设计错误时。它看起来像这样：
I am trying to list the errors more like this:
我试图列出更像这样的错误：
I don't want the errors to be surrounded by "". It does not need to have the bullets, but I want it to be listed vertically. I think I need to edit my devise_flash method in the "app/helpers/application_helper.rb"file.
我不希望错误被“”包围。它不需要有项目符号，但我希望它垂直列出。我想我需要在“app/helpers/application_helper.rb”文件中编辑我的 devise_flash 方法。
How can I do this?
我怎样才能做到这一点？
回答by Daniel
I made a wiki page within the devise wiki on github for How To: Integrate I18n Flash Messages with Devise and Bootstrap
我在 github 上的 devise wiki 中创建了一个 wiki 页面，用于How To: Integrate I18n Flash Messages with Devise and Bootstrap
Flash Messages For the Site
网站的快讯
First we will make a rendered view to make the code concise. Within "app/views/layouts/application.html.erb"I added <%= render 'layouts/messages' %>.
首先我们将制作一个渲染视图以使代码简洁。在“app/views/layouts/application.html.erb”中，我添加了<%= render 'layouts/messages' %>.
My file looks like:
我的文件看起来像：
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= render 'layouts/messages' %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
Next we have to make the messages file. Make a new file in "app/views/layouts/_messages.html.erb"and add:
接下来我们必须制作消息文件。在“app/views/layouts/_messages.html.erb”中创建一个新文件并添加：
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>">
<a href="#" data-dismiss="alert" class="close">×</a>
<ul>
<li>
<%= value %>
</li>
</ul>
</div>
<% end %>
This will give us flash messages for the entire site.
这将为我们提供整个站点的 Flash 消息。
Flash Messages For Devise
设计的闪存消息
For devise you need to override the way devise handles flash messages. Create a file called devise_helper in "app/helpers/devise_helper.rb".
对于设计，您需要覆盖设计处理 Flash 消息的方式。在"app/helpers/devise_helper.rb" 中创建一个名为 devise_helper 的文件。
Inside the file you have to create a method called devise_error_messages!, which is the name of the file that tells devise how to handle flash messages.
在该文件中，您必须创建一个名为 devise_error_messages! 的方法，它是告诉 devise 如何处理 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
<div class="alert alert-error alert-block"> <button type="button"
class="close" data-dismiss="alert">x</button>
#{messages}
</div>
HTML
html.html_safe
end
end
Next in your devise views you will have to define where you want the error messages to appear. You will need to enter <%= devise_error_messages! %>within the devise pages. An example is entering this within "app/views/devise/registrations/.new.html.erb"(The sign up page)
接下来在您的设计视图中，您必须定义您希望错误消息出现的位置。您需要<%= devise_error_messages! %>在设计页面内输入。一个例子是在“app/views/devise/registrations/.new.html.erb”（注册页面）中输入这个
The method call should already be within the file, but you can move the code around to customize where it is shown.
方法调用应该已经在文件中，但您可以移动代码来自定义它的显示位置。
CSS For Flash Messages
用于 Flash 消息的 CSS
If you do not want to use the odd blue and yellow alerts that come default, I have set error and alert to have the same color and success and notice to have the same color. I am using red for errors and alerts, and green for success and notice.
如果您不想使用默认的奇怪的蓝色和黄色警报，我已将错误和警报设置为具有相同的颜色和成功，并注意具有相同的颜色。我用红色表示错误和警报，用绿色表示成功和通知。
Within my "app/assets/stylesheets/custom.css.scss"I have:
在我的“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;
}
回答by nightscent
I'm guessing since flash[:error].to_a resource.errors.full_messagesproduces an array which is then simply printed out in your alert through <%= value %>, it prints the entire array which is not what you want.
我猜因为flash[:error].to_a resource.errors.full_messages生成了一个数组，然后简单地在您的警报中打印出通过<%= value %>，它会打印整个数组，这不是您想要的。
Instead of printing the array directly, you may want to try looping through the contents like so:
不是直接打印数组，您可能想尝试像这样循环遍历内容：
<% value.each do |n| %>
# Print content here to get desired effect
<% end %>
