更新：这篇文章显示了我想要做的correct版本。我遇到的问题是样式看起来不一样。我相信这是因为html标签。

Question

你好我是ruby on rails的新手，我很难理解I18n的flash消息。我正在使用devise，rails 4和twitter bootstrap。我知道该设计只使用flash[:notice]和flash[:alert]。

我可以通过登录和注销来获取适用于我的用户模型的Flash消息。但是我无法获得注册的flash错误或忘记密码才能正常显示。它看起来像是默认的错误消息。

我已经看过一堆与此相关的问题了，我对使用漂亮的CSS显示所有flash消息（错误，成功，通知）的方式感到困惑。

也许这篇文章的答案已经在我的鼻子底下？ rails - Devise - Handling - devise_error_messages

目前，我的Flash消息基于How to define Flash Notifications with Twitter Bootstrap Rails gem

这是我的例子：
在'app / views / layouts / application.html.erb'

中

<%= render 'layouts/messages' %>

'应用/视图/布局/ _messages.html.erb'

<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "error" %>">
      <a class="close" data-dismiss="alert">&#215;</a>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

如何使用自定义css显示所有Flash消息（错误，成功，通知）？

更新：这篇文章显示了我想要做的correct版本。我遇到的问题是样式看起来不一样。我相信这是因为html标签。

html = <<-HTML
 <div class="alert alert-error alert-block"> <button type="button"
  class="close" data-dismiss="alert">x</button>
  <h4>#{sentence}</h4>
  #{messages}
 </div>
HTML

知道如何为警报设置相同的样式吗？或者在css中使用什么标签？

signup error

您可以看到注册^^和登录（下方）页面之间的区别。

signin error

Update2

我做了a new post on what my problem is- which can be found here.

Answer 1

我在github的设计维基中为How To: Integrate I18n Flash Messages with Devise and Bootstrap

创建了一个wiki页面

网站的Flash消息

首先，我们将创建一个渲染视图，使代码简洁。在“app / views / layouts / application.html.erb”中，我添加了<%= render 'layouts/messages' %>。

我的文件如下：

<body>
  <%= render 'layouts/header' %>
  <div class="container">
    <%= render 'layouts/messages' %>
    <%= yield %>
    <%= render 'layouts/footer' %>
  </div>
</body>

接下来我们要制作消息文件。在“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 %>

这将为我们提供整个网站的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
    <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

接下来，在您的设计视图中，您必须定义出现错误消息的位置。您需要在设计页面中输入<%= devise_error_messages! %>。例如，在“app / views / devise / registrations / .new.html.erb”中输入此内容（注册页面）

它应该已经在文件中，但您可以移动代码来自定义它的显示位置。

用于Flash消息的CSS

如果您不想使用默认的奇怪的蓝色和黄色警报，我已设置错误和警报以获得相同的颜色成功并注意具有相同的颜色。我使用红色表示错误和警报，绿色表示成功并注意到。

在我的“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;
 }

Answer 2

这是我的2美分。使用case语句检查flash名称是否为旧语法alert或notice，如果它们是success或danger，则将其更改为其他所有内容。

<div class="container">
  <% flash.each do |name, msg| %>
    <% if msg.is_a?(String) %>
      <div class="alert alert-<%= flash_class_name(name) %>" role="alert">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
        </button>
        <%= content_tag :div, msg, :id => "flash_#{name}" %>
      </div>
    <% end %>
  <% end %>
</div>

和辅助方法

def flash_class_name(name)
    case name
    when 'notice' then 'success'
    when 'alert'  then 'danger'
    else name
    end
end

Answer 3

如果您在自己的应用中使用Sass，则可以分别使用Devise的alert-info和alert-danger扩展BS类alert-notice和alert-alert，方法如下：

.alert-notice {
  @extend .alert-info
}

.alert-alert {
  @extend .alert-danger
}

通过将此添加到您的* .scss，Devise Flash消息将继承BS info和danger警报的样式。

http://sass-lang.com/guide（扩展/继承部分）

Answer 4

我发现最简单的解决方案是在检查:notice和:alert时使用所有 Flash消息的公共部分来替换必要的bootstrap类。

所以让/views/shared/_alerts.html.erb像这样 -

<% flash.each do |message_type, message| %>
<div class="alert alert-<%= flash_class_name(message_type) %> alert-dismissable">
    <span><%= message %></span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>

添加一个帮助方法（我已将它添加到应用程序助手中），如下所示 -

def flash_class_name(name)
    case name
    when "notice" then "success"
    when "alert"  then "danger"
    else name
    end
end

在应用程序布局（或应用程序的父布局）中包含_alerts.html.erb。

就是这样！

Answer 5

使用Bootstrap 3.1，对我来说就是这样：

 html = <<-HTML
    <div class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <strong>#{sentence}</strong>
      <ul>
        #{messages}
      </ul>
    </div>

HTML

Answer 6

实际上bootstrap会提供一些警报类，请尝试使用alert alert-warning上课进行黄色警告，alert alert-success进行绿色警告，alert alert-danger进行红色警告。

对于I18n，您可以直接使用它，就像在视图上一样。

此外，如果您想强制使用您的类而不是引导类，您可以在课堂上使用!important，例如：

.alert
{
  background: #f3f3f3 !important;
  color: black !important;
}

如果我错了，请纠正我。

Rails使用Twitter Bootstrap设计I18n Flash消息

更新：这篇文章显示了我想要做的correct版本。我遇到的问题是样式看起来不一样。我相信这是因为html标签。

Update2

6 个答案:

网站的Flash消息

设计Flash消息

用于Flash消息的CSS