Разный цвет фона для разных страниц в рельсах - PullRequest
Новая
       26

Разный цвет фона для разных страниц в рельсах

5 голосов
/ 16 января 2012

Поэтому я использую файл application.html.erb, который в основном является макетом для каждой страницы моего сайта. Но я хочу, чтобы домашняя страница имела белый фон, а остальные страницы - другой фон. Проблема заключается в том, что если я обертываю весь файл домашней страницы в элемент div, он только оборачивает место «yield» и отображает его как прямоугольник с белым фоном внутри большего прямоугольника с серым фоном. Так как я могу изменить весь фон главной страницы и оставить все остальное?

Спасибо!

Ответы [ 3 ]

18 голосов
/ 16 января 2012

Расширяя ответ, предоставленный @muffinista: Вы можете использовать переменную экземпляра, установленную в контроллере, чтобы определить, когда помещать класс 'homepage' в тег body. Итак: 

def index
  @home_page = true
  # existing code
end

и в макете: 

<body class="<%= @home_page ? 'homepage' : ''%>">
 <%= yield %>
</body>
2 голосов
/ 16 января 2012

Подумайте о том, чтобы поместить специальный класс в тег 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" %>

Очевидно, это зависит от специфики вашего приложения, но у меня оно работает нормально.

1 голос
/ 14 сентября 2015

Просто добавьте к принятому ответу, если вам нужно установить разные фоны для нескольких страниц, было бы разумно и добавить удобочитаемость, чтобы переместить код для поиска подходящего фона в частичное:

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