Laravel @include 和 @yield 刀片答案

【问题标题】：Laravel @include and @yield bladeLaravel @include 和 @yield 刀片
【发布时间】：2018-11-07 23:34:54
【问题描述】：

我目前正在使用 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 加载到头文件中。

【问题讨论】：

标签： php laravel laravel-blade

【解决方案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>

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

包括/head.blade.php

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

包括/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 的使用，当您想在其他组件可能已经填充了内容的部分中附加更多内容时，这也很有帮助。

希望有帮助！

【讨论】：

【解决方案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 的情况下执行此操作

【讨论】：

虽然这确实加载了 login.blade.php 的 css，但菜单的 css 仍然没有显示出来。
将您的@yield('styles') 放在@include 之后的Default.blade.php 中，它会起作用
返回内联 css。我更喜欢把我所有的css都放在脑子里。猜猜使用刀片引擎是不可能的。