繁体   English   中英

如何让我的导航栏出现在我的 rails 应用程序的每个页面上?

[英]How can I make my navbar appear on every page in my rails app?

我目前在我的 index.htm.erb 文件中有我的导航栏。 它目前仅显示在主页上。 我想知道必须采取哪些必要步骤才能让导航栏出现在我的应用程序的每一页上?

我的导航栏的代码如下所示:

<header class="navbar  navbar-inverse">
<div class="navbar-class">
<div class="container">


<!-- Collect the nav links, forms, and other content for toggling -->

  <ul class="nav navbar-nav">
  <li class="active"><a href="#">HOME</a></li>
  <li><%=link_to "ABOUT", about_us_path%></li>
  <li><%=link_to "OUR SERVICES", our_services_path %></li>
  <li><%=link_to "RATES", rates_path %></li>
  <li><%=link_to'CAREERS', careers_path%></li>
  <li><a href="#">TRAINING</a></li>
  <li><%= link_to"GALLERY", gallery_path %></li>
  <li><%=link_to"MEDIA", media_path%></li>
  <li><%=link_to"FAQS", faq_path %></li>
  <li><a href="#">CONTACT</a></li>
  </ul>


  </div>
 </div>
 </header>

任何投入将不胜感激。

谢谢

如果您转到 app/views/layouts/application.html.erb,您将看到如下内容:

<!DOCTYPE html>
<html>
<head>
  <title>SampleApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

这是您的应用程序的每个页面都在其中呈现的模板。 这是您想要放置导航栏的地方。 您可以直接剪切并粘贴到此文件,也可以将其渲染为部分文件。

要将其呈现为部分,请将您的导航栏代码保存在同一目录中并随意命名,但请确保将其保存为“.html.erb”并以下划线开头。 例如:“_navbar.html.erb”。

下划线让 Rails 知道它是部分的,“.html.erb”告诉 Rails 使用什么预处理器。

将它保存为“app/views/layouts/_navbar.html.erb”后,在你的“application.html.erb”中渲染它:

...
<body>
<%= render "layouts/navbar" %>
<%= yield %>

</body>
...

然后它应该显示在每一页上。

您需要从index.html.erb删除它并将其放入layouts/application.html.erb

然后每个响应将首先使用应用程序布局,并根据控制器的请求从特定的显示/索引视图中yield内容。

它应该是这样的:

<!DOCTYPE html>
<html>
  <head>
    <title>SspPrototype</title>
    <%= stylesheet_link_tag    'application' %>
    <%= javascript_include_tag 'application' %>
    <%= csrf_meta_tags %>
  </head>
<body>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>

  <header class="navbar  navbar-inverse">
    <div class="navbar-class">
      <div class="container">


      <!-- Collect the nav links, forms, and other content for toggling -->

        <ul class="nav navbar-nav">
          <li class="active"><a href="#">HOME</a></li>
          <li><%=link_to "ABOUT", about_us_path%></li>
          <li><%=link_to "OUR SERVICES", our_services_path %></li>
          <li><%=link_to "RATES", rates_path %></li>
          <li><%=link_to'CAREERS', careers_path%></li>
          <li><a href="#">TRAINING</a></li>
          <li><%= link_to"GALLERY", gallery_path %></li>
          <li><%=link_to"MEDIA", media_path%></li>
          <li><%=link_to"FAQS", faq_path %></li>
          <li><a href="#">CONTACT</a></li>
        </ul>


      </div>
    </div>
  </header>
<%= yield %>

</body>
</html>

以下是一些概述指南:

http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts http://railsapps.github.io/rails-default-application-layout.html

在 app/views 中创建一个共享文件夹。 在文件夹 (app/views/shared) 中,您创建了一个名为 _navbar.html.erb 的部分。 在部分内,复制导航栏的代码。

然后你需要在 views/layouts/application.html.erb 中的导航栏,写在<%=yield%>: <%= render "shared/navbar" %>正上方<%=yield%>: <%= render "shared/navbar" %>

您也可以使用 _footer.html.erb 执行此操作(将其放在<%= yield %>下方)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM