Question

我有一个文件application.html.erb，据我所知，它出现在我的所有页面上。在那个应用程序中，我有一个导航栏：

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <%= link_to "MyGym", root_path, class: "navbar-brand" %>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><%=link_to "About", about_path %></li>
        </ul>
      </div>
    </div>
  </nav>

该导航栏在我的application.css.scss文件中指定的背景中有一个渐变：

.navbar {
    // gradient from uiGradients by _ighosh
    background: #52c234;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #061700, #52c234);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #061700, #52c234); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border: none;
  }

在我的主页home.html.erb上，我有一个如下所示的页眉。它出现在我的导航栏下面：

<div class="text-center home-callout">
  <h1>MY GYM</h1>
  <h2>Book your place, don't miss the class!</h2>
</div>

我希望该渐变仅应用于所有其他页面上的导航栏，但在主页面上我希望它应用于导航栏和我的主页标注。由于它是横向背景，因此将它应用于导航栏和我的家庭标注都不起作用（它从黑暗开始，在导航栏中以浅绿色结束，然后在其下方再次以深绿色开始）。它找我，要么我需要两页div，要么在我的主页上覆盖我的导航栏。我希望我清楚地解释了我的想法，你能帮助我吗？

Answer 1

如果导航标签中的.home-callout div解决了您的问题，您可以使用yield在导航中设置占位符，只在home.html.erb视图中填充它。

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <%= link_to "MyGym", root_path, class: "navbar-brand" %>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><%=link_to "About", about_path %></li>
        </ul>
      </div>
    </div>
    <%= yield(:inside_nav) -%>
  </nav>

在关闭导航标记之前注意最后一行

在你home.html.erb里面设置内容：

<%= content_for :inside_nav do -%>
  <div class="text-center home-callout">
    <h1>MY GYM</h1>
    <h2>Book your place, don't miss the class!</h2>
  </div>
<%- end -%>
//the rest of the template

Rails的模板系统将处理它并在代码存在时将代码置于nav中，或者如果未定义则忽略yield。

通过文件div

1 个答案: