Laravel: Các mẫu Blade
Giới thiệu
Blade là công cụ tạo mẫu mạnh mẽ và đơn giản của Laravel. Không giống như các công cụ template PHP khác, Blade không hạn chế bạn sử dụng code PHP trong view. Trong thực tế, tất cả các view Blade được biên dịch thành mã PHP đơn thuần lưu trữ cho đến khi họ được thay đổi, có nghĩa là Blade thêm về cơ bản không phí để ứng dụng của bạn. Xem các file Blade sử dụng các phần mở rộng tập tin và thường được lưu trữ trong các thư mục..blade.phpresources/views
Thừa kế template
Xác định A Layout
Hai trong số những lợi ích chính của việc sử dụng Blade là mẫu kế thừa và phần . Để bắt đầu, chúng ta hãy xem xét một ví dụ đơn giản. Đầu tiên, chúng ta sẽ xem xét một "bậc thầy" bố cục trang. Vì hầu hết các ứng dụng web duy trì bố trí chung như nhau trên các trang khác nhau, nó thuận tiện để xác định bố trí này là một cái nhìn Blade duy nhất:
<!-- Stored in 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>
Như bạn có thể thấy, tập tin này có chứa mã HTML điển hình mark-up. Tuy nhiên, lưu ý các điểm @sectionvà chỉ thị. Các chỉ thị, như tên của nó, định nghĩa một phần của nội dung, trong khi chỉ thị được sử dụng để hiển thị các nội dung của một phần nhất định.@yield@section@yield
Bây giờ chúng ta đã định nghĩa một cách bố trí cho các ứng dụng của chúng tôi, hãy định nghĩa một trang con thừa kế bố trí.
Mở rộng Một Layout
Khi xác định một cái nhìn trẻ em, sử dụng Blade chỉ thị để xác định bố trí các điểm con nên "kế thừa". Lần đó mở rộng một cách bố trí Blade có thể tiêm nội dung thành phần của bố trí sử dụng chỉ thị. Hãy nhớ rằng, như đã thấy trong các ví dụ trên, nội dung của các phần này sẽ được hiển thị trong bố trí sử dụng :@extends@section@yield
<!-- Stored in 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
Trong ví dụ này, sidebarphần được sử dụng các chỉ thị để phụ thêm (chứ không phải là ghi đè) nội dung vào thanh bên của bố cục. Các chỉ thị sẽ được thay thế bởi nội dung của các bố trí khi xem là ra.@parent@parent
Xem Blade có thể được trả lại từ các tuyến đường bằng cách sử dụng toàn cầu viewtrợ giúp:
Route::get('blade', function () {
return view('child');
});
Hiển thị dữ liệu
Bạn có thể hiển thị dữ liệu thông qua để xem Blade của bạn bằng cách quấn biến trong dấu ngoặc nhọn. Ví dụ, với các tuyến đường sau đây:
Route::get('greeting', function () {
return view('welcome', ['name' => 'Samantha']);
});
Bạn có thể hiển thị các nội dung của các namebiến như vậy:
Hello, {{ $name }}.
Tất nhiên, bạn không giới hạn việc hiển thị các nội dung của các biến thông qua để xem. Bạn cũng có thể lặp lại các kết quả của bất kỳ chức năng PHP. Trong thực tế, bạn có thể đặt bất kỳ mã PHP bạn muốn bên trong một tuyên bố vang Blade:
The current UNIX timestamp is {{ time() }}.
Blade báo cáo sẽ được tự động gửi thông qua PHP chức năng để ngăn chặn các cuộc tấn công XSS.{{ }}htmlentities
Vang vọng dữ liệu Nếu Nó Tồn tại
Đôi khi bạn có thể muốn echo một biến, nhưng bạn không chắc chắn nếu các biến đã được thiết lập. Chúng tôi có thể thể hiện điều này trong mã PHP tiết như vậy:
{{ isset($name) ? $name : 'Default' }}
Tuy nhiên, thay vì viết một tuyên bố ternary, Blade cung cấp cho bạn với các tiện cắt ngắn sau đây, mà sẽ được biên dịch để tuyên bố ternary trên:
{{ $name or 'Default' }}
Trong ví dụ này, nếu các $namebiến tồn tại, giá trị của nó sẽ được hiển thị. Tuy nhiên, nếu nó không tồn tại, từ đó Defaultsẽ được hiển thị.
Hiển thị Không thoát dữ liệu
Theo mặc định, Blade báo cáo sẽ được tự động gửi thông qua PHP chức năng để ngăn chặn các cuộc tấn công XSS. Nếu bạn không muốn dữ liệu của bạn được chạy thoát, bạn có thể sử dụng cú pháp sau:{{ }}htmlentities
Hello, {!! $name !!}.
Hãy rất cẩn thận khi lặp nội dung được cung cấp bởi người dùng của ứng dụng của bạn. Luôn luôn sử dụng thoát, đôi cú pháp cú đúp nhọn để ngăn chặn các cuộc tấn công XSS khi hiển thị dữ liệu người dùng cung cấp.
Blade & JavaScript Khung
Vì nhiều khuôn khổ JavaScript cũng sử dụng "xoăn" niềng răng để chỉ ra một biểu thức đã cho sẽ được hiển thị trong trình duyệt, bạn có thể sử dụng các @biểu tượng để thông báo cho các công cụ vẽ Blade một biểu thức nên vẫn còn nguyên vẹn.Ví dụ:
<h1>Laravel</h1>
Hello, @{{ name }}.
Trong ví dụ này, các @biểu tượng sẽ được gỡ bỏ bởi Blade; Tuy nhiên, biểu hiện sẽ vẫn bị ảnh hưởng bởi các công cụ Blade, cho phép nó thay vì được trả lại bởi khuôn khổ JavaScript của bạn.{{ name }}
các @verbatimChỉ thị
Nếu bạn đang hiển thị các biến JavaScript trong phần lớn các mẫu của bạn, bạn có thể quấn HTML trong các @verbatimchỉ thị để bạn không cần phải thêm tiền tố mỗi Blade echo tuyên bố với một @biểu tượng:
@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim
cấu trúc điều khiển
Ngoài dữ liệu hiển thị mẫu kế thừa và Blade cũng cung cấp thuận tiện đi tắt cho các cấu trúc kiểm soát chung PHP, chẳng hạn như câu điều kiện và vòng lặp. Những ngắn cắt giảm cung cấp một cách ngắn gọn rất sạch sẽ làm việc với các cấu trúc điều khiển PHP, trong khi cũng còn quen thuộc với các đối tác của họ PHP.
Nếu báo cáo
Bạn có thể xây dựng các ifbáo cáo sử dụng , , , và chỉ thị. Những chỉ thị này có chức năng giống hệt với các đối tác của họ PHP:@if@elseif@else@endif
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
Để thuận tiện, Blade cũng cung cấp một @unlesschỉ thị:
@unless (Auth::check())
You are not signed in.
@endunless
Loops
Ngoài câu điều kiện, Blade cung cấp chỉ đơn giản để làm việc với các cấu trúc vòng lặp của PHP. Một lần nữa, mỗi một trong các chỉ thị chức năng giống hệt với các đối tác của họ PHP:
@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
Khi vòng lặp, bạn có thể sử dụng các biến vòng lặp để có được thông tin có giá trị về các vòng lặp, chẳng hạn như cho dù bạn đang ở trong phiên đầu tiên hoặc cuối cùng thông qua các vòng lặp.
Khi sử dụng các vòng lặp bạn cũng có thể kết thúc vòng lặp hoặc bỏ qua các lần lặp hiện tại:
@foreach ($users as $user)
@if ($user->type == 1)
@continue
@endif
<li>{{ $user->name }}</li>
@if ($user->number == 5)
@break
@endif
@endforeach
Bạn cũng có thể bao gồm các điều kiện với việc kê khai chỉ thị trong một dòng:
@foreach ($users as $user)
@continue($user->type == 1)
<li>{{ $user->name }}</li>
@break($user->number == 5)
@endforeach
Biến Vòng
Khi vòng lặp, một $loopbiến sẽ có sẵn bên trong vòng lặp của bạn. Biến này cung cấp quyền truy cập vào một số bit thông tin hữu ích như các chỉ số vòng lặp hiện tại và cho dù đây là phiên đầu tiên hoặc cuối cùng thông qua các vòng lặp:
@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
Nếu bạn đang ở trong một vòng lặp lồng nhau, bạn có thể truy cập vào các vòng lặp chính của $loopbiến thông quaparenttài sản:
@foreach ($users as $user)
@foreach ($user->posts as $post)
@if ($loop->parent->first)
This is first iteration of the parent loop.
@endif
@endforeach
@endforeach
Các $loopbiến cũng có chứa một loạt các thuộc tính hữu ích khác:
| Bất động sản | Sự miêu tả |
|---|---|
$loop->index |
Các chỉ số của vòng lặp hiện tại (bắt đầu từ 0). |
$loop->iteration |
Các vòng lặp hiện (bắt đầu từ 1). |
$loop->remaining |
Các lặp còn lại trong vòng lặp. |
$loop->count |
Tổng số các mục trong mảng bị lặp. |
$loop->first |
Cho dù đây là phiên đầu tiên thông qua các vòng lặp. |
$loop->last |
Cho dù đây là phiên cuối cùng thông qua các vòng lặp. |
$loop->depth |
Mức độ làm tổ của dòng vòng. |
$loop->parent |
Khi ở trong một vòng lặp lồng nhau, biến vòng lặp của cha mẹ. |
Comments
Blade cũng cho phép bạn xác định các ý kiến trong quan điểm của bạn. Tuy nhiên, không giống như HTML ý kiến, bình luận Blade không được bao gồm trong HTML được trả về bởi ứng dụng của bạn:
{{-- This comment will not be present in the rendered HTML --}}
Bao gồm Sub-xem
Blade chỉ thị cho phép bạn bao gồm một cái nhìn từ bên trong Blade xem khác. Tất cả các biến có sẵn cho các điểm phụ huynh sẽ được cung cấp cho các điểm bao gồm:@include
<div>
@include('shared.errors')
<form>
<!-- Form Contents -->
</form>
</div>
Mặc dù quan điểm bao gồm sẽ kế thừa tất cả các dữ liệu có sẵn trong giao diện cha mẹ, bạn cũng có thể vượt qua một loạt các dữ liệu bổ sung cho các điểm bao gồm:
@include('view.name', ['some' => 'data'])
Bạn nên tránh sử dụng__DIR__và__FILE__hằng số trong quan điểm Blade của bạn, vì họ sẽ tham khảo các vị trí của, xem biên soạn được lưu trữ.
Rendering Lần Đối với bộ sưu tập
Bạn có thể kết hợp các vòng lặp và bao gồm vào một dòng với Blade của @eachchỉ thị:
@each('view.name', $jobs, 'job')
Các số đầu tiên là xem một phần để làm cho mỗi phần tử trong mảng hoặc bộ sưu tập. Đối số thứ hai là mảng hoặc bộ sưu tập bạn muốn để lặp qua, trong khi đối số thứ ba là tên biến đó sẽ được giao cho các lần lặp hiện trong tầm nhìn. Vì vậy, ví dụ, nếu bạn đang lặp lại trên một mảng của jobs, thông thường bạn sẽ muốn truy cập vào từng công việc như là mộtjobbiến trong quan điểm của mình một phần. Chìa khóa cho các lần lặp hiện tại sẽ có sẵn như các keybiến đổi trong quan điểm của mình một phần.
Bạn cũng có thể vượt qua một số thứ tư với @eachchỉ thị. Lập luận này xác định quan điểm rằng sẽ được trả lại nếu các mảng nhất định là trống rỗng.
@each('view.name', $jobs, 'job', 'view.empty')
stacks
Blade cho phép bạn để đẩy để ngăn xếp tên mà có thể được trả lại ở một nơi khác trong một cái nhìn hoặc bố trí. Điều này có thể đặc biệt hữu ích cho việc xác định bất kỳ thư viện JavaScript yêu cầu của quan điểm con bạn:
@push('scripts')
<script src="/example.js"></script>
@endpush
Bạn có thể đẩy tới một chồng nhiều lần khi cần thiết. Để làm cho nội dung ngăn xếp đầy đủ, vượt qua tên của ngăn xếp để các @stackchỉ thị:
<head>
<!-- Head Contents -->
@stack('scripts')
</head>
tiêm dịch vụ
Các @injectchỉ thị có thể được sử dụng để lấy một dịch vụ từ Laravel chứa dịch vụ . Đối số đầu tiên được thông qua để@injectlà tên của biến dịch vụ này sẽ được đặt vào trong khi đối số thứ hai là lớp hoặc giao diện tên của dịch vụ mà bạn muốn để giải quyết:
@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>
Mở rộng Blade
Blade cho phép bạn xác định các chỉ thị tùy chỉnh của riêng bạn bằng cách sử dụng directivephương pháp. Khi trình biên dịch Blade gặp chỉ thị tùy chỉnh, nó sẽ gọi callback được cung cấp với các biểu hiện đó chỉ thị chứa.
Các ví dụ sau đây tạo ra một chỉ thị các định dạng một được , mà phải là một thể hiện của :@datetime($var)$varDateTime
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Perform post-registration booting of services.
*
* @return void
*/
public function boot()
{
Blade::directive('datetime', function($expression) {
return "<?php echo $expression->format('m/d/Y H:i'); ?>";
});
}
/**
* Register bindings in the container.
*
* @return void
*/
public function register()
{
//
}
}
Như bạn có thể thấy, chúng tôi sẽ xâu chuỗi các formatphương pháp vào bất cứ biểu hiện được thông qua vào các chỉ thị. Vì vậy, trong ví dụ này, PHP thức tạo ra bởi chỉ thị này sẽ là:
<?php echo $var->format('m/d/Y H:i'); ?>
Sau khi cập nhật logic của một chỉ thị Blade, bạn sẽ cần phải xóa tất cả các điểm lưu trữ Blade. Những quan điểm Blade lưu trữ có thể được loại bỏ bằng cách sử dụng lệnh Artisan.view:clear