Question

所以我使用的是application.html.erb文件，它基本上是我网站中每个页面的布局。但我希望主页有白色背景，其余页面有不同的背景。问题是，如果我将整个主页文件包装在div中，它只包装“yield”位置，因此它显示为带有灰色背景的较大框内的白色背景的框。那么如何更改主页的整个背景并保留其余部分呢？

谢谢！

Answer 1

扩展@muffinista提供的答案：您可以使用控制器中设置的实例变量来确定何时将“homepage”类放在body标记上。所以：

def index
  @home_page = true
  # existing code
end

并在布局中：

<body class="<%= @home_page ? 'homepage' : ''%>">
 <%= yield %>
</body>

Answer 2

考虑在主页的body标签（或者主要的包装器）上放一个特殊的类，然后在CSS中进行。所以你可以在你的主页上找到：

<body class="homepage">
  <p>hi!</p>
</body>

然后在其他页面上：

<body>
  <p>i am not a homepage!</p>
</body>

在你的CSS中：

body {
 // some general css
}

body.homepage {
 // some css for homepage elements
 background-color: #000000;
}

更新：你可以使用这样的助手让生活更轻松：

def body_class
  @body_class || ''
end

然后在您的主页视图中，将这样的内容放在顶部：

<% @body_class = "homepage" %>

显然这取决于你的应用程序的细节，但它对我来说很好。

Answer 3

只是要添加到已接受的答案中，如果您需要为多个页面设置不同的背景，那么将有意义并添加可读性以移动代码以找到适当的背景为部分：

<body class= <%=render partial: "layouts/background" %> >

_background.html.erb：

    <%- if @main_page_background OR @stylish_background %>
       "main_page_background"
      <%- elsif @dark_background %>   
        "dark_page_background"
      <%- else %>  
        ""  
    <% end %>

不同的页面的不同的背景颜色在路轨

3 个答案: