设计Flash方法Rails [重复]

2023-11-21

我正在使用 Rails 4、Twitter Bootstrap 3.0 和 Devise 3.0。我正在尝试为设备和网站的其余部分获取外观相同的闪存消息。到目前为止我有这个：

Within “应用程序/视图/布局/application.html.erb”:

<%= render 'layouts/messages' %>

“应用程序/视图/布局/_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 %>

我创建了一个“应用程序/helpers/devise_helper.rb”为了覆盖默认的设备错误消息：

module DeviseHelper
  def devise_error_messages!
  end
end

“应用程序/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

“应用程序/资产/样式表/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: enter image description here

I am trying to list the errors more like this: enter image description here

我不希望错误被“”包围。它不需要有项目符号，但我希望它垂直列出。我想我需要编辑我的 devise_flash 方法“应用程序/helpers/application_helper.rb” file.

我怎样才能做到这一点？

我在 github 上的 devise wiki 中创建了一个 wiki 页面如何：将 I18n Flash 消息与 Devise 和 Bootstrap 集成

网站的闪讯

首先我们将制作一个渲染视图以使代码简洁。之内“应用程序/视图/布局/application.html.erb”我添加了<%= render 'layouts/messages' %>.

我的文件如下所示：

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

接下来我们必须制作消息文件。新建一个文件在“应用程序/视图/布局/_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 %>

这将为我们提供整个站点的闪现消息。

设计的闪存消息

对于设备，您需要覆盖设备处理闪存消息的方式。创建一个名为 devise_helper 的文件“应用程序/helpers/devise_helper.rb”.

在该文件内，您必须创建一个名为 devise_error_messages! 的方法，它是告诉 devise 如何处理闪存消息的文件名。

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! %>在设计页面内。一个例子是在其中输入“应用程序/视图/设计/注册/.new.html.erb”（注册页面）

方法调用应该已经在文件内，但您可以移动代码以自定义其显示位置。

Flash 消息的 CSS

如果您不想使用默认的奇怪的蓝色和黄色警报，我已将错误和警报设置为具有相同的颜色，并将成功和通知设置为具有相同的颜色。我使用红色表示错误和警报，使用绿色表示成功和通知。

在我的“应用程序/资产/样式表/custom.css.scss” I have:

/*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;
 }

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)