陈贝贝 發表於 2019-7-31 10:57:00

前端开发 —— Blade 模板引擎

<h3 id="toc_0">简介</h3>
<p>&nbsp; &nbsp;Blade 是由 Laravel 提供的非常简单但功能强大的模板引擎,不同于其他流行的 PHP 模板引擎,Blade 在视图中并不约束你使用 PHP 原生代码。所有的 Blade 视图最终都会被编译成原生 PHP 代码并缓存起来直到被修改,这意味着对应用的性能而言 Blade 基本上是零开销。Blade 视图文件使用&nbsp;<code>.blade.php</code>&nbsp;文件扩展并存放在&nbsp;<code>resources/views</code>&nbsp;目录下。</p>
<h3 id="toc_1">模板继承</h3>
<h4 id="toc_2">&nbsp; &nbsp;定义布局</h4>
<p>&nbsp; &nbsp; &nbsp;使用 Blade 的两个最大优点是<span style="color: rgba(255, 102, 0, 1)">模板继承和片段组合</span>,开始之前让我们先看一个例子。首先,我们测试“主”页面布局,由于大多数 Web 应用在不同页面中使用同一个布局,可以很方便的将这个布局定义为一个单独的 Blade 页面:</p>
<div class="cnblogs_code">
<pre>&lt;!-- 存放在 resources/views/layouts/app.blade.php --&gt;

&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;应用名称 - @yield('title')&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;<span style="color: rgba(0, 0, 0, 1)">
      @section(</span>'sidebar'<span style="color: rgba(0, 0, 0, 1)">)
            这里是侧边栏
      @show

      </span>&lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>="container"&gt;<span style="color: rgba(0, 0, 0, 1)">
            @yield(</span>'content'<span style="color: rgba(0, 0, 0, 1)">)
      </span>&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;正如你所看到的,该文件包含典型的 HTML 标记,不过,注意&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@section</code></span>&nbsp;和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@yield</code></span>&nbsp;指令,前者正如其名字所暗示的,定义了一个内容片段,而后者用于显示给定片段的内容。</p>
<p>&nbsp; &nbsp; &nbsp;现在我们已经为应用定义了一个布局,接下来让我们定义继承该布局的子页面吧。</p>
<h4 id="toc_3">&nbsp; &nbsp;继承布局</h4>
<p>&nbsp; &nbsp; &nbsp;定义子页面的时候,可以使用 Blade 的&nbsp;<code>@extends</code>&nbsp;指令来指定子页面所继承的布局,继承一个 Blade 布局的视图可以使用&nbsp;<code>@section</code>&nbsp;指令注入内容到布局定义的内容片段中,记住,如上面例子所示,这些片段的内容将会显示在布局中使用&nbsp;<code>@yield</code>&nbsp;的地方:</p>
<div class="cnblogs_code">
<pre>&lt;!-- 存放在 resources/views/child.blade.php --&gt;<span style="color: rgba(0, 0, 0, 1)">

@</span><span style="color: rgba(0, 0, 255, 1)">extends</span>('layouts.app'<span style="color: rgba(0, 0, 0, 1)">)

@section(</span>'title', 'Laravel学院'<span style="color: rgba(0, 0, 0, 1)">)

@section(</span>'sidebar'<span style="color: rgba(0, 0, 0, 1)">)
    @parent
    </span>&lt;p&gt;Laravel学院致力于提供优质Laravel中文学习资源&lt;/p&gt;<span style="color: rgba(0, 0, 0, 1)">
@endsection

@section(</span>'content'<span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;p&gt;这里是主体内容,完善中...&lt;/p&gt;<span style="color: rgba(0, 0, 0, 1)">
@endsection</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;在本例中,<code>sidebar</code>&nbsp;片段使用&nbsp;<code>@parent</code>&nbsp;指令来追加(而非覆盖)内容到继承布局的侧边栏,<code>@parent</code>&nbsp;指令在视图渲染时将会被布局中的内容替换。</p>
<blockquote>
<p>注:与之前的示例相反,<code>sidebar</code>&nbsp;部分以&nbsp;<code>@endsection</code>&nbsp;结束而不是&nbsp;<code>@show</code>,<code>@endsection</code>&nbsp;指令只是定义一个 section 而&nbsp;<code>@show</code>&nbsp;指令定义并立即返回这个 section。</p>
</blockquote>
<p>&nbsp; &nbsp; &nbsp;Blade 视图可以通过&nbsp;<code>view</code>&nbsp;方法直接从路由中返回:</p>
<div class="cnblogs_code">
<pre>Route::get('blade', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span> view('child'<span style="color: rgba(0, 0, 0, 1)">);
});</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;这样在浏览器中访问&nbsp;<code>/blade</code>,就可以看到页面显示如下:</p>
<p>&nbsp; &nbsp; &nbsp;<img src="https://img2018.cnblogs.com/blog/535842/201907/535842-20190730185839403-1961775110.png"></p>
<p>&nbsp; &nbsp; &nbsp;现在页面还很粗糙,没有任何样式,后面学习前端组件后可以回来完善。</p>
<h4 id="toc_4">&nbsp; &nbsp;组件 &amp; 插槽</h4>
<p>&nbsp; &nbsp; &nbsp;组件和插槽给内容片段(section)和布局(layout)带来了方便,不过,有些人可能会发现组件和插槽的模型更容易理解。首先,我们假设有一个可复用的“alert”组件,我们想要在整个应用中都可以复用它:</p>
<div class="cnblogs_code">
<pre>&lt;!-- /resources/views/alert.blade.php --&gt;

&lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>="alert alert-danger"&gt;<span style="color: rgba(0, 0, 0, 1)">
    {{ </span><span style="color: rgba(128, 0, 128, 1)">$slot</span><span style="color: rgba(0, 0, 0, 1)"> }}
</span>&lt;/div&gt;</pre>
</div>
<p><span style="color: rgba(255, 102, 0, 1)"><code>&nbsp; &nbsp;{{ $slot }}</code></span>&nbsp;变量包含了我们想要注入组件的内容,现在,要构建这个组件,我们可以使用 Blade 指令&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@component</code></span>:</p>
<div class="cnblogs_code">
<pre>@component('alert'<span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;strong&gt;Whoops!&lt;/strong&gt; Something went wrong!<span style="color: rgba(0, 0, 0, 1)">
@endcomponent</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;有时候为组件定义多个插槽很有用。下面我们来编辑alert组件以便可以注入“标题”,命名插槽可以通过“echoing”与它们的名字相匹配的变量来显示:</p>
<div class="cnblogs_code">
<pre>&lt;!-- /resources/views/alert.blade.php --&gt;

&lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>="alert alert-danger"&gt;
    &lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>="alert-title"&gt;{{ <span style="color: rgba(128, 0, 128, 1)">$title</span> }}&lt;/div&gt;<span style="color: rgba(0, 0, 0, 1)">
    {{ </span><span style="color: rgba(128, 0, 128, 1)">$slot</span><span style="color: rgba(0, 0, 0, 1)"> }}
</span>&lt;/div&gt;</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;现在,我们可以使用指令&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@slot</code></span>&nbsp;注入内容到命名的插槽。任何不在&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@slot</code></span>&nbsp;指令中的内容都会被传递到组件的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>$slot</code>&nbsp;</span>变量中:</p>
<div class="cnblogs_code">
<pre>@component('alert'<span style="color: rgba(0, 0, 0, 1)">)
    @slot(</span>'title'<span style="color: rgba(0, 0, 0, 1)">)
      Forbidden
    @endslot

    You are not allowed to access this </span><span style="color: rgba(0, 0, 255, 1)">resource</span>!<span style="color: rgba(0, 0, 0, 1)">
@endcomponent</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;当我们在浏览器中查看这个组件内容的话,对应输出如下:</p>
<p>&nbsp; &nbsp;&nbsp;<img src="https://img2018.cnblogs.com/blog/535842/201907/535842-20190730190554048-319126872.png"></p>
<p>&nbsp; &nbsp; &nbsp;这段代码的意思是通过组件名&nbsp;<code>alert</code>&nbsp;去查找对应的视图文件,装载到当前视图,然后通过组件中&nbsp;<code>@slot</code>&nbsp;定义的插槽内容去渲染插槽视图中对应的插槽位,如果组件没有为某个插槽位定义对应的插槽内容片段,则组件中的其他不在&nbsp;<code>@slot</code>&nbsp;片段中的内容将会用于渲染该插槽位,如果没有其他多余内容则对应插槽位为空。</p>
<p>&nbsp; &nbsp;<strong>传递额外数据到组件</strong></p>
<p>&nbsp; &nbsp; &nbsp;有时候你可能需要传递额外数据到组件,出于这个原因,你可以传递数组数据作为第二个参数到&nbsp;<code>@component</code>&nbsp;指令,所有数据都会在组件模板中以变量方式生效:</p>
<div class="cnblogs_code">
<pre>@component('alert', ['foo' =&gt; 'bar'<span style="color: rgba(0, 0, 0, 1)">])
    </span>...<span style="color: rgba(0, 0, 0, 1)">
@endcomponent</span></pre>
</div>
<p>&nbsp; &nbsp;<strong>组件别名</strong></p>
<p>&nbsp; &nbsp; &nbsp;如果 Blade 组件存储在子目录中,你可能想要给它们起别名以便访问。例如,假设有一个存放在&nbsp;<code>resources/views/components/alert.blade.php</code>&nbsp;的 Blade 组件,你可以使用&nbsp;<code>component</code>&nbsp;方法将这个组件设置别名为&nbsp;<code>alert</code>(原名是&nbsp;<code>components.alert</code>)。通常,这个操作在&nbsp;<code>AppServiceProvider</code>&nbsp;的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>boot</code></span>&nbsp;方法中完成:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">use</span><span style="color: rgba(0, 0, 0, 1)"> Illuminate\Support\Facades\Blade;

Blade</span>::component('components.alert', 'alert');</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;组件设置别名后,就可以使用如下指令来渲染:</p>
<div class="cnblogs_code">
<pre>@alert(['type' =&gt; 'danger'<span style="color: rgba(0, 0, 0, 1)">])
    You are not allowed to access this </span><span style="color: rgba(0, 0, 255, 1)">resource</span>!<span style="color: rgba(0, 0, 0, 1)">
@endalert</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;如果没有额外插槽的话也可以省略组件参数:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">@alert
    You are not allowed to access this </span><span style="color: rgba(0, 0, 255, 1)">resource</span>!<span style="color: rgba(0, 0, 0, 1)">
@endalert</span></pre>
</div>
<h3 id="toc_5">数据显示</h3>
<p>&nbsp; &nbsp;可以通过两个花括号包裹变量来显示传递到视图的数据,比如,如果给出如下路由:</p>
<div class="cnblogs_code">
<pre>Route::get('greeting', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> view('welcome', ['name' =&gt; '学院君'<span style="color: rgba(0, 0, 0, 1)">]);
});</span></pre>
</div>
<p>&nbsp; &nbsp;那么可以通过如下方式显示&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>name</code></span>&nbsp;变量的内容:</p>
<div class="cnblogs_code">
<pre>你好, {{ <span style="color: rgba(128, 0, 128, 1)">$name</span> }}。</pre>
</div>
<blockquote>
<p>注:Blade 的&nbsp;<code>{{}}</code>&nbsp;语句已经经过 PHP 的&nbsp;<code>htmlentities</code>&nbsp;函数处理以避免 XSS 攻击。</p>
</blockquote>
<p>&nbsp; &nbsp;当然,不限制显示到视图中的变量内容,你还可以输出任何 PHP 函数的结果,实际上,可以将任何 PHP 代码放到 Blade 模板语句中:</p>
<div class="cnblogs_code">
<pre>The <span style="color: rgba(0, 128, 128, 1)">current</span> UNIX timestamp is {{ <span style="color: rgba(0, 128, 128, 1)">time</span>() }}.</pre>
</div>
<p>&nbsp; &nbsp;<strong>显示原生数据</strong></p>
<p>&nbsp; &nbsp; &nbsp;默认情况下,Blade 的&nbsp;<code>{{ }}</code>&nbsp;语句已经通过 PHP 的&nbsp;<code>htmlentities</code>&nbsp;函数处理以避免 XSS 攻击,如果你不想要数据被处理,比如要输出带 HTML 元素的富文本,可以使用如下语法:</p>
<div class="cnblogs_code">
<pre>Hello, {!! <span style="color: rgba(128, 0, 128, 1)">$name</span> !!}.</pre>
</div>
<blockquote>
<p>注:输出用户提供的内容时要当心,对用户提供的内容总是要使用双花括号包裹以避免 XSS 攻击。</p>
</blockquote>
<p>&nbsp; &nbsp;<strong>渲染 JSON 内容</strong></p>
<p>&nbsp; &nbsp; &nbsp;有时候你可能会将数据以数组方式传递到视图再将其转化为 JSON 格式以便初始化某个 JavaScript 变量,例如:</p>
<div class="cnblogs_code">
<pre>&lt;script&gt;
    <span style="color: rgba(0, 0, 255, 1)">var</span> app = &lt;?php <span style="color: rgba(0, 0, 255, 1)">echo</span> json_encode(<span style="color: rgba(128, 0, 128, 1)">$array</span>); ?&gt;<span style="color: rgba(0, 0, 0, 1)">;
</span>&lt;/script&gt;</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;这样显得很麻烦,有更简便的方式来实现这个功能,那就是 Blade 的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@json</code></span>&nbsp;指令:</p>
<div class="cnblogs_code">
<pre>&lt;script&gt;
    <span style="color: rgba(0, 0, 255, 1)">var</span> app = @json(<span style="color: rgba(128, 0, 128, 1)">$array</span><span style="color: rgba(0, 0, 0, 1)">);
</span>&lt;/script&gt;</pre>
</div>
<p><strong>HTML 实体编码</strong></p>
<p>&nbsp; &nbsp;默认情况下,Blade(以及辅助函数&nbsp;<code>e</code>)会对 HTML 实体进行双重编码。如果你想要禁止双重编码,可以在&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>AppServiceProvider</code></span>&nbsp;的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>boot</code></span>&nbsp;方法中调用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>Blade::withoutDoubleEncoding</code></span>&nbsp;方法:</p>
<div class="cnblogs_code">
<pre>&lt;?<span style="color: rgba(0, 0, 0, 1)">php

namespace App\Providers;

</span><span style="color: rgba(0, 0, 255, 1)">use</span><span style="color: rgba(0, 0, 0, 1)"> Illuminate\Support\Facades\Blade;
</span><span style="color: rgba(0, 0, 255, 1)">use</span><span style="color: rgba(0, 0, 0, 1)"> Illuminate\Support\ServiceProvider;

</span><span style="color: rgba(0, 0, 255, 1)">class</span> AppServiceProvider <span style="color: rgba(0, 0, 255, 1)">extends</span><span style="color: rgba(0, 0, 0, 1)"> ServiceProvider
{
    </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
   * Bootstrap any application services.
   *
   * @return void
   </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> boot()
    {
      Blade</span>::<span style="color: rgba(0, 0, 0, 1)">withoutDoubleEncoding();
    }
}</span></pre>
</div>
<h4 id="toc_6">Blade &amp; JavaScript 框架</h4>
<p>&nbsp; &nbsp;由于很多 JavaScript 框架也是用花括号来表示要显示在浏览器中的表达式,如 Vue,我们可以使用&nbsp;<code>@</code>&nbsp;符号来告诉 Blade 渲染引擎该表达式应该保持原生格式不作改动。比如:</p>
<div class="cnblogs_code">
<pre>&lt;h1&gt;Laravel&lt;/h1&gt;<span style="color: rgba(0, 0, 0, 1)">
Hello</span>, @{{ name }}.</pre>
</div>
<p>&nbsp; &nbsp;在本例中,<code>@</code>&nbsp;符在编译阶段会被 Blade 移除,但是,<code>{{ name }}</code>&nbsp;表达式将会保持不变,从而可以被 JavaScript 框架正常渲染。</p>
<p><code>&nbsp;<strong>@verbatim</strong></code><strong>指令</strong></p>
<p>&nbsp; &nbsp; &nbsp;如果你在模板中有很大一部分篇幅显示 JavaScript 变量,那么可以将这部分 HTML 封装在&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@verbatim</code>&nbsp;</span>指令中,这样就不需要在每个 Blade 输出表达式前加上&nbsp;<code>@</code>&nbsp;前缀:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">@verbatim
    </span>&lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>="container"&gt;<span style="color: rgba(0, 0, 0, 1)">
      Hello</span>, {{ name }}.
    &lt;/div&gt;<span style="color: rgba(0, 0, 0, 1)">
