Laravel Blade使用@extends时模板出现多余空格问题求助

问题原因 #

Blade编译模板时会保留原文件的缩进、换行等空白字符，当@yield('content')对应的子模板区块为空（或仅包含换行）时，父模板中@yield周围的缩进空格会被保留为HTML中的空白节点，从而出现多余空格。

解决方法 #

方法1：使用Blade空格控制语法 #

在@yield指令末尾添加-，可以移除指令后的多余空格：

<!-- base.blade.php 修改后 -->
<div class="container-fluid">
    <div class="row">
       @yield('content')-
    </div>
</div>

也可以直接将@yield与闭合标签写在同一行，减少缩进带来的空白：

<!-- base.blade.php 修改后 -->
<div class="container-fluid">
    <div class="row">@yield('content')</div>
</div>

方法2：优化子模板的@section写法 #

将子模板中的@section和@endsection写在同一行，避免产生多余换行：

<!-- roles.blade.php 修改后 -->
@extends('layouts.dashboard.base')
@section('content')@endsection

内容的提问来源于stack exchange，提问作者Firman