将特定的样式表添加到单个Rails页面 [英] Adding a specific stylesheet to a single Rails page
问题描述
我有一个Rails应用程序，其中有几个静态"页面，并且我计划在将来有更多页面.
I've got a Rails app that has a couple of 'static' pages and I plan to have more in the future.
当前文件结构:
....
/assets/stylesheets/static.scss
....
/controllers/static_controller.rb
....
/views/static/home.html.erb
/views/static/feedback.html.erb
....
我的Gemfile包含"bootstrap-sass" gem.
My Gemfile contains the 'bootstrap-sass' gem.
我希望 home.html.erb 视图具有与所有其他静态"页面(特别是以下CSS)不同的样式:
I want the home.html.erb view to have a different style from all the other 'static' pages, and specifically the following css:
html {
height: 100%;
background: url(assets/image.jpg) no-repeat center center;
background-size: cover;
font-family: Arial;
}
h1 {
color: black;
font-style: bold;
text-align: center;
}
如何/应该最有效地做到这一点?我是否需要为 home.html.erb 创建另一个控制器/视图/样式表?
How can/should this be achieved most efficiently? Would I need to create another controller/view/stylesheet for the home.html.erb?
代码:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Batuk</title>
<%= Gon::Base.render_data({}) %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'BATUK', root_path, class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><%= link_to 'Summary', summary_path %></li>
<li><%= link_to 'Statement', statement_path %></li>
<li><%= link_to 'Balances', balances_path %></li>
<li><%= link_to 'Accounts', accounts_path %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Feedback', feedback_path %></li>
<li><%= link_to 'Sign Out', root_path %></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
推荐答案
一种方法是使用CSS类来定位控制器和操作.
One way would be to target your controller and action using CSS classes.
在您的app/views/layouts/application.html.erb中，添加 controller_name 和 action_name 方法调用以生成CSS类.
In your app/views/layouts/application.html.erb, add controller_name and action_name method calls to generate the CSS classes.
<body class="<%= controller_name %> <%= action_name %>">
CSS
html { height: 100% }
body.home {
height: 100%;
background: url('assets/image.jpg') no-repeat center center;
background-size: cover;
font-family: Arial;
}
.home h1 {
color: black;
font-style: bold;
text-align: center;
}
这篇关于将特定的样式表添加到单个Rails页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
