Rails 4 / Bootstrap 3:如何在不同页面上显示不同的导航栏?

2023-12-08

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

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

and

 <% content_for :navbar do %>
      <%= render 'nav_bar_variation_two' %>
 <% end %>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Rails 4 / Bootstrap 3:如何在不同页面上显示不同的导航栏? 的相关文章