Rails 使用 Twitter Bootstrap 设计 I18n Flash 消息 [英] Rails Devise I18n Flash Messages with Twitter Bootstrap

问题描述

您好，我是 ruby​​ on rails 的新手，我正在努力理解 I18n 的 flash 消息.我正在使用 devise、rails 4 和 twitter bootstrap.我知道 devise 只使用 flash[:notice] 和 flash[:alert].

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

我查看了很多与此相关的问题，并且在使用漂亮的 css 显示所有 Flash 消息(错误、成功、通知)的过程中感到困惑.

也许答案就在我眼皮底下的这篇文章中?

解决方案

我在 github 上的 devise wiki 中创建了一个 wiki 页面，用于 如何:将 I18n Flash 消息与设计和引导程序集成

网站快讯

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

我的文件看起来像:

<%= 渲染布局/标题"%><div class="容器"><%= 渲染布局/消息"%><%=产率%><%= 渲染布局/页脚"%>

接下来我们必须制作消息文件.在 "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><%=值%>

<%结束%>

这将为我们提供整个网站的即时消息.

设计的快讯

对于设计，您需要覆盖设计处理闪存消息的方式.在 "app/helpers/devise_helper.rb" 中创建一个名为 devise_helper 的文件.

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

module DeviseHelperdef devise_error_messages！如果resource.errors.empty 返回''?消息 = resource.errors.full_messages.map { |msg|content_tag(:li, msg) }.joinhtml = <<-HTML<div class="alert alert-error alert-block"><按钮类型=按钮"class="close" data-dismiss="alert">x</button>#{消息}

HTMLhtml.html_safe结尾结尾

接下来在您的设计视图中，您必须定义错误消息出现的位置.您将需要输入 <%= devise_error_messages！%> 在设计页面中.例如，在 "app/views/devise/registrations/.new.html.erb"(注册页面)

中输入此内容

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

Flash 消息的 CSS

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

在我的app/assets/stylesheets/custom.css.scss"中，我有:

/*flash*/.警报错误{背景颜色:#f2dede；边框颜色:#eed3d7；颜色:#b94a48；文本对齐:左；}.警报警报{背景颜色:#f2dede；边框颜色:#eed3d7；颜色:#b94a48；文本对齐:左；}.警报成功{背景颜色:#dff0d8；边框颜色:#d6e9c6；颜色:#468847；文本对齐:左；}.警报通知{背景颜色:#dff0d8；边框颜色:#d6e9c6；颜色:#468847；文本对齐:左；}

Hello I am new to ruby on rails and I am struggling to understand I18n's flash messages. I am using devise, rails 4, and twitter bootstrap.I understand that devise only uses flash[:notice] and flash[:alert].

I am able to get flash messages working for my user model with signing in and logging out. However I cannot get the flash error for signup or forgot password to display properly. It looks like the default error message.

I've looked at bunch of questions related to this and Im confused on the way to go about displaying all flash messages (errors, successes, notifications) with pretty css.

Perhaps the answer is already in this article right under my nose? rails - Devise - Handling - devise_error_messages

Currently my flash messages are based on How to define Flash Notifications with Twitter Bootstrap Rails gem

Here is my example:
within '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 %>

How do I display all flash messages (errors, successes, notifications) using my custom css?

Update: This post displays a correct version of what I am trying to do. The problem I have is that the styling does not look the same. I believe it is because of the html tag.

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

Any idea how I can have the same styling for the alerts? or what tags to use in the css?

You can see the difference between the sign up^^ and sign in (below) pages.

Update2

I've made a new post on what my problem is- which can be found here.

解决方案

I made a wiki page within the devise wiki on github for How To: Integrate I18n Flash Messages with Devise and Bootstrap

Flash Messages For the Site

First we will make a rendered view to make the code concise. Within "app/views/layouts/application.html.erb" I added <%= render 'layouts/messages' %>.

My file looks like:

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

Next we have to make the messages file. Make a new file in "app/views/layouts/_messages.html.erb" and add:

<% 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 %>

This will give us flash messages for the entire site.

Flash Messages For Devise

For devise you need to override the way devise handles flash messages. Create a file called devise_helper in "app/helpers/devise_helper.rb".

Inside the file you have to create a method called devise_error_messages!, which is the name of the file that tells devise how to handle flash messages.

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

Next in your devise views you will have to define where you want the error messages to appear. You will need to enter <%= devise_error_messages! %> within the devise pages. An example is entering this within "app/views/devise/registrations/.new.html.erb" (The sign up page)

It should already be within the file, but you can move the code around to customize where it is shown.

CSS For Flash Messages

If you do not want to use the odd blue and yellow alerts that come default, I have set error and alert to have the same colorand success and notice to have the same color. I am using red for errors and alerts, and green for success and notice.

Within my "app/assets/stylesheets/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;
 }

这篇关于Rails 使用 Twitter Bootstrap 设计 I18n Flash 消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！