@endverbatim</span></pre>
</div>
<h3 id="toc_7">流程控制</h3>
<p>&nbsp; &nbsp;除了模板继承和数据显示之外,Blade 还为常用的 PHP 流程控制提供了便利操作,例如条件语句和循环,这些快捷操作提供了一个干净、简单的方式来处理 PHP 的流程控制,同时保持和 PHP 相应语句的相似性。</p>
<h4 id="toc_8">&nbsp; &nbsp;If 语句</h4>
<p>&nbsp; &nbsp; &nbsp;可以使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@if</code>&nbsp;,&nbsp;<code>@elseif</code>&nbsp;,&nbsp;<code>@else</code></span>&nbsp;和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@endif</code></span>&nbsp;来构造&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>if</code></span>&nbsp;语句,这些指令的功能和 PHP 相同:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(0, 128, 128, 1)">count</span>(<span style="color: rgba(128, 0, 128, 1)">$records</span>) === 1<span style="color: rgba(0, 0, 0, 1)">)
    I have one record</span>!<span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">elseif</span> (<span style="color: rgba(0, 128, 128, 1)">count</span>(<span style="color: rgba(128, 0, 128, 1)">$records</span>) &gt; 1<span style="color: rgba(0, 0, 0, 1)">)
    I have multiple records</span>!<span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">
    I don</span>'<span style="color: rgba(0, 0, 0, 1)">t have any records!
@endif</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;为方便起见,Blade 还提供了&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@unless</code></span>&nbsp;指令,表示除非:</p>
<div class="cnblogs_code">
<pre>@unless (Auth::<span style="color: rgba(0, 0, 0, 1)">check())
    You are not signed in</span>.<span style="color: rgba(0, 0, 0, 1)">
@endunless</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;此外,Blade 还提供了&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@isset</code>&nbsp;</span>和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@empty</code></span>&nbsp;指令,分别对应 PHP 的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>isset</code></span>&nbsp;和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>empty</code></span>&nbsp;方法:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">isset</span>(<span style="color: rgba(128, 0, 128, 1)">$records</span><span style="color: rgba(0, 0, 0, 1)">)
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> $records is defined and is not null...</span>
<span style="color: rgba(0, 0, 0, 1)">@endisset

@</span><span style="color: rgba(0, 0, 255, 1)">empty</span>(<span style="color: rgba(128, 0, 128, 1)">$records</span><span style="color: rgba(0, 0, 0, 1)">)
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> $records is "empty"...</span>
@endempty</pre>
</div>
<p>&nbsp; &nbsp;<strong>认证指令</strong></p>
<p><code>&nbsp; &nbsp;<span style="color: rgba(255, 102, 0, 1)">@auth</span></code><span style="color: rgba(255, 102, 0, 1)">&nbsp;</span>和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@guest</code></span>&nbsp;指令可用于快速判断当前用户是否登录:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">@auth
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 用户已登录...</span>
<span style="color: rgba(0, 0, 0, 1)">@endauth

@guest
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 用户未登录...</span>
@endguest</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;如果需要的话,你也可以在使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@auth</code>&nbsp;</span>和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@guest</code></span>&nbsp;的时候指定&nbsp;认证guard(详细请阅读安全认证那篇文章) :</p>
<div class="cnblogs_code">
<pre>@auth('admin'<span style="color: rgba(0, 0, 0, 1)">)
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> The user is authenticated...</span>
<span style="color: rgba(0, 0, 0, 1)">@endauth

