首页 > 解决方案 > 导航栏出现在主页上,但不在帖子页面上(这里是新手)

问题描述

所以我是一个新手,请多多包涵。

我正在在线学习一门课程,其中讲师显示导航栏出现在主页根路径上,但也出现在帖子页面等其他页面上。我完全按照他的指示进行操作,但由于某种原因,部分导航栏只出现在主页上,而不出现在帖子页面上 - 导航栏的代码如下,其他页面的代码都在https:/ /github.com/cheese1884/-mywebsite

多谢你们。

<div class='container'>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <%= link_to "LessonRoll", root_path, class: 'navbar-brand' %>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor03">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <%= link_to 'Home', root_path, class: 'nav-link' %>
        </li>
        <li class="nav-item">
          <%= link_to 'Posts', posts_path, class: 'nav-link' %>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>

        </li>
          <% if current_user %>
              <li class="nav-item dropdown">
              <a class = "nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Admin Menu<span class="caret"></span></a>
              <div class="dropdown-menu" aria-labelledby="download">
                <%= link_to "App Settings", app_setting_path(@app_setting), class: 'dropdown-item' %>
                <div class="dropdown-divider"></div>
              Link
              </div>
            </li>
            <% end %>
        </ul>



        <ul class="nav navbar-nav ml-auto">
          <% if !current_user %>
           <li class="nav-item">
              <%= link_to "Sign Up", new_user_registration_path, class: 'nav-link' %>
            </li>
             <li><%= link_to "Log In", new_user_session_path, class: 'nav-link' %>
            </li>
            <% else %>
           <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download"><%= current_user.username if current_user %> <span class="caret"></span></a>
              <div class="dropdown-menu" aria-labelledby="download">
                <%= link_to "Edit Profile", edit_user_registration_path, class: 'dropdown-item' %>
                <div class="dropdown-divider"></div>
                <%= link_to "Log Out", destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
              </div>
            </li>
            <% end %>
          </ul>
    </div>
  </nav>
</div>

标签: ruby-on-rails

解决方案


在您的 Yeti.html.erb 中,您需要将导航栏放在该yield部分之外:

<body>
  <%= render partial: 'navbar' %> <!-- or code for navbar -->
  <div>
    <%= yield %>
  </div>
</body>

编辑:多种布局说明

Rails 使用一个简单的约定来为您的请求找到正确的布局。如果您有一个名为 的控制器ProductsController,Rails 将查看是否有该控制器的布局 layouts/products.html.erb。如果它找不到特定于您的控制器的布局,它将使用app/views/layouts/application.html.erb. (来源

在您的情况下,您可以添加自定义布局,例如yeti.html.erb并指定您PostsController使用此布局layout 'yeti'

为什么导航栏出现在主页上但不在帖子页面上(原始问题)

因为正如我在上面回答的那样,您需要在布局中添加部分导航栏,yeti.html.erb就像在布局中所做的一样application.html.erb

为什么导航栏设计不同

因为在应用程序布局中,您链接了application.scss仅导入引导程序的样式表(此处

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>  

在 Yeti 布局中,您链接yeti/theme_manifest.scss为样式表,该样式表同时导入“引导程序”和覆盖的“主题”(此处

<%= stylesheet_link_tag 'yeti/theme_manifest', media: 'all', 'data-turbolinks-track': 'reload' %>

我希望这能帮助你看得更清楚。


推荐阅读