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

问题描述

你好，我刚刚在轨道上使用红宝石，我很难理解I18n的flash消息。我正在使用devise，rails 4和twitter bootstrap.I知道设计只使用 flash [：notice] 和 flash [：alert] code>。

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

我已经看了一大堆与此相关的问题，而且Im在使用漂亮的CSS显示所有Flash消息（错误，成功，通知）的方式感到困惑。

也许答案已经在我的鼻子下面这篇文章？

解决方案

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

网站的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 | ％GT; 
< div class =alert alert-<％= key％>> 
< a href =＃data-dismiss =alertclass =close>×< / a> 
< ul> 
< li> 
<％= value％> 
< / li> 
< / ul> 
< / div> 
<％end％> 
  

这将给我们整个网站的Flash消息。

用于设计的Flash消息

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

在文件内部，您必须创建一个名为devise_error_messages的方法！ ，它是告诉设计如何处理Flash消息的文件的名称。

 模块DeviseHelper 
 def devise_error_messages！ 
 return''如果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 =closedata-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; 
颜色：＃b94a48; 
 text-align：left; 
} 
 
 .alert-alert {
 background-color：＃f2dede; 
 border-color：＃eed3d7; 
颜色：＃b94a48; 
 text-align：left; 
} 
 
 .alert-success {
 background-color：＃dff0d8; 
 border-color：＃d6e9c6; 
颜色：＃468847; 
 text-align：left; 
} 
 
 .alert-notice {
 background-color：＃dff0d8; 
 border-color：＃d6e9c6; 
颜色：＃468847; 
 text-align：left; 
} 
  

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屋！