@guest(</span>'admin'<span style="color: rgba(0, 0, 0, 1)">)
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> The user is not authenticated...</span>
@endguest</pre>
</div>
<p>&nbsp; &nbsp;<strong>Section 指令</strong></p>
<p>&nbsp; &nbsp; &nbsp;你可以使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@hasSection</code></span>&nbsp;指令判断某个 <span style="color: rgba(255, 102, 0, 1)">section</span> 中是否有内容:</p>
<div class="cnblogs_code">
<pre>@hasSection('navigation'<span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>="pull-right"&gt;<span style="color: rgba(0, 0, 0, 1)">
      @yield(</span>'navigation'<span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;/div&gt;

    &lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>="clearfix"&gt;&lt;/div&gt;<span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">endif</span></pre>
</div>
<h4 id="toc_9">&nbsp; &nbsp;Switch 语句</h4>
<p><code>&nbsp; &nbsp;<span style="color: rgba(255, 102, 0, 1)">switch</span></code>&nbsp;语句可以通过&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@switch</code>,<code>@case</code>,<code>@break</code>,<code>@default</code></span>&nbsp;和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@enswitch</code>&nbsp;</span>指令构建:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">switch</span>(<span style="color: rgba(128, 0, 128, 1)">$i</span><span style="color: rgba(0, 0, 0, 1)">)
    @</span><span style="color: rgba(0, 0, 255, 1)">case</span>(1<span style="color: rgba(0, 0, 0, 1)">)
      First </span><span style="color: rgba(0, 0, 255, 1)">case</span>...<span style="color: rgba(0, 0, 0, 1)">
      @</span><span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">

    @</span><span style="color: rgba(0, 0, 255, 1)">case</span>(2<span style="color: rgba(0, 0, 0, 1)">)
      Second </span><span style="color: rgba(0, 0, 255, 1)">case</span>...<span style="color: rgba(0, 0, 0, 1)">
      @</span><span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">

    @</span><span style="color: rgba(0, 0, 255, 1)">default</span>
      <span style="color: rgba(0, 0, 255, 1)">Default</span> <span style="color: rgba(0, 0, 255, 1)">case</span>...<span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">endswitch</span></pre>
</div>
<h4 id="toc_10">&nbsp; &nbsp;循环</h4>
<p>&nbsp; &nbsp; &nbsp;除了条件语句,Blade 还提供了简单的指令用于处理 PHP 的循环结构,同样,这些指令的功能和 PHP 对应功能完全一样:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(128, 0, 128, 1)">$i</span> = 0; <span style="color: rgba(128, 0, 128, 1)">$i</span> &lt; 10; <span style="color: rgba(128, 0, 128, 1)">$i</span>++<span style="color: rgba(0, 0, 0, 1)">)
    The </span><span style="color: rgba(0, 128, 128, 1)">current</span> value is {{ <span style="color: rgba(128, 0, 128, 1)">$i</span><span style="color: rgba(0, 0, 0, 1)"> }}
@</span><span style="color: rgba(0, 0, 255, 1)">endfor</span><span style="color: rgba(0, 0, 0, 1)">

@</span><span style="color: rgba(0, 0, 255, 1)">foreach</span> (<span style="color: rgba(128, 0, 128, 1)">$users</span> <span style="color: rgba(0, 0, 255, 1)">as</span> <span style="color: rgba(128, 0, 128, 1)">$user</span><span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;p&gt;This is user {{ <span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;id }}&lt;/p&gt;<span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">endforeach</span><span style="color: rgba(0, 0, 0, 1)">

@forelse (</span><span style="color: rgba(128, 0, 128, 1)">$users</span> <span style="color: rgba(0, 0, 255, 1)">as</span> <span style="color: rgba(128, 0, 128, 1)">$user</span><span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;li&gt;{{ <span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;name }}&lt;/li&gt;<span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">empty</span>
    &lt;p&gt;No users&lt;/p&gt;<span style="color: rgba(0, 0, 0, 1)">
@endforelse

@</span><span style="color: rgba(0, 0, 255, 1)">while</span> (<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;p&gt;I'<span style="color: rgba(0, 0, 0, 1)">m looping forever.&lt;/p&gt;
@endwhile</span></pre>
</div>
<blockquote>
<p>注:在循环的时候可以使用&nbsp;<code>$loop</code>&nbsp;变量获取循环信息,例如是否是循环的第一个或最后一个迭代。</p>
</blockquote>
<p>&nbsp; &nbsp; &nbsp;使用循环的时候还可以结束循环或跳出当前迭代:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">foreach</span> (<span style="color: rgba(128, 0, 128, 1)">$users</span> <span style="color: rgba(0, 0, 255, 1)">as</span> <span style="color: rgba(128, 0, 128, 1)">$user</span><span style="color: rgba(0, 0, 0, 1)">)
    @</span><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;type == 1<span style="color: rgba(0, 0, 0, 1)">)
      @</span><span style="color: rgba(0, 0, 255, 1)">continue</span><span style="color: rgba(0, 0, 0, 1)">
    @</span><span style="color: rgba(0, 0, 255, 1)">endif</span>

    &lt;li&gt;{{ <span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;name }}&lt;/li&gt;<span style="color: rgba(0, 0, 0, 1)">

    @</span><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;<span style="color: rgba(0, 0, 255, 1)">number</span> == 5<span style="color: rgba(0, 0, 0, 1)">)
      @</span><span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">
    @</span><span style="color: rgba(0, 0, 255, 1)">endif</span><span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">endforeach</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;还可以使用指令声明来引入条件:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">foreach</span> (<span style="color: rgba(128, 0, 128, 1)">$users</span> <span style="color: rgba(0, 0, 255, 1)">as</span> <span style="color: rgba(128, 0, 128, 1)">$user</span><span style="color: rgba(0, 0, 0, 1)">)
    @</span><span style="color: rgba(0, 0, 255, 1)">continue</span>(<span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;type == 1<span style="color: rgba(0, 0, 0, 1)">)
      </span>&lt;li&gt;{{ <span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;name }}&lt;/li&gt;<span style="color: rgba(0, 0, 0, 1)">
    @</span><span style="color: rgba(0, 0, 255, 1)">break</span>(<span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;<span style="color: rgba(0, 0, 255, 1)">number</span> == 5<span style="color: rgba(0, 0, 0, 1)">)
@</span><span style="color: rgba(0, 0, 255, 1)">endforeach</span></pre>
</div>
<h4 id="toc_11"><code>&nbsp; $loop</code>变量</h4>
<p>&nbsp; &nbsp; &nbsp;在循环的时候,可以在循环体中使用&nbsp;<code>$loop</code>&nbsp;变量,该变量提供了一些有用的信息,比如当前循环索引,以及当前循环是不是第一个或最后一个迭代:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">foreach</span> (<span style="color: rgba(128, 0, 128, 1)">$users</span> <span style="color: rgba(0, 0, 255, 1)">as</span> <span style="color: rgba(128, 0, 128, 1)">$user</span><span style="color: rgba(0, 0, 0, 1)">)
    @</span><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(128, 0, 128, 1)">$loop</span>-&gt;<span style="color: rgba(0, 0, 0, 1)">first)
      This is the first iteration</span>.<span style="color: rgba(0, 0, 0, 1)">
    @</span><span style="color: rgba(0, 0, 255, 1)">endif</span><span style="color: rgba(0, 0, 0, 1)">

    @</span><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(128, 0, 128, 1)">$loop</span>-&gt;<span style="color: rgba(0, 0, 0, 1)">last)
      This is the last iteration</span>.<span style="color: rgba(0, 0, 0, 1)">
    @</span><span style="color: rgba(0, 0, 255, 1)">endif</span>

    &lt;p&gt;This is user {{ <span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;id }}&lt;/p&gt;<span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">endforeach</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;如果是嵌套循环,可以通过&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>$loop</code>&nbsp;</span>变量的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>parent</code></span>&nbsp;属性访问父级循环:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">foreach</span> (<span style="color: rgba(128, 0, 128, 1)">$users</span> <span style="color: rgba(0, 0, 255, 1)">as</span> <span style="color: rgba(128, 0, 128, 1)">$user</span><span style="color: rgba(0, 0, 0, 1)">)
    @</span><span style="color: rgba(0, 0, 255, 1)">foreach</span> (<span style="color: rgba(128, 0, 128, 1)">$user</span>-&gt;posts <span style="color: rgba(0, 0, 255, 1)">as</span> <span style="color: rgba(128, 0, 128, 1)">$post</span><span style="color: rgba(0, 0, 0, 1)">)
      @</span><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(128, 0, 128, 1)">$loop</span>-&gt;parent-&gt;<span style="color: rgba(0, 0, 0, 1)">first)
            This is first iteration of the parent loop</span>.<span style="color: rgba(0, 0, 0, 1)">
      @</span><span style="color: rgba(0, 0, 255, 1)">endif</span><span style="color: rgba(0, 0, 0, 1)">
    @</span><span style="color: rgba(0, 0, 255, 1)">endforeach</span><span style="color: rgba(0, 0, 0, 1)">
@</span><span style="color: rgba(0, 0, 255, 1)">endforeach</span></pre>
</div>
<p><code>&nbsp; &nbsp;$loop</code>&nbsp;变量还提供了其他一些有用的属性:</p>
<table style="height: 221px; width: 963px">
<thead>
<tr><th>属性</th><th>描述</th></tr>
</thead>
<tbody>
<tr>
<td><code>$loop-&gt;index</code></td>
<td>当前循环迭代索引 (从0开始)</td>
</tr>
<tr>
<td><code>$loop-&gt;iteration</code></td>
<td>当前循环迭代 (从1开始)</td>
</tr>
<tr>
<td><code>$loop-&gt;remaining</code></td>
<td>当前循环剩余的迭代</td>
</tr>
<tr>
<td><code>$loop-&gt;count</code></td>
<td>迭代数组元素的总数量</td>
</tr>
<tr>
<td><code>$loop-&gt;first</code></td>
<td>是否是当前循环的第一个迭代</td>
</tr>
<tr>
<td><code>$loop-&gt;last</code></td>
<td>是否是当前循环的最后一个迭代</td>
</tr>
<tr>
<td><code>$loop-&gt;depth</code></td>
<td>当前循环的嵌套层级</td>
</tr>
<tr>
<td><code>$loop-&gt;parent</code></td>
<td>嵌套循环中的父级循环变量</td>
</tr>
</tbody>
</table>
<h4 id="toc_12">&nbsp; &nbsp;注释</h4>
<p>&nbsp; &nbsp; &nbsp;Blade 还允许你在视图中定义注释,然而,不同于 HTML 注释,Blade 注释并不会包含到 HTML 中被返回:</p>
<div class="cnblogs_code">
<pre>{{-- This comment will not be present in the rendered HTML --}}</pre>
</div>
<h4 id="toc_13">&nbsp; &nbsp;PHP</h4>
<p>&nbsp; &nbsp; &nbsp;在一些场景中,嵌入 PHP 代码到视图中很有用,你可以使用&nbsp;<code>@php</code>&nbsp;指令在模板中执行一段原生 PHP 代码:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">@php
    </span><span style="color: rgba(0, 128, 0, 1)">//
</span>@endphp</pre>
</div>
<blockquote>
<p>注:尽管 Blade 提供了这个特性,如果过于频繁地使用它意味着你在视图模板中嵌入了过多的业务逻辑,需要注意。</p>
</blockquote>
<h3 id="toc_14">表单</h3>
<h4 id="toc_15">&nbsp; &nbsp;CSRF 字段</h4>
<p>&nbsp; &nbsp; &nbsp;任何时候你想要在应用中定义 HTML 表单,都需要在表单中引入隐藏的 CSRF 令牌字段,以便&nbsp; CSRF保护中间件可以通过请求验证。你可以使用 Blade 指令&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@csrf</code></span>&nbsp;来生成令牌字段:</p>
<div class="cnblogs_code">
<pre>&lt;form method="POST" action="/profile"&gt;<span style="color: rgba(0, 0, 0, 1)">
    @csrf

    </span>...
&lt;/form&gt;</pre>
</div>
<h4 id="toc_16">&nbsp; &nbsp;方法字段</h4>
<p>&nbsp; &nbsp; &nbsp;由于 HTML 表单不能发起&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>PUT</code></span>、<span style="color: rgba(255, 102, 0, 1)"><code>PATCH</code></span>&nbsp;以及&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>DELETE</code></span>&nbsp;请求,你需要添加隐藏的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>_method</code></span>&nbsp;字段来伪造这些 HTTP 请求。Blade 指令&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@method</code>&nbsp;</span>可用于创建这个字段:</p>
<div class="cnblogs_code">
<pre>&lt;form action="/foo/bar" method="POST"&gt;<span style="color: rgba(0, 0, 0, 1)">
    @method(</span>'PUT'<span style="color: rgba(0, 0, 0, 1)">)

    </span>...
&lt;/form&gt;</pre>
</div>
<h3 id="toc_17">&nbsp; &nbsp;包含子视图</h3>
<p>&nbsp; &nbsp; &nbsp;Blade 的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@include</code></span>&nbsp;指令允许你很轻松地在一个视图中包含另一个 Blade 视图,所有父级视图中变量在被包含的子视图中依然有效:</p>
<div class="cnblogs_code">
<pre>&lt;div&gt;<span style="color: rgba(0, 0, 0, 1)">
    @</span><span style="color: rgba(0, 0, 255, 1)">include</span>('shared.errors'<span style="color: rgba(0, 0, 0, 1)">)

    </span>&lt;form&gt;
      &lt;!-- Form Contents --&gt;
    &lt;/form&gt;
&lt;/div&gt;</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;上述指令会在当前目录下的&nbsp;<code>shared</code>&nbsp;子目录中寻找&nbsp;<code>errors.blade.php</code>&nbsp;文件并将其内容引入当前视图。</p>
<p>&nbsp; &nbsp; &nbsp;尽管被包含的视图可以继承所有父视图中的数据,你还可以传递额外参数到被包含的视图:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 0, 255, 1)">include</span>('view.name', ['some' =&gt; 'data'])</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;当然,如果你尝试包含一个不存在的视图,Laravel 会抛出错误,如果你想要包含一个有可能不存在的视图,可以使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@includeIf</code></span>&nbsp;指令:</p>
<div class="cnblogs_code">
<pre>@includeIf('view.name', ['some' =&gt; 'data'])</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;如果包含的视图取决于一个给定的布尔条件,可以使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@includeWhen</code>&nbsp;</span>指令:</p>
<div class="cnblogs_code">
<pre>@includeWhen(<span style="color: rgba(128, 0, 128, 1)">$boolean</span>, 'view.name', ['some' =&gt; 'data'])</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;要包含给定数组中的第一个视图,可以使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@includeFirst</code>&nbsp;</span>指令:</p>
<div class="cnblogs_code">
<pre>@includeFirst(['custom.admin', 'admin'], ['some' =&gt; 'data'])</pre>
</div>
<blockquote>
<p>注:不要在 Blade 视图中使用&nbsp;<code>__DIR__</code>&nbsp;和&nbsp;<code>__FILE__</code>&nbsp;常量,因为它们会指向缓存视图的路径。</p>
</blockquote>
<p>&nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@include</code></span>&nbsp;和&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@component</code></span>&nbsp;有什么区别,两者有共同之处,都用于将其他内容引入当前视图,我理解的区别在于&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@include</code></span>&nbsp;用于粗粒度的视图包含,<span style="color: rgba(255, 102, 0, 1)"><code>@component</code></span>&nbsp;用于细粒度的组件引入,<span style="color: rgba(255, 102, 0, 1)"><code>@component</code></span>&nbsp;通过插槽机制对引入视图内容可以进行更加细粒度的控制,如果你只是引入一块视图内容片段,用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@include</code></span>&nbsp;即可,如果想要在当前视图对引入视图内容片段进行调整和控制,则可以考虑使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@component</code></span>。</p>
<p>&nbsp; &nbsp;<strong>为子视图引入设置别名</strong></p>
<p>&nbsp; &nbsp; &nbsp;如果引入的子视图存放在某个子目录中,你可能希望为它们设置别名以便于访问。例如,假设 Blade 子视图存放在&nbsp;<code>resources/views/includes/input.blade.php</code>&nbsp;中,对应内容如下:</p>
<div class="cnblogs_code">
<pre>&lt;input type="{{ <span style="color: rgba(128, 0, 128, 1)">$type</span> ?? 'text' }}"&gt;</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;你可以使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>include</code></span>&nbsp;方法来为这个引入设置别名,将&nbsp;<code>includes.input</code>&nbsp;设置为&nbsp;<code>input</code>,通常,该操作在&nbsp;<code>AppServiceProvider</code>&nbsp;的&nbsp;<code>boot</code>&nbsp;方法中完成:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">use</span><span style="color: rgba(0, 0, 0, 1)"> Illuminate\Support\Facades\Blade;

Blade</span>::<span style="color: rgba(0, 0, 255, 1)">include</span>('includes.input', 'input');</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;这样一来,就可以将设置的别名作为 Blade 指令用来渲染子视图了:</p>
<div class="cnblogs_code">
<pre>@input(['type' =&gt; 'email'])</pre>
</div>
<h4 id="toc_18">&nbsp; &nbsp;在视图中渲染集合数据</h4>
<p>&nbsp; &nbsp; &nbsp;你可以使用 Blade 的&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@each</code>&nbsp;</span>指令通过一行代码循环引入多个局部视图:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 128, 128, 1)">each</span>('view.name', <span style="color: rgba(128, 0, 128, 1)">$jobs</span>, 'job')</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;该指令的第一个参数是数组或集合中每个元素要渲染的局部视图,第二个参数是你希望迭代的数组或集合,第三个参数是要分配给当前视图的变量名。举个例子,如果你要迭代一个&nbsp;<code>jobs</code>&nbsp;数组,通常你需要在局部视图中访问&nbsp;<code>$job</code>&nbsp;变量。在局部视图中可以通过&nbsp;<code>key</code>&nbsp;变量访问当前迭代的键。</p>
<p>&nbsp; &nbsp; &nbsp;你还可以传递第四个参数到&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@each</code>&nbsp;</span>指令,该参数用于指定给定数组为空时渲染的视图:</p>
<div class="cnblogs_code">
<pre>@<span style="color: rgba(0, 128, 128, 1)">each</span>('view.name', <span style="color: rgba(128, 0, 128, 1)">$jobs</span>, 'job', 'view.empty')</pre>
</div>
<blockquote>
<p>注:通过&nbsp;<code>@each</code>&nbsp;渲染的视图不会从父视图中继承变量,如果子视图需要这个变量,可以使用&nbsp;<code>@foreach</code>&nbsp;和&nbsp;<code>@include</code>&nbsp;指令来替代。</p>
</blockquote>
<h3 id="toc_19">&nbsp; &nbsp;堆栈</h3>
<p>&nbsp; &nbsp; &nbsp;Blade 允许你推送内容到命名堆栈,以便在其他视图或布局中渲染。这在子视图中引入指定 JavaScript 库时很有用:</p>
<div class="cnblogs_code">
<pre>@push('scripts'<span style="color: rgba(0, 0, 0, 1)">)
    </span>&lt;script src="/example.js"&gt;&lt;/script&gt;<span style="color: rgba(0, 0, 0, 1)">
@endpush</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;推送次数不限,要渲染完整的堆栈内容,传递堆栈名称到&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@stack</code></span>&nbsp;指令即可:</p>
<div class="cnblogs_code">
<pre>&lt;head&gt;
    &lt;!-- Head Contents --&gt;<span style="color: rgba(0, 0, 0, 1)">

    @stack(</span>'scripts'<span style="color: rgba(0, 0, 0, 1)">)
</span>&lt;/head&gt;</pre>
</div>
<p>&nbsp; &nbsp; &nbsp;如果你想要将内容显示在堆栈开头,需要使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@prepend</code>&nbsp;</span>指令:</p>
<div class="cnblogs_code">
<pre>@push('scripts'<span style="color: rgba(0, 0, 0, 1)">)
    This will be second</span>...<span style="color: rgba(0, 0, 0, 1)">
@endpush

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Later...</span>
<span style="color: rgba(0, 0, 0, 1)">
@prepend(</span>'scripts'<span style="color: rgba(0, 0, 0, 1)">)
    This will be first</span>...<span style="color: rgba(0, 0, 0, 1)">
@endprepend</span></pre>
</div>
<h3 id="toc_20">&nbsp; &nbsp;服务注入</h3>
<p><code>&nbsp; &nbsp;<span style="color: rgba(255, 102, 0, 1)">@inject</span></code>&nbsp;指令可以用于从服务容器中获取服务,传递给&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@inject</code></span>&nbsp;的第一个参数是服务对应的变量名,第二个参数是要解析的服务类名或接口名:</p>
<div class="cnblogs_code">
<pre>@inject('metrics', 'App\Services\MetricsService'<span style="color: rgba(0, 0, 0, 1)">)

</span>&lt;div&gt;<span style="color: rgba(0, 0, 0, 1)">
    Monthly Revenue</span>: {{ <span style="color: rgba(128, 0, 128, 1)">$metrics</span>-&gt;monthlyRevenue() }}.
&lt;/div&gt;</pre>
</div>
<h3 id="toc_21">扩展 Blade</h3>
<p>&nbsp; &nbsp;Blade 甚至还允许你自定义指令,可以使用&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>directive</code></span>&nbsp;方法来注册一个指令。当 Blade 编译器遇到该指令,将会传入参数并调用提供的回调。</p>
<p>&nbsp; &nbsp;下面的例子创建了一个&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>@datetime($var)</code>&nbsp;</span>指令格式化给定的&nbsp;<code>DateTime</code>&nbsp;的实例&nbsp;<code>$var</code>:</p>
<div class="cnblogs_code">
<pre>&lt;?<span style="color: rgba(0, 0, 0, 1)">php

namespace App\Providers;

</span><span style="color: rgba(0, 0, 255, 1)">use</span><span style="color: rgba(0, 0, 0, 1)"> Illuminate\Support\Facades\Blade;
</span><span style="color: rgba(0, 0, 255, 1)">use</span><span style="color: rgba(0, 0, 0, 1)"> Illuminate\Support\ServiceProvider;

</span><span style="color: rgba(0, 0, 255, 1)">class</span> AppServiceProvider <span style="color: rgba(0, 0, 255, 1)">extends</span><span style="color: rgba(0, 0, 0, 1)"> ServiceProvider
{
    </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
   * Perform post-registration booting of services.
   *
   * @return void
   </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> boot()
    {
      \Blade</span>::directive('datetime', <span style="color: rgba(0, 0, 255, 1)">function</span>(<span style="color: rgba(128, 0, 128, 1)">$expression</span><span style="color: rgba(0, 0, 0, 1)">) {
            </span><span style="color: rgba(0, 0, 255, 1)">return</span> "&lt;?php echo (<span style="color: rgba(128, 0, 128, 1)">$expression</span>)-&gt;format('m/d/Y H:i'); ?&gt;"<span style="color: rgba(0, 0, 0, 1)">;
      });
    }

    </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
   * 在容器中注册绑定.
   *
   * @return void
   </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> register()
    {
      </span><span style="color: rgba(0, 128, 0, 1)">//
</span><span style="color: rgba(0, 0, 0, 1)">    }
}</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;正如你所看到的,我们可以将&nbsp;<code>format</code>&nbsp;方法应用到任何传入指令的表达式上,所以,在本例中,该指令最终生成的 PHP 代码如下:</p>
<div class="cnblogs_code">
<pre>&lt;?php <span style="color: rgba(0, 0, 255, 1)">echo</span> (<span style="color: rgba(128, 0, 128, 1)">$var</span>)-&gt;format('Y/m/d H:i'); ?&gt;</pre>
</div>
<blockquote>
<p>注:更新完 Blade 指令逻辑后,必须删除所有的 Blade 缓存视图。缓存的 Blade 视图可以通过 Artisan 命令&nbsp;<code>view:clear</code>&nbsp;移除。</p>
</blockquote>
<h4 id="toc_22">&nbsp; &nbsp;自定义 If 语句</h4>
<p>&nbsp; &nbsp; &nbsp;在定义一些简单、自定义的条件语句时,编写自定义指令往往复杂性大于必要性,因为这个原因,Blade 提供了一个&nbsp;<span style="color: rgba(255, 102, 0, 1)"><code>Blade::if</code></span>&nbsp;方法通过闭包的方式快速定义自定义的条件指令,例如,我们来自定义一个条件来检查当前应用的环境,我们可以在&nbsp;<code>AppServiceProvider</code>&nbsp;的&nbsp;<code>boot</code>&nbsp;方法中定义这段逻辑:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">use</span><span style="color: rgba(0, 0, 0, 1)"> Illuminate\Support\Facades\Blade;

</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* Perform post-registration booting of services.
*
* @return void
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> boot()
{
    \Blade</span>::<span style="color: rgba(0, 0, 255, 1)">if</span>('env', <span style="color: rgba(0, 0, 255, 1)">function</span> (<span style="color: rgba(128, 0, 128, 1)">$environment</span><span style="color: rgba(0, 0, 0, 1)">) {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> app()-&gt;environment(<span style="color: rgba(128, 0, 128, 1)">$environment</span><span style="color: rgba(0, 0, 0, 1)">);
    });
}</span></pre>
</div>
<p>&nbsp; &nbsp; &nbsp;定义好自定义条件后,就可以在模板中使用了:</p>
<div class="cnblogs_code">
<pre>@env('local'<span style="color: rgba(0, 0, 0, 1)">)
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> The application is in the local environment...</span>
@elseenv('testing'<span style="color: rgba(0, 0, 0, 1)">)
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> The application is in the testing environment...</span>
@<span style="color: rgba(0, 0, 255, 1)">else</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> The application is not in the local or testing environment...</span>
@endenv</pre>
</div>
<p>&nbsp;</p><br><br>
来源:https://www.cnblogs.com/mzhaox/p/11274891.html
頁: [1]
查看完整版本: 前端开发 —— Blade 模板引擎