Rails 中不同页面的不同背景颜色

发布于 2024-12-27 15:43:42 字数 187 浏览 4 评论 0原文

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橘虞初梦 2025-01-03 15:43:42

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

def index
  @home_page = true
  # existing code
end

在布局中：

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

Expanding on the answer provided by @muffinista:
You can use an instance variable set in the controller to determine when to put the 'homepage' class on the body tag. So:

def index
  @home_page = true
  # existing code
end

and in the layout:

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

回复收藏 0 原文

橘虞初梦 2025-01-03 15:43:42

考虑在主页的 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" %>

显然这取决于您的应用程序的具体情况，但它对我来说效果很好。

Consider putting a special class on the body tag (or perhaps your main wrapper) of your homepage, then do it in CSS. So you can have on your homepage:

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

Then on your other pages:

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

And in your CSS:

body {
 // some general css
}

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

UPDATE: you can use a helper like this to make life easier:

def body_class
  @body_class || ''
end

Then in your homepage views, put something like this at the top:

<% @body_class = "homepage" %>

Obviously this depends on the specifics of your app, but it works fine for me.

回复收藏 0 原文

无语# 2025-01-03 15:43:42

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

>

_background.html.erb：

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

Just to add to the accepted answer, if you need to set different backgrounds for multiple pages, it would make sense and add readability to move the code for finding an appropriate background into a partial:

<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 %>

回复收藏 0 原文

~没有更多了~