Question

我目前正在使用Laravel Blade模板引擎来生成页面。我正在使用默认页面来渲染所有内容。问题是我似乎无法获得头部的所有css。菜单有一个自定义的CSS，我最终想要包含在头部。这样我就可以单独使用每个部件。为什么css没有被包含在head.blade.php部分？

Default.blade.php

<!doctype html>
<html>
    <head>
        @include('includes.head')
    </head>
    <body>
        <div class="container">

                <header class="row">
                    @include('includes.menu')
                </header>

                <div id="main" class="row">
                    @yield('content')
                </div>

            </div>
        </body>
    </html>

head.blade.php

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@yield('styles')

menu.blade.php

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

login.blade.php

@extends('layouts.default')

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

@section('content')
--content here--
@stop

我最终想要的是每个css都会根据所包含的视图加载到头文件中。

Answer 1

这是我的沙粒。您可以通过这种方式组织它们，以使刀片识别主模板中定义的部分（在您的情况下为default.blade.php）

default.blade.php

<!doctype html>
<html>
  <head>
    @yield('head')
    @yield('styles')
  </head>
  <body>
    <div class="container">

      <header class="row">
        @yield('primarymenu')
      </header>

      <div id="main" class="row">
        @yield('content')
      </div>

    </div>
    @yield('scripts')
  </body>
</html>

注意，我添加了脚本部分^^^，稍后还将在每个组件（菜单，登录名）中填充

includes / head.blade.php

@section('head')
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
@endsection

includes / menu.blade.php

@section('primarymenu')
  <!-- here goes your navitation links -->
@endsection

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

@section('scripts')
  @parent
  <script type="text/javascript" src="{{ asset ('js/menu.js') }}"></script>
@endsection

login.blade.php

@extends('layouts.default')

@section('content')
  @include('includes.head')
  @include('includes.menu')
  <!-- here goes your login contents -->
@endsection

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

@section('scripts')
  @parent
  <script type="text/javascript" src="{{ asset ('js/login.js') }}"></script>
@endsection

还请注意使用@parent，当您想在其他组件可能已经填充了内容的部分中添加更多内容时，它也很有帮助。

希望有帮助！

Answer 2

<强> Default.blade.php

<!doctype html>
<html>
    <head>
        @section('head')
            @include('includes.head')
        @show
    </head>
    <body>
    <div class="container">

            <header class="row">
                @include('includes.menu')
            </header>

            <div id="main" class="row">
                @yield('content')
            </div>

        </div>
    </body>
</html>

@section ... @show与@yield相同，但显示为

<强> head.blade.php

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

然后如果你想在 menu.blade.php

中添加更多样式

@section('head')
@parent
    <link href="{{ asset('/css/menu.css') }}" rel="stylesheet">
@endsection

或者如果要替换所有样式，请执行此操作而不使用@parent

Laravel @include和@yield blade

2 个答案: