Rails 4/Bootstrap 3:如何在不同页面上显示不同的导航栏? [英] Rails 4 / Bootstrap 3: how to display a different navigation bar on different pages?

问题描述

这是我们的Bootstrap 3组件制作的Rails 4应用程序的_header.html.erb:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <nav>
      <div class="col-xs-4">
        <%= link_to "APP NAME", root_path, id: "logo" %>
      </div>
      <div class="col-xs-4 text-center">
        <ul class="nav navbar-nav navbar-center">
          <li><%= link_to "Features",   features_path %></li>
          <li><%= link_to "Pricing",   pricing_path %></li>
          <li><%= link_to "Blog", '#' %></li>
        </ul>
      </div>
      <div class="col-xs-4">
        <ul class="nav navbar-nav navbar-right">
          <% if current_user.try(:admin?) %>
            <li><%= link_to "Users", users_path %></li>
          <% end %>
          <% if logged_in? %>
            <li><%= link_to "Dashboard", current_user %></li>
            <li><%= link_to "Settings", current_user %></li>
            <li><%= link_to "Log out", logout_path, method: "delete" %></li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
          <li><%= link_to "Sign up", signup_path %></li>
        <% end %>
        </ul>
      </div>
    </nav>
  </div>
</header>

如您所见，这将有条件地显示一个导航栏，具体取决于当前用户是注销，登录还是以管理员身份登录.

但是，我们想知道如何在不同页面上显示不同的导航栏.

例如，在所有公共页面(主页，功能，价格，博客，帮助等)上，我们要显示Features，Pricing和& Blog链接(无论用户是否登录)，但是在应用程序的内部页面(仪表板，设置等)上，我们希望删除这些链接.

为了使事情更清楚，我们所谓的公共页面实际上是我们的static_pages，它依赖于我们的StaticPages#Controller，而内部应用程序页面(例如仪表板和设置)依赖于我们的Users#Controller.

我们如何实现这一目标?我们需要创建一个新的_header.html.erb局部文件吗?

是否有特定的Rails方式?

解决方案

您可以将导航栏的每个变体放入其自己的部分中，并使用content_for.

在您的应用程序布局中，您可以具有检查是否应渲染特定导航栏的逻辑，如下所示:

<% if content_for?(:navbar) %>
    <%= yield(:navbar) %>
<% else %>
   # code for default navbar
<% end %>

在视图中，您需要不同的导航栏

 <% content_for :navbar do %>
      <%= render 'nav_bar_variation_one' %>
 <% end %>

和

 <% content_for :navbar do %>
      <%= render 'nav_bar_variation_two' %>
 <% end %>

Here is the _header.html.erb of our Rails 4 app, made with Bootstrap 3 components:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <nav>
      <div class="col-xs-4">
        <%= link_to "APP NAME", root_path, id: "logo" %>
      </div>
      <div class="col-xs-4 text-center">
        <ul class="nav navbar-nav navbar-center">
          <li><%= link_to "Features",   features_path %></li>
          <li><%= link_to "Pricing",   pricing_path %></li>
          <li><%= link_to "Blog", '#' %></li>
        </ul>
      </div>
      <div class="col-xs-4">
        <ul class="nav navbar-nav navbar-right">
          <% if current_user.try(:admin?) %>
            <li><%= link_to "Users", users_path %></li>
          <% end %>
          <% if logged_in? %>
            <li><%= link_to "Dashboard", current_user %></li>
            <li><%= link_to "Settings", current_user %></li>
            <li><%= link_to "Log out", logout_path, method: "delete" %></li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
          <li><%= link_to "Sign up", signup_path %></li>
        <% end %>
        </ul>
      </div>
    </nav>
  </div>
</header>

As you can see, this conditionally displays a navigation bar, depending on whether the current user is logged out, logged in or logged in as admin.

However, we are wondering how we could display a different navigation bar on different pages.

For instance, on all public pages (home, features, pricing, blog, help, etc.), we would like to display the Features, Pricing & Blog links (whether the user is logged in or not) but on the inner pages of the app (dashboard, settings, etc) we would like to remove these links.

EDIT: to make things clearer, what we call the public pages are actually our static_pages, which rely on our StaticPages#Controller, while the inner app pages such as dashboard and settings rely on our Users#Controller.

How can we achieve this? Do we need to create a new _header.html.erb partial?

Is there a particular Rails way to do that?

解决方案

You could put each variation of the navbar in it's own partial and make use of content_for.

In your application layout you could have logic that checks if a specific navbar should be rendered, like this:

<% if content_for?(:navbar) %>
    <%= yield(:navbar) %>
<% else %>
   # code for default navbar
<% end %>

And inside your views, where you want the different navbars

 <% content_for :navbar do %>
      <%= render 'nav_bar_variation_one' %>
 <% end %>

and

 <% content_for :navbar do %>
      <%= render 'nav_bar_variation_two' %>
 <% end %>

这篇关于Rails 4/Bootstrap 3:如何在不同页面上显示不同的导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！