Правильный способ включить панель навигации и нижний колонтитул в каждый блейд- Laravel 7?

ProgramBox

Правильный способ включить панель навигации и нижний колонтитул в каждый блейд- Laravel 7?

Post author:admin
Запись опубликована:10 февраля, 2023
Post category:Вопросы по программированию

#laravel

Вопрос:

Я пытаюсь загрузить представления панели навигации и нижнего колонтитула на каждой странице Laravel, но загрузка не только медленная, но и делает недействительными многие CDN и плагины из-за многократного включения этих файлов (например, плагин jQuery Validator). Я включаю несколько кодов, чтобы показать свои проблемы

Я знаю, что я не должен загружать каждый скрипт (bootstrap и все) снова и снова в каждом представлении, но я не уверен, что еще можно сделать

Блейд (любая страница)

 <!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)

Ответ №1:

Вы могли бы попробовать это вместо:

ресурсы> виды> макеты > app.blade.php

В основном говорят, что перейдите в папку ресурсов, затем в папку 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 amp; 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

1. Пожалуйста, используйте мою терминологию в своем коде. Мне трудно следовать.

2. Я обновил ответ, пожалуйста, посмотрите. если у вас возникнут какие-либо проблемы, дайте мне знать.

3. Похоже, сработало, хотя я пробовал это только на одной странице. Большое спасибо за решение

4. Неплохо. Теперь иди и создай несколько потрясающих проектов.

Ответ №2:

Вы можете структурировать свои файлы следующим образом.

Вы можете создать отдельный файл заголовка, который включает ссылки на вашу таблицу стилей. При добавлении их, пожалуйста, учитывайте приоритет. Иногда одна таблица стилей переопределяет другую.
Вы можете создать отдельный файл панели навигации. у вас есть код для панели навигации. вы можете включить файл заголовка в файл панели навигации. затем, когда мы включаем панель навигации куда-нибудь, файл заголовка загружается автоматически.
Вы можете создать отдельный файл нижнего колонтитула, который включает ссылки на ваш скрипт. При добавлении их, пожалуйста, учитывайте приоритет.
вы можете включить их в другие файлы по мере необходимости.

Вопрос:

Ответ №1:

Комментарии:

Ответ №2:

Вам также может понравиться

EXC_BAD_ACCESS в NSLog, если NSString не обрабатывается и не печатается первой

Использование псевдонимов для нулевого времени простоя с индексами времени

Прерывистая ошибка при использовании EventTriggerBehavior/InvokeCommandAction