Rails 3.1 设计如何更改 Flash 消息 CSS 从通知到成功？答案

【问题标题】：Rails 3.1 Devise How To Change Flash Message CSS From notice to success?Rails 3.1 设计如何更改 Flash 消息 CSS 从通知到成功？
【发布时间】：2012-01-13 07:13:16
【问题描述】：

Rails 3.1 和 Devise 1.5 问题。

我正在使用以下代码在我的布局中显示 Flash 消息：

    <% flash.each do |key, message| %>
      <%= content_tag(:div, message, :class => "flash #{key}") %>
    <% end %>

我想将我的一些确认消息的 css 类从通知更改为成功，但我不知道在哪里覆盖或更改密钥，因为我不知道它在哪里设置。

谁能指出我正确的方向？

谢谢！

【问题讨论】：

您可以通过启用 i18n 并修改默认语言环境来编辑设计 flash 消息的文本。但是我认为如果将它们添加为通知或成功，您将无法轻易更改...github.com/plataformatec/devise/blob/master/config/locales/…。一种非常肮脏的方法是在消息中添加 html，并修改您的 css 以考虑到这一点......

标签： ruby-on-rails-3.1 devise

【解决方案1】：

css 类由:class 参数设置。要添加notice（或success等）的类，只需将您的调用更改为以下内容：

<%= content_tag(:div, message, :class => "flash #{key} notice") %>

【讨论】：

这会为每条快闪信息添加一个通知类，这不是他想要的。

【解决方案2】：

所以这样做的方法是编辑设计控制器。

当您通过正常安装安装 Devise 时，我认为它不会安装控制器（至少它不适合我）。

所以首先你应该手动添加控制器文件并将它们放入你的项目中的相同位置：https://github.com/plataformatec/devise/tree/master/app/controllers/devise

在项目中获得文件后，转到“sessions_controller.rb”文件。

第 16 和 25 行，你应该看到代码：

set_flash_message :notice, :signed_in

和

set_flash_message :notice, :signed_out

你只需要把“:notice”改成“:success”

希望有效！

【讨论】：

我的项目在我更改的行上抛出错误。除了将文件放在控制器文件夹下名为 devise 的文件夹中之外，您还需要做什么？

【解决方案3】：

我遇到了这个问题，因为我使用的是 bootstrap-sass gem，它为 flash 消息使用了一个完全不同的类结构。我采取了用 sass 解决这个问题的方法，而不是完全搞乱设计（sass 继承很棒：）。

所以，我在app/view/layouts/application.html.haml 中渲染flash 消息：

%div.container
  - flash.each do |key, value|
    = content_tag(:div, value, class: "alert alert-dismisable alert-#{key}")

而且，我向app/assets/stylesheets/custom.css.scss 添加了一个简单的规则，以使 Devise 的 flash 消息正常工作：

/* Style Devise Flash messages like Bootstrap */
.alert-alert {
  @extend .alert-warning;
}

就是这样！现在flash[:alert] 的样式就像引导程序的flash[:warning]。

【讨论】：