Question

我有一个Rails应用程序，它有几个“静态”页面，我计划将来有更多。

当前文件结构：

....
/assets/stylesheets/static.scss
....
/controllers/static_controller.rb
....
/views/static/home.html.erb
/views/static/feedback.html.erb
....

我的Gemfile包含'bootstrap-sass'宝石。

我希望home.html.erb视图与所有其他“静态”页面具有不同的样式，特别是以下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创建另一个控制器/视图/样式表？

CODE：

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>

Answer 1

一种方法是使用CSS类来定位控制器和操作。

在app / views / layouts / application.html.erb中，添加controller_name和action_name方法调用以生成CSS类。

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

Answer 2

创建具有匹配名称的布局，对于static_controller，模板名称应为static.html.erb。然后在控制器中指定布局

 class staticController < ApplicationController
  layout 'static'
 end

将特定样式表添加到单个Rails页面

2 个答案: