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

我在application.html.erb文件中有一个页脚div。页脚位置是相对的，但对于少数页面，我想将页脚位置设置为固定。如何在不在每个页面上添加页脚代码的情况下做到这一点？

您可以将类添加到<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;
}

一个快速而讨厌的方法可能是，

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

页/_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类提供一些样式。

结果：[索引、显示、新建、foo、编辑]。 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'>

您还可以使用 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") %>

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

在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;
  }
}

相关内容

最新更新

热门标签：