Question

我需要添加以下css和jquery脚本

<script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
    <script src="{{asset('js/jquery.bxSlider.js')}}"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#slider').bxSlider({
        ticker: true,
        tickerSpeed: 5000,
      tickerHover: true
      });
      });
    </script>

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

到app.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">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="{{asset('favicon.ico')}}">

        <title>Wealth </title>

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

        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">

        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <link href="{{asset('css/carousel.css')}}" rel="stylesheet">

    <body>
        @yield('content')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
        <script src="{{asset('js/bootstrap.min.js')}}"></script>
        <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
        <script src="{{asset('js/vendor/holder.min.js')}}"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
      </body>
    </html>

并且需要将上面的css和jquery传递给另一个刀片文件，如@extends（'layouts.app'）和@section（'content'）怎么办呢???没有@extends（'layouts.app'）和@section（'content'）它正在工作，但是@extends（'layouts.app'）和@section（'content'）它没有工作......

Answer 1

@yield('content')高于你的jquery。我建议添加更多部分。将您的脚本包裹在@section('scripts')和@show周围，在子视图中添加@section('scripts')，@stop并在其中添加@parent。重复样式。您还添加了两次jQuery，这是我如何做到的：

布局视图：

    <!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">
       <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
       <meta name="description" content="">
       <meta name="author" content="">
       <link rel="icon" href="{{asset('favicon.ico')}}">

       <title>Wealth </title>

       @section('styles')
         <!-- Bootstrap core CSS -->
         <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">

         <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
         <link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">

         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <link href="{{asset('css/carousel.css')}}" rel="stylesheet">
      @show

       <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
       <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
       <script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>



   <body>
       @yield('content')
       @section('scripts')
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
             <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
             <script src="{{asset('js/bootstrap.min.js')}}"></script>
             <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
             <script src="{{asset('js/vendor/holder.min.js')}}"></script>
             <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
             <script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
       @show
     </body>
   </html>

子视图：

    @section('scripts')
  @parent
      <script src="{{asset('js/jquery.bxSlider.js')}}"></script>
      <script type="text/javascript">
        $(document).ready(function(){
          $('#slider').bxSlider({
          ticker: true,
          tickerSpeed: 5000,
        tickerHover: true
        });
        });
      </script>
    @stop

@section('styles')
  @parent
  <link href="{{asset('css/style.css')}}" rel="stylesheet">
@stop

@parent添加了布局块中的所有内容。在子视图中添加@section通常会使用子块替换布局块，这样可以确保附加了子视图块。

修改

正如评论中所讨论的那样，问题是jquery被包括两次。

Answer 2

Laravel在Blade模板中有一个名为“stacks”的无证功能。它们允许您定义一个部分并“推送”到该部分，而无需经常在@parent标记中调用@section（并覆盖该部分的内容）。

堆栈看起来像这样：

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>@yield('title', config('app.name'))</title>
        @stack('css')
    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>
        @stack('scripts')
    </body>
</html>

然后你可以像这样附加到这个堆栈：

<!-- resources/views/some-view.blade.php -->
@extends('layouts.app')

@push('css')
    <link href="{{asset('css/style.css')}}" rel="stylesheet" />
@endpush

@push('scripts')
    <script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
    <script src="{{asset('js/jquery.bxSlider.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#slider').bxSlider({
                ticker: true,
                tickerSpeed: 5000,
                tickerHover: true
            });
        });
    </script>
@endpush

如何向Laravel @extends（'layouts.app'）@section（'content'）添加css sripts和jquery脚本

2 个答案:

修改