Rails 使用 Twitter Bootstrap 设计 I18n Flash 消息

Posted 2023-05-09

技术标签:

【中文标题】Rails 使用 Twitter Bootstrap 设计 I18n Flash 消息【英文标题】：Rails Devise I18n Flash Messages with Twitter Bootstrap 【发布时间】：2013-12-12 14:59:38 【问题描述】：

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

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

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

也许答案就在我眼皮底下的这篇文章中？ rails - Devise - Handling - devise_error_messages

目前我的快讯是基于How to define Flash Notifications with Twitter Bootstrap Rails gem

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

内

<%= render 'layouts/messages' %>

'app/views/layouts/_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 中使用什么标签？

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

Update2

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

【问题讨论】：

你试过这个问题吗？ ***.com/questions/8705590/…。您的问题是关于使用 css 还是 I18n？我实际上只是看到了，然后尝试了一下。但是我无法让它工作。我仍然有相同的结果。我在这方面跟随领先，它非常接近工作。 ***.com/questions/20171539/…我对所有东西都有颜色，但我不确定如何更改每个警报的颜色我的问题是关于 I18n 和 css。我不确定如何让它正确显示。我希望所有错误字段都是红色的，任何成功 + 好事都是绿色的。 【参考方案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;

【讨论】：

虽然理论上可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。【参考方案2】：

这是我的 2 美分。使用 case 语句检查闪存名称是否为旧语法 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

【讨论】：

这是最简单的解决方案。 +1【参考方案3】：

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

.alert-notice 
  @extend .alert-info


.alert-alert 
  @extend .alert-danger

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

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

【讨论】：

【参考方案4】：

我发现的最简单的解决方案是在检查:notice 和:alert 以替换为必要的引导类时，对all 闪存消息使用通用部分。

所以让/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。

就是这样！

【讨论】：

【参考方案5】：

使用 Boostrap 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

【讨论】：

【参考方案6】：

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

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

另外，如果你想强制使用你的类而不是引导类，你可以在你的类中使用!important，例如：

.alert

  background: #f3f3f3 !important;
  color: black !important;

如果我错了，请纠正我。

【讨论】：

谢谢我明白你在引导类上强制它的意思。我想保留 I18n 提供的警报 alert-danger 和警报警报成功。但是，如果您查看我的图片，您会发现警报 alert-danger 为我提供了两个不同样式的警报框。我希望两个盒子看起来都一样。（一条红线穿过页面，另一条没有穿过）嗯。我认为这两个盒子有相同的风格，不同的是因为发件人的权利，上层来自 Rails 验证，而下层来自设计消息。对不起，我不能给你更多的解决方案。但是对于 Devise 的 I18n，您可以在 config/locales/devise.en.yml 上自行更改。对不起，如果还是不明白这个案子。谢谢，您的回答帮助我了解了 css 如何与 I18n 一起工作，但这是我发表的另一篇文章，它更清楚地说明了我的问题。我的问题在于我相信的设计。

以上是关于Rails 使用 Twitter Bootstrap 设计 I18n Flash 消息的主要内容，如果未能解决你的问题，请参考以下文章

在 Rails 布局中使用 Sass 的 Twitter Bootstrap

如何使用 Rails 让我的 Twitter Bot 保持清醒？

让我们使用 Ruby on Rails 来构建一个Twitter

Rails 使用 Twitter Bootstrap 设计 I18n Flash 消息

如何使用 twitter bootstrap by rails framework 显示漂亮的错误消息？

OAuth::Unauthorized 401 Unauthorized for omniauth-twitter in rails