簡體   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