Question

我在application.html.erb文件中有一个页脚div。页脚位置是相对的，但是对于少数页面，我想将页脚位置设置为固定。如果不在每页上添加页脚代码，我怎么能这样做呢？

Answer 1

您可以向<body>或<html>元素添加类：

module ApplicationHelper
  # takes an array or list of strings and makes a string suited
  # for a html class attribute.
  # @param [String*|Array] args
  # @return [String]
  def css_class(*args)
    [*args].flatten.compact.join(" ") 
  end
end

<body class="<%=  css_class(controller_name, action_name) %>">

这样您就可以将样式附加到某个控制器或操作：

.users #footer {
  height: 100px;
}

.users.show #footer {
  height: 150px;
}

Answer 2

快速而讨厌的方式可能是，

创建部分（可能已经完成）

信息页/ _footer.html.erb

<div class='footer <%= @position||"relative" %>'> Lorem ipsum </div>

向控制器添加私有方法。

class PagesController < ApplicationController before_action :set_page, only: [:show, :edit, :update, :foo, :destroy] before_action :fixed_footer, only: [:show, :edit, :mission, :vision] def index @pages = Page.all end def show end def foo render 'show' end def about render 'some_static_page' end def mission render 'some_static_page' end def vision render 'some_static_page' end ..... private def fixed_footer @position = "fixed" end # Use callbacks to share common setup or constraints between actions. def set_page @page = Page.find(params[:id]) end # Never trust parameters from the scary internet, only allow the white list through. def page_params params.require(:page).permit(:title, :email, :comments) end end

然后在布局文件中引用它（因为我已经快速创建并搭建了支架，我只有应用程序布局）。

<!DOCTYPE html> <html> <head> <title>Simpleapp</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> <%= render 'pages/footer' %> </body> </html>

这就是全部。实际上并非所有，您要做的是，在样式表文件中为fixed和relative类提供一些样式。

结果：[index，show，new，foo，edit]。 2和5有固定的类。

$ curl http://lvh.me:3000/pages | grep "div class='footer" % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 2815 0 2815 0 0 18599 0 --:--:-- --:--:-- --:--:-- 18642 <div class='footer relative'> $ curl http://lvh.me:3000/pages/1 | grep "div class='footer" % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 2388 0 2388 0 0 16032 0 --:--:-- --:--:-- --:--:-- 16135 <div class='footer fixed'> $ curl http://lvh.me:3000/pages/new | grep "div class='footer" % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 2833 0 2833 0 0 12242 0 --:--:-- --:--:-- --:--:-- 12264 <div class='footer relative'> $ curl http://lvh.me:3000/pages/1/foo | grep "div class='footer" % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 2391 0 2391 0 0 16165 0 --:--:-- --:--:-- --:--:-- 16265 <div class='footer relative'> $ curl http://lvh.me:3000/pages/1/edit | grep "div class='footer" % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 2959 0 2959 0 0 19393 0 --:--:-- --:--:-- --:--:-- 19467 <div class='footer fixed'>

Answer 3

您也可以使用ActionView::Helpers::CaptureHelper。

module ApplicationHelper
  def footer_tag(**kwargs)
    klass = "some-default-class " + (content_for(:footer_class) || ""
    content_tag(:footer, kwargs.merge(class: klass)) do
      yeild if block_given?
    end
  end
end

# app/views/shared/_footer.html.erb
<% footer_tag do %>
  <p>Copyright 2017, EvilCorp</p>
<% end %>

然后，您会在视图中使用provide或content_for：

<% content_for(:footer_class, "fixed") %>
<% provide(:footer_class, "fixed") %>

不同之处在于第一个连接缓冲区，而后者直接冲洗到布局并将产量标记为已完成。

Answer 4

在application.html.erb中，您可以访问<body>开场代码，并将其更改为<body class="<%= params[:controller] %>-<%= params[:action] %>">

然后，如果你有一个餐馆应用程序，你将有一个餐馆控制器，可能有index和show。

现在，在这些页面上，正文将有一个名为.restaurants-index和.restaurants-show

的类

如果你正在使用SCSS，那么你可以说

.restaurants-index {
  .navbar {
    position: fixed;
  }
}

.restaurants-show {
  .navbar {
    position: relative;
  }
}

Ruby on Rails在每个页面中使用不同的页脚样式

4 个答案: