设计 Flash 方法 Rails [重复]答案

【问题标题】：Devise Flash Method Rails [duplicate]设计 Flash 方法 Rails [重复]
【发布时间】：2013-11-28 07:29:41
【问题描述】：

我正在使用 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”：

<% devise_flash %>
<% flash.each do |key, value| %>
  <div class="alert alert-<%= key %>">
    <a href="#" data-dismiss="alert" class="close">×</a>
    <%= value %>
  </div>
<% end %>

我创建了一个 "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 方法。

我该怎么做？

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap devise ruby-on-rails-4 twitter-bootstrap-3

【解决方案1】：

我在 github 上的设计 wiki 中为 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 消息的方式。在 "app/helpers/devise_helper.rb" 中创建一个名为 devise_helper 的文件。

在文件中，您必须创建一个名为 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

接下来在您的设计视图中，您必须定义您希望错误消息出现的位置。您需要在设计页面中输入<%= 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;
 }

【讨论】：

这看起来很适合错误消息，但是像“登录成功”这样的普通闪存消息呢？我可以像你一样为它定义一个自定义的css类 .alert-alert ，但我宁愿根据网站其余部分的约定来设计这些名称，例如'success' 所以它会使用 CSS 类 .alert-success。必须有另一个 Devise 方法来覆盖它——我会调查的。

【解决方案2】：

我猜是因为flash[:error].to_a resource.errors.full_messages 生成了一个数组，然后通过<%= value %> 在您的警报中简单地打印出来，它打印了整个数组，这不是您想要的。

您可能想尝试循环遍历内容，而不是直接打印数组：

<% value.each do |n| %>
  # Print content here to get desired effect
<% end %>

【讨论】：

您正在考虑将循环放在“app/helpers/application_helper.rb”文件中，在 devise_flash 方法中正确吗？
@ravensfan55222 实际上我的意思是将循环放在 app/views/layouts/_messages.html.erb 中以替换 <%= value %> :)
我明白你的意思。当我做，它显示一个错误。我也真的不确定要打印什么。我想我会把它显示在一个无序列表中我试图将它添加到#print内容区域：“flash.now[:error] = resource.errors.full_messages.map { |msg| content_tag(:li, msg ) }.join" 虽然它没有正确显示。
我认为如果我在 application_helper 中更改它会更容易显示正确的错误消息，因为该消息直接通过 flash.each do 循环显示。使用“flash.now[:error] = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join”，如果我能弄清楚如何在 _messages.html 中使用标签.erb 文件然后我可以显示它