在每个刀片中包含导航栏和页脚的正确方法 - Laravel 7？答案

【问题标题】：Correct way to include Navbar and Footer in every blade- Laravel 7?在每个刀片中包含导航栏和页脚的正确方法 - Laravel 7？
【发布时间】：2020-11-12 21:31:16
【问题描述】：

我正在尝试在每个 Laravel 页面中加载 Navbar 和 Footer 视图，但不仅加载速度很慢，而且由于这些文件的多个包含（如 jQuery Validator Plugin），它还会使许多 CDN 和插件无效。我包含了一些代码来显示我的问题

我知道我不应该在每个视图中一次又一次地加载每个脚本（引导程序和所有脚本），但我不确定还能做什么

刀片（任何页面）

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS --!>
  //Bootstrap links here
   <!-- CSRF Token Meta Added -->
     <meta name="csrf-token" id="csrf-token" content="{{csrf_token()}}">

   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  // Bootstrap javascipt etc. links here

   <!-- Sweet Alert -->
   //Sweet alert links

   <!-- jQuery validation plugin -->
//Validation plugin links

</head>
<body>
 @include('commonview.navbar')

//some view here


@include('commonview.footer')

导航栏

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
   <!-- Data Table -->
   
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.22/r-2.2.6/sc-2.0.3/sb-1.0.0/sp-1.2.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.22/r-2.2.6/sc-2.0.3/sb-1.0.0/sp-1.2.1/datatables.min.js"></script>


 <!-- Font awesome -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">


</head>
<body>
 <header>
<nav class="navbar navbar-expand-lg navbar-dark @if(auth()->check()) bg-dark @else bg-info @endif">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
       <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav mr-auto">
           <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">About Us</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="contact">Contact Us</a>
           </li>
       </ul>

       <ul class="navbar-nav">
        @guest
           <li class="nav-item">
               <a class="nav-link" href="login"><i class="fas fa-sign-in-alt"></i> Login</a>
           </li>
           <li class="nav-item">
               <a class="nav-link"href="new_user"><i class="fas fa-user-plus"></i> Signup</a>
           </li>
           @endguest
           @auth
           <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i>
          {{Auth::user()->first_name}}
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="{{url('dashboard')}}"><i class="far fa-id-badge"></i></i> Profile</a>
          <a class="dropdown-item" href="{{url('contactm')}}"><i class="fas fa-envelope-open-text"></i> Messages</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="{{url('logout')}}"><i class="fas fa-sign-out-alt"></i> Logout</a>
        </div>
      </li>
           @endauth
       </ul>
   </div>
</nav>
</header>
</body>
</html>

页脚

Similar to Navbar with footer content (all scripts included here too)

【问题讨论】：

标签： laravel

【解决方案1】：

你可以试试这个：

资源 > 视图 > 布局 > app.blade.php

基本上是说导航到您的 resources 文件夹，然后是 views 文件夹，并在其中创建一个名为 layouts 的文件夹。在创建的文件夹中创建一个名为 app.blade.php

的文件

在您的 app.blade.php 中

<!DOCTYPE html>
<html>

<head>

  <!-- Stylesheet -->
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <!-- Data Table -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.22/r-2.2.6/sc-2.0.3/sb-1.0.0/sp-1.2.1/datatables.min.css" />

  <!-- Font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  <!--add this to have this styles on all pages-->
  @yield('css')
  <!--for adding additional styles-->
</head>

<body>

  <!-- Navbar Area Start -->
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark @if(auth()->check()) bg-dark @else bg-info @endif">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
           <span class="navbar-toggler-icon"></span>
       </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact">Contact Us</a>
          </li>
        </ul>

        <ul class="navbar-nav">
          @guest
          <li class="nav-item">
            <a class="nav-link" href="login"><i class="fas fa-sign-in-alt"></i> Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="new_user"><i class="fas fa-user-plus"></i> Signup</a>
          </li>
          @endguest @auth
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i>
              {{Auth::user()->first_name}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="{{url('dashboard')}}"><i class="far fa-id-badge"></i></i> Profile</a>
              <a class="dropdown-item" href="{{url('contactm')}}"><i class="fas fa-envelope-open-text"></i> Messages</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="{{url('logout')}}"><i class="fas fa-sign-out-alt"></i> Logout</a>
            </div>
          </li>
          @endauth
        </ul>
      </div>
    </nav>
  </header>
  <!-- Navbar Area End -->


  @yield('content')
  <!--for adding your content-->

  <!-- Add Footer Area Start -->

  <!-- Add Footer Area End -->

  <!-- **** All JS Files here ***** -->
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.22/r-2.2.6/sc-2.0.3/sb-1.0.0/sp-1.2.1/datatables.min.js"></script>
  <!--add this to have this scripts on all pages-->
  @yield('scripts')
  <!--for adding additional scripts-->

</body>

</html>

在其他页面上您只需调用

@extends('layouts.app') //this loads the app.blade.php which has navbar & footer
@section('content') 
//content here 
@endsection 

// There's no need to have this if you're not adding additionall css styling for this page

@section('css') 
// additional css here
//I'm assumming that you don't want to add your datable css everywhere so add it here: the whole link tag
@endsection 

@section('scripts') 
// additional scripts
//I'm assumming that you don't want to add your datable js everywhere so add it here: the whole script tag
here @endsection

【讨论】：

请在您的代码中使用我的术语。我很难跟上。
我更新了答案，请看一下。如果您遇到任何问题，请告诉我。
似乎有效，尽管我只在一页中尝试过。非常感谢您的解决方案
不错。现在去构建一些很棒的项目。

【解决方案2】：

您可以像这样构建您的文件。

您可以创建一个单独的头文件，其中包含您的样式表链接。添加它们时，请考虑优先级。有时一个样式表会覆盖另一个样式表。
您可以创建单独的导航栏文件。你有导航栏的代码。您可以将头文件包含到导航栏文件中。那么当我们将导航栏包含到某个地方时，头文件将自动加载。
您可以创建一个单独的页脚文件，其中包含您的脚本链接。添加时请考虑优先级。
您可以根据需要将它们包含到其他文件中。

【讨论】：