it-swarm.com.de

hinzufügen von CSS- und JS-Dateien in Laravel 5.3

Ich möchte eine css all css und js in eine einzige Seite aufnehmen und in alle Seiten laden Ich füge sie auf einer anderen Seite hinzu, die ich in second.blade.php eingefügt habe

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
5
user3386779

Kiste header.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="description" content="">
    <meta name="author" content="">

    <title>dhinchakwale</title>
    <!-- Bootstrap Core CSS -->
    <link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">

    <link href="{{ asset('/css/datepicker.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" type="text/css">

    <link href="{{ asset('/css/dataTables.bootstrap.css') }}" rel="stylesheet">    
    <!-- Custom CSS -->  
    <link href="{{ asset('/css/admin.css') }}" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery -->
    <script src="{{ asset('/js/jquery.min.js') }}"></script>    
  </head>

  <body id="page-top">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->        
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/"><img alt="Brand" src="{{asset('/images/logo.png')}}" class="img-brand"></a>
        </div>      
      </div>
    </nav>
    <div class="content-div">
      @yield('content')
    </div>
    <div class="clearfix"></div>  

    <!-- Bootstrap Core JavaScript -->
    <script src="{{ asset('/js/bootstrap.min.js') }}"></script> 
    <script src="{{ asset('/js/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('/js/bootstrap-timepicker.min.js') }}"></script>
  </body>
</html>

Und so verwenden Erweitert zuerst den Header Zweiter Abschnitt Ihres Inhalts

@extends('layouts.header')
@section('content')
  <section class="content-header">
    <h1>
      Hello
    </h1>
  </section>
@stop  
10
Komal

Hier sind die Schritte, die Sie befolgen können

  1. Erstellen Sie ein Vorlagenvorlagenlayout
  2. Erweitern Sie die Mastervorlage auf allen Seiten und fügen Sie Ihren Link in den Kopfzeilenbereich ein

So erstellen Sie eine Master-Vorlage//master.blade.php

<html lang="en">

      @yield('header')

<body>
      @yield('page-body')
</body>
</html>

Erweitern Sie dieses Layout jetzt in second.blade.php

@extend('master.blade')
@section('header')
   <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
@endsection
@section('page-body')
   {{!-- content of body --}}
@endsection
4
Amit Kumar

Definieren Sie ein allgemeines Layout und fügen Sie alle JS- und CSS-Dateien in dieses Layout ein. Binden Sie dann Ihre Seite mit diesem Layout. 

Layout: 

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Dabei gilt: Die @Yield-Direktive wird verwendet, um den Inhalt eines bestimmten Abschnitts anzuzeigen.

Aussicht: 

@extends('layouts.default')
@section('content')
    i am the home page
@endsection
3
Mayank Pandeyz

Sie können eine Master-Layoutansicht definieren und dort Ihre CSS und JS definieren. Dann wird Ihre gesamte Ansichtsdatei diese Layoutdatei erweitern. Die Dokumentation finden Sie hier: https://laravel.com/docs/5.3/blade

1
aceraven777