ruby-on-rails – Rails使用Twitter Bootstrap设计I18n Flash消息

前端之家收集整理的这篇文章主要介绍了ruby-on-rails – Rails使用Twitter Bootstrap设计I18n Flash消息前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你好,我刚刚在轨道上使用ruby,我很难理解I18n的Flash消息.我正在使用devise,rails 4和twitter bootstrap.I了解设计只使用flash [:notice]和flash [:alert].

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

我已经看了一大堆与此相关的问题,而且Im在将来显示所有Flash消息(错误,成功和通知)以及漂亮的CSS时都会感到困惑.

也许答案已经在我的鼻子下面的这篇文章rails – Devise – Handling – devise_error_messages

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

这是我的例子:
在“app / views / layouts / application.html.erb”

<%= render 'layouts/messages' %>

‘应用程序/视图/布局/ _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中使用什么标签

您可以看到注册^^和登录(下面)页面之间的区别.

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

解决方法

我在 How To: Integrate I18n Flash Messages with Devise and Bootstrap的github的devise wiki里面做了一个wiki页面

网站的Flash消息

首先,我们将提供一个渲染视图,使代码简洁.在“app / views / layouts / application.html.erb”中,我添加了<%= render'layouts / messages'%&gt ;. 我的文件看起来像:

<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消息为Devise

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

文件内部,您必须创建一个名为devise_error_messages!的方法,它是告诉设计如何处理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! %GT;在设计页面.一个例子是在“app / views / devise / registrations / .new.html.erb”(注册页面)中输入 它应该已经在文件中,但您可以移动代码自定义显示的位置. CSS的Flash消息 如果您不想使用默认的奇怪的蓝色和黄色警报,我设置错误和警报具有相同的颜色和成功,并注意到具有相同的颜色.我使用红色的错误和警报,绿色成功和通知. 在我的“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;
 }

猜你在找的Ruby相关文章