Templat Bilah
- Blade & JavaScript Framework
- Switch Statement
- Loop
- Loop
- PHP
- Pengenalan
- Blade ialah enjin templat yang ringkas tetapi berkuasa yang disediakan oleh Laravel. Tidak seperti enjin templat PHP popular yang lain, Blade tidak menyekat anda daripada menggunakan kod PHP asli dalam paparan anda. Semua fail paparan Blade akan disusun ke dalam kod PHP asli dan dicache, dan tidak akan dikompilasi semula melainkan ia diubah suai, yang bermaksud bahawa Blade pada asasnya tidak akan menambah apa-apa beban pada aplikasi anda. Fail paparan bilah menggunakan direktori
- .
Tentukan Reka Letak
Dua kelebihan utama Blade ialah
warisan templat danblok . Untuk bermula, mari kita mulakan dengan contoh mudah. Mula-mula, mari kita lihat susun atur halaman "utama". Memandangkan kebanyakan aplikasi web menggunakan reka letak yang sama merentas halaman yang berbeza, adalah mudah untuk menentukan paparan susun atur Blade tunggal:模板继承
和区块
。为方便入门,让我们先通过一个简单的例子来上手。首先,我们来研究一个「主」页面布局。因为大多数 web 应用会在不同的页面中使用相同的布局方式,因此可以很方便地定义单个 Blade 布局视图:<!-- 保存在 resources/views/layouts/app.blade.php 文件中 --> <html> <head> <title>App Name - @yield('title')</title> </head> <body> @section('sidebar') This is the master sidebar. @show <div class="container"> @yield('content') </div> </body> </html>
如你所见,该文件包含了典型的 HTML 语法。不过,请注意
@section
和@yield
指令。@section
指令定义了视图的一部分内容,而@yield
指令是用来显示指定部分的内容。现在,我们已经定义好了这个应用程序的布局,接下来,我们定义一个继承此布局的子页面。
扩展布局
在定义一个子视图时,使用 Blade 的
@extends
指令指定子视图要「继承」的视图。扩展自 Blade 布局的视图可以使用@section
指令向布局片段注入内容。就如前面的示例中所示,这些片段的内容将由布局中的显示在布局中@yield
指令控制显示:<!-- 保存在 resources/views/child.blade.php 中 --> @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @parent <p>This is appended to the master sidebar.</p> @endsection @section('content') <p>This is my body content.</p> @endsection
在这个示例中,
sidebar
片段利用@parent
指令向布局的 sidebar 追加(而非覆盖)内容。 在渲染视图时,@parent
指令将被布局中的内容替换。{tip} 和上一个示例相反,这里的
sidebar
片段使用@endsection
代替@show
来结尾。@endsection
指令仅定义了一个片段,@show
则在定义的同时 立即 yield 这个片段。Blade 视图可以使用全局
view
助手自路由中返回:Route::get('blade', function () { return view('child'); });
组件 & 插槽
组件和插槽提供了与片段和布局类似的好处;不过组件和插槽的思维模型更易于理解。我们先来看一个可复用的「alert」组件,我们想在应用中复用它:
<!-- /resources/views/alert.blade.php --> <div class="alert alert-danger"> {{ $slot }} </div>
{{ $slot }}
变量将包含我们想要注入到组件的内容。现在,我们使用 Blade 的@component
指令构建这个组件:@component('alert') <strong>Whoops!</strong> Something went wrong! @endcomponent
有时候为一个组件定义多个插槽是很有用的。修改 alert 组件以允许其注入 「title」。命名插槽可以通过与其匹配的 「回显」 变量显示:
<!-- /resources/views/alert.blade.php --> <div class="alert alert-danger"> <div class="alert-title">{{ $title }}</div> {{ $slot }} </div>
现在,我们能够使用
@slot
指令向命名插槽注入内容。不在@slot
指令内的内容都将传递给组件中的$slot
@component('alert') @slot('title') Forbidden @endslot You are not allowed to access this resource!@endcomponent
Seperti yang anda lihat, fail ini mengandungi sintaks HTML biasa. Walau bagaimanapun, sila ambil perhatian tentang arahan@section
dan@yield
. Arahan@section
mentakrifkan sebahagian daripada paparan dan arahan@yield
digunakan untuk memaparkan kandungan bahagian yang ditentukan. Sekarang kami telah menentukan reka letak aplikasi ini, seterusnya, kami menentukan subhalaman yang mewarisi reka letak ini. 🎜🎜🎜🎜🎜Melanjutkan reka letak🎜🎜Apabila mentakrifkan subview, gunakan Blade's The@extends
arahan menentukan pandangan untuk "diwarisi" oleh subview. Paparan yang memanjangkan reka letak Blade boleh menyuntik kandungan ke dalam bahagian reka letak menggunakan arahan@section
. Seperti yang ditunjukkan dalam contoh sebelumnya, kandungan serpihan ini akan dipaparkan oleh arahan@yield
dalam reka letak: 🎜@component('alert', ['foo' => 'bar']) ... @endcomponent
🎜Dalam contoh ini,bar sisi
Fragmen menggunakan < arahan code>@parent untuk menambahkan (bukan menulis ganti) kandungan pada bar sisi reka letak. Apabila paparan dipaparkan, arahan@parent
akan digantikan dengan kandungan dalam reka letak. 🎜🎜{tip} Bertentangan dengan contoh sebelumnya, di sini serpihan
🎜Paparan bilah boleh dikembalikan daripada laluan menggunakan pembantubar sisi
berakhir dengan@endsection
dan bukannya@show
. Arahan@endsection
hanya mentakrifkan bahagian, manakala@show
menghasilkan bahagian ini serta-merta semasa mentakrifkannya. 🎜view
global: 🎜use Illuminate\Support\Facades\Blade; Blade::component('components.alert', 'alert');
🎜🎜🎜Komponen & Slot
🎜Komponen dan slot memberikan faedah yang serupa kepada serpihan dan reka letak tetapi model mental komponen dan slot lebih mudah difahami. Mula-mula kita lihat komponen "alert" boleh guna semula yang ingin kita gunakan semula dalam aplikasi kita: 🎜@alert(['type' => 'danger']) You are not allowed to access this resource!@endalert
🎜{{ $slot }}
Pembolehubah akan mengandungi kandungan yang ingin kita masukkan ke dalam komponen . Sekarang, kami membina komponen ini menggunakan arahan@component
Blade: 🎜@alert You are not allowed to access this resource!@endalert
🎜Kadangkala ia berguna untuk menentukan berbilang slot untuk komponen. Ubah suai komponen amaran untuk membolehkannya menyuntik "tajuk". Slot yang dinamakan boleh dipaparkan melalui pembolehubah "gema" yang sepadan: 🎜Route::get('greeting', function () { return view('welcome', ['name' => 'Samantha']); });
🎜 Kini kita boleh menyuntik kandungan ke dalam slot yang dinamakan menggunakan arahan@slot
. Kandungan yang tidak berada dalam arahan@slot
akan dihantar kepada pembolehubah$slot
dalam komponen: 🎜Hello, {{ $name }}.
🎜🎜Menyalurkan data tambahan kepada komponen
Kadangkala anda mungkin perlu menghantar data tambahan kepada komponen. Dalam kes ini, data yang mengandungi boleh disusun ke dalam tatasusunan sebagai parameter kedua arahan
@component
. Semua data akan diberikan kepada templat komponen sebagai perubahan:@component
指令的第二个参数。所有的数据将作为变更提供给组件模板:The current UNIX timestamp is {{ time() }}.
给组件起别名
如果组件存储在子目录中,你可能希望给它们起个别名以方便访问。举例来说,如果一个 Blade 组件存储在
resources/views/components/alert.blade.php
中,. 就可以使用component
方法将components.alert
的别名命名为alert
。. 通常情况下,这一过程将在AppServiceProvider
的boot
方法中完成:Hello, {!! $name !!}.
一旦组件有了别名,就可以使用一条指令渲染它:
<script> var app = <?php echo json_encode($array); ?>; </script>
如果没有额外的插槽,还可以省略组件参数:
<script> var app = @json($array); </script>
显示数据
可以通过包裹在双花括号内的变量显示传递给 Blade 视图的数据。比如给出如下路由:
<?php namespace App\Providers; use Illuminate\Support\Facades\Blade; use Illuminate\Support\ServiceProvider; class AppServiceProvider extends ServiceProvider{ /** * 引导任意应用服务。 * * @return void */ public function boot() { Blade::withoutDoubleEncoding(); } }
就可以这样利用
name
变量显示其内容:<h1>Laravel</h1>Hello, @{{ name }}.
{tip} Blade
{{ }}
语句是自动经过 PHP 的htmlspecialchars
函数传递来防范 XSS 攻击的。不限于显示传递给视图的变量的内容,你还可以显示任一 PHP 函数的结果。实际上,你可以在 Blade 的回显语句中放置你想要的任意 PHP 代码:
@verbatim <div class="container"> Hello, {{ name }}. </div>@endverbatim
显示非转义字符
默认情况下, Blade 中
{{ }}
语句自动经由 PHP 的htmlspecialchars
函数传递以防范 XSS 攻击。如果不希望数据被转义,可以使用下面的语法:@if (count($records) === 1) I have one record! @elseif (count($records) > 1) I have multiple records! @else I don't have any records! @endif
{note} 在回显应用的用户提供的内容时需要谨慎小心。在显示用户提供的数据时,有必要一直使用双花括号语法转义来防范 XSS 攻击。
渲染 JSON
有时,为了初始化一个 JavaScript 变量,你可能会向视图传递一个数据,并将其渲染成 JSON:
@unless (Auth::check()) You are not signed in.@endunless
不过,你可以使用
@json
Blade 指令代替手动调用json_encode
函数:@isset($records) // $records 被定义且不是 null... @endisset @empty($records) // $records 为空... @endempty
HTML 实体编码
默认情况下,Blade (以及 Laravel 的
e
助手)将对 HTML 实体双重编码。如果要禁用双重编码,可以在AppServiceProvider
的boot
中调用Blade::withoutDoubleEncoding
@auth // 此用户身份已验证...@endauth @guest // 此用户身份未验证...@endguest
Alias komponen Jika komponen disimpan dalam subdirektori, anda mungkin mahu untuk memberi mereka Alias untuk akses yang lebih mudah. Contohnya, jika komponen Blade disimpan dalam
resources/views/components/alert.blade.php
, anda boleh menggunakan kaedahcomponent
untuk mengemas kinicomponents.alert Alias untuk
dinamakanalert
. . Biasanya, proses ini akan dilakukan dalam kaedahboot
AppServiceProvider
:@auth('admin') // 此用户身份已验证...@endauth @guest('admin') // 此用户身份未验证...@endguest
Setelah komponen mempunyai alias, ia boleh diberikan menggunakan satu arahan:@hasSection('navigation') <div class="pull-right"> @yield('navigation') </div> <div class="clearfix"> </div> @endif
🎜Anda juga boleh meninggalkan parameter komponen jika tiada slot tambahan: 🎜@switch($i) @case(1) First case... @break @case(2) Second case... @break @default Default case...@endswitch
🎜🎜🎜🎜Memaparkan data
🎜Data yang dihantar ke paparan Blade boleh dipaparkan melalui pembolehubah yang dibalut dengan pendakap kerinting berganda. Contohnya, diberikan laluan berikut: 🎜@for ($i = 0; $i < 10; $i++) The current value is {{ $i }} @endfor @foreach ($users as $user) <p>This is user {{ $user->id }}</p> @endforeach @forelse ($users as $user) <li>{{ $user->name }}</li> @empty <p>No users</p> @endforelse @while (true) <p>I'm looping forever.</p> @endwhile
🎜 Anda boleh menggunakan pembolehubahname
untuk memaparkan kandungannya: 🎜@foreach ($users as $user) @if ($user->type == 1) @continue @endif <li>{{ $user->name }}</li> @if ($user->number == 5) @break @endif@endforeach
🎜{tip} Blade
🎜Anda tidak terhad kepada memaparkan kandungan pembolehubah yang dihantar ke paparan, anda juga boleh memaparkan hasil sebarang fungsi PHP. Malah, anda boleh meletakkan sebarang kod PHP yang anda mahukan dalam pernyataan gema Blade: 🎜{{ }}
pernyataan adalah automatik Dilalui melalui fungsihtmlspecialchars
PHP untuk menghalang serangan XSS. 🎜@foreach ($users as $user) @continue($user->type == 1) <li>{{ $user->name }}</li> @break($user->number == 5) @endforeach
🎜🎜Memaparkan aksara yang tidak dilepaskan 🎜🎜Secara lalai,{{ } Penyataan } dalam Blade dihantar secara automatik melalui fungsi htmlspecialchars
PHP untuk mengelakkan serangan XSS. Jika anda tidak mahu data itu terlepas, anda boleh menggunakan sintaks berikut: 🎜@foreach ($users as $user) @if ($loop->first) This is the first iteration. @endif @if ($loop->last) This is the last iteration. @endif <p>This is user {{ $user->id }}</p> @endforeach
🎜{note} Berhati-hati apabila menggemakan kandungan yang dibekalkan pengguna daripada aplikasi anda. Apabila memaparkan data yang dibekalkan pengguna, adalah perlu untuk sentiasa menggunakan sintaks pendakap kerinting berganda melarikan diri untuk melindungi daripada serangan XSS. 🎜
🎜🎜Rendering JSON🎜🎜Kadangkala, untuk memulakan pembolehubah JavaScript, anda mungkin menghantar data ke paparan dan menjadikannya JSON: 🎜@foreach ($users as $user) @foreach ($user->posts as $post) @if ($loop->parent->first) This is first iteration of the parent loop. @endif @endforeach@endforeach
🎜Walau bagaimanapun, anda boleh menggunakan arahan@json
Blade dan bukannya memanggil fungsijson_encode
secara manual: 🎜{{-- This comment will not be present in the rendered HTML --}}
🎜 🎜Pengekodan Entiti HTML🎜🎜Secara lalai, Blade (dan pembantue
Laravel) akan mengekod dua kali entiti HTML. Jika anda ingin melumpuhkan pengekodan berganda, anda boleh memanggil kaedahBlade::withoutDoubleEncoding
dalamAppServiceProvider
boot
: 🎜@php //@endphp
🎜🎜🎜🎜 🎜🎜Rangka Kerja Blade & JavaScript
Memandangkan banyak rangka kerja JavaScript juga menggunakan pendakap kerinting untuk menunjukkan bahawa ungkapan yang diberikan akan dipaparkan dalam penyemak imbas, anda boleh menggunakan simbol
@
untuk memberitahu enjin rendering Blade bahawa ungkapan harus kekal tidak berubah. Contohnya adalah seperti berikut:@
符号通知 Blade 渲染引擎某个表达式应保持不变。示例如下:<form method="POST" action="/profile"> @csrf ... </form>
在这个例子中,
@
符号将被 Blade 删除;在 Blade 引擎中{{ name }}
表达式将保持不变,取而代之的是 JavaScript 引擎将渲染该表达式。@verbatim
指令如果要在大段的模板中 JavaScript 变量,可以将 HTML 包裹在
@verbatim
指令中,这样就不需要为每个 Blade 回显语句添加@
符号:<form action="/foo/bar" method="POST"> @method('PUT') ... </form>
控制结构
除了模板继承和数据显示, Blade 还为分支和循环等 PHP 控制结构提供了方便的快捷方式。这些快捷方式提供了干净、简捷地处理 PHP 控制结构的方法,同时保持了与 PHP 中的对应结构的相似性。
If 语句
可以使用
@if
、@elseif
、@else
和@endif
指令构造if
语句。这些指令的功能与相应的 PHP 指令相同:<div> @include('shared.errors') <form> <!-- Form Contents --> </form> </div>
方便起见, Blade 还提供了
@unless
指令:@include('view.name', ['some' => 'data'])
除了已经讨论过的条件指令,
@isset
和@empty
指令可以作为各自对应的 PHP 函数的快捷方式:@includeIf('view.name', ['some' => 'data'])
身份验证指令
@auth
和@guest
指令能够用于快速确定当前用户是经过身份验证的,还是一个访客:@includeWhen($boolean, 'view.name', ['some' => 'data'])
如果需要,可以在使用
@auth
和@guest
指令时指定应被校验的 身份 :@includeFirst(['custom.admin', 'admin'], ['some' => 'data'])
片段指令
可以使用
@hasSection
指令检查片断是否存在内容:<input type="{{ $type ?? 'text' }}">
Switch 指令
可以使用
@switch
、@case
、@break
、@default
和@endswitch
use Illuminate\Support\Facades\Blade; Blade::include('includes.input', 'input');
Dalam contoh ini, simbol@
akan dialih keluar oleh Blade dalam enjin Blade, ungkapan{{ name }}
akan kekal tidak berubah dan digantikan oleh Ia adalah enjin JavaScript yang akan menghasilkan ungkapan.
Jika anda ingin menggunakan pembolehubah JavaScript dalam templat besar, anda boleh membalut HTML Dalam arahan@verbatim
arahan@verbatim
, ini menghapuskan keperluan untuk menambah simbol@
untuk setiap pernyataan gema Blade:@input(['type' => 'email'])
🎜🎜Struktur kawalan
🎜Selain warisan templat dan paparan data, Blade juga menyediakan pintasan yang mudah untuk struktur kawalan PHP seperti cawangan dan gelung . Pintasan ini menyediakan cara yang bersih dan mudah untuk bekerja dengan struktur kawalan PHP sambil mengekalkan persamaan dengan rakan sejawatannya dalam PHP. 🎜🎜🎜🎜🎜🎜If statement 🎜🎜 boleh menggunakan@if
,Arahan @elseif
,@else
dan@endif
membina pernyataanif
. Arahan ini berfungsi sama dengan arahan PHP yang sepadan: 🎜@each('view.name', $jobs, 'job')
🎜Untuk kemudahan, Blade juga menyediakan arahan@unless
: 🎜@each('view.name', $jobs, 'job', 'view.empty')
🎜Sebagai tambahan kepada arahan bersyarat yang telah dibincangkan,@isset Arahan kod> dan
boleh digunakan sebagai pintasan ke fungsi PHP masing-masing: 🎜@kosong @push('scripts') <script src="/example.js"> </script> @endpush
🎜Arahan Pengesahan h4>🎜
@auth
dan@guest
arahan boleh digunakan untuk menentukan dengan cepat sama ada pengguna semasa disahkan atau tetamu: 🎜<head> <!-- 头部内容 --> @stack('scripts') </head>
🎜Jika perlu, anda boleh menggunakan < code Arahan >@auth dan@guest
menyatakan identiti yang harus disahkan: 🎜@push('scripts') This will be second...@endpush// 然后... @prepend('scripts') This will be first... @endprepend
🎜serpihan Perintah< /h4>🎜Anda boleh menggunakan perintah
@hasSection
untuk menyemak sama ada bahagian itu mempunyai kandungan: 🎜@inject('metrics', 'App\Services\MetricsService') <div> Monthly Revenue: {{ $metrics->monthlyRevenue() }}.</div>
🎜🎜🎜🎜🎜Tukar perintah 🎜🎜 boleh menggunakan@suis, @kas, @break, @default< /code > dan @endswitch
arahan membina pernyataan suis: 🎜<?php namespace App\Providers; use Illuminate\Support\Facades\Blade; use Illuminate\Support\ServiceProvider; class AppServiceProvider extends ServiceProvider{ /** * 执行注册后引导服务. * * @return void */ public function boot() { Blade::directive('datetime', function ($expression) { return "<?php echo ($expression)->format('m/d/Y H:i'); ?>"; }); } /** * 在容器中注册绑定. * * @return void */ public function register() { // } }
🎜🎜🎜🎜🎜🎜Gelung
Selain penyataan cawangan, Blade juga menyediakan arahan ringkas yang sama seperti struktur gelung PHP. Fungsi arahan ini juga sama seperti arahan PHP yang sepadan:
<?php echo ($var)->format('m/d/Y H:i'); ?>
{tip} Anda boleh menggunakan pembolehubah gelung dalam gelung untuk mendapatkan maklumat yang boleh dinilai tentang gelung, seperti sama ada anda berada dalam lelaran pertama atau lelaran terakhir gelung:
Dalam gelung, anda juga boleh menamatkan gelung atau melalui lelaran ini:
use Illuminate\Support\Facades\Blade; /** * 执行注册后引导服务 * * @return void */ public function boot(){ Blade::if('env', function ($environment) { return app()->environment($environment); }); }
Anda juga boleh mengisytiharkan arahan dengan syarat dalam satu baris:
@env('local') // 应用在本地环境中运行... @elseenv('testing') // 应用在测试环境中运行... @else // 应用没有在本地和测试环境中运行... @endenv
rrreee$loop
变量。该变量提供了用于访问诸如当前循环的索引、当前是否为第一次或最后一次循环之类的少数有用的信息的途径:在嵌套循环中,可以借助
rrreeeparent
属性访问父循环的$loop
变量:$loop
变量还包含其它几种有用的属性:
rrreee🎜属性 描述 $loop->index
当前迭代的索引(从 0 开始计数)。 $loop->iteration
当前循环迭代 (从 1 开始计算)。 $loop->remaining
循环中剩余迭代的数量。 $loop->count
被迭代的数组元素的总数。 $loop->first
是否为循环的第一次迭代。 $loop->last
是否为循环的最后一次迭代。 $loop->depth
当前迭代的嵌套深度级数。 rrreeeDalam gelung bersarang, anda boleh menggunakan akses harta pembolehubah$loop->parent
Semasa gelung, dalam Terdapat pembolehubah $loop
tersedia dalam badan gelung. Pembolehubah ini menyediakan akses kepada sejumlah kecil maklumat berguna seperti indeks gelung semasa dan sama ada ia gelung pertama atau terakhir:parent The code> pembolehubah
$loop
bagi gelung induk:$loop
Pembolehubah itu juga mengandungi beberapa sifat berguna lain: 🎜