什么是模板引擎?
模板引擎就像一個工具,可以幫助您將內(nèi)容和布局分開。這使您的代碼更干凈且更易于管理。您無需將 HTML 與數(shù)據(jù)混合,而是創(chuàng)建定義內(nèi)容外觀的模板,然后引擎負(fù)責(zé)填寫詳細(xì)信息。
什么是刀片?
Blade 是 Laravel 自己的模板引擎,它旨在讓您的生活更輕松。 Blade 模板存儲在 resources/views 目錄中,每個模板都有一個 .blade.php 擴(kuò)展名。語法簡單明了,允許您輕松地將 HTML 與 PHP 混合。例如:
<h1>Hello, {{ $name }}!</h1>
但是 Blade 不僅僅用于顯示數(shù)據(jù)。您還可以在模板中添加邏輯,例如循環(huán)和條件。這是一個例子:
@if ($user)
<p>Welcome, {{ $user->name }}!</p>
@else
<p>Please log in.</p>
@endif
看看根據(jù)用戶是否登錄顯示不同的內(nèi)容是多么容易?下次您需要循環(huán)訪問用戶列表時,請嘗試使用 Blade 的 @foreach 指令。它很簡單并且可以讓你的代碼保持整潔。

模板繼承
Blade 最好的功能之一是它如何幫助您重用布局。您可以為您的網(wǎng)站創(chuàng)建一個主模板,然后只需填寫每個頁面的唯一內(nèi)容。這是一個簡單的例子:
<!-- layout.blade.php -->
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<div>
<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>
<pre class="brush:php;toolbar:false">@extends('layout')
@section('title', 'Home Page')
@section('content')
<h1>Welcome to the Home Page!</h1>
@endsection
通過使用@extends,您可以鏈接到布局,而@section允許您使用特定內(nèi)容填充占位符。這使您的代碼保持干燥(不要重復(fù))并且超級易于管理。 Blade 簡化了您的工作流程,讓您能夠更加專注于重要的事情——構(gòu)建出色的 Web 應(yīng)用程序。

葉片組件
刀片組件就像 UI 的小構(gòu)建塊。將它們想象成樂高積木——您可以創(chuàng)建界面的一個可重復(fù)使用的小部分,并可以將其卡入您需要的任何位置。這使您的代碼更干凈且更易于維護(hù)。
您可以定義一次組件并在整個應(yīng)用程序中使用它。需要一個在不同頁面上看起來相同的按鈕嗎?為它創(chuàng)建一個 Blade 組件!更好的是,您可以將屬性傳遞給這些組件,使它們靈活且適應(yīng)性強(qiáng)。
這是一個按鈕組件的簡單示例:
<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>
<!-- Usage -->
<x-button>Click Me</x-button>
您可以使用組件類使組件動態(tài)化。這允許您傳入類型或類等屬性來自定義按鈕的行為或樣式。
// In a component class
public function render()
{
return view('components.button', [
'type' => $this->type,
'class' => $this->class,
]);
}
// In the Blade component
<button type="{{ $type }}">
<h2>
Including Subviews
</h2>
<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" class="lazy" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>
<h2>
Blade Directives
</h2>
<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>
<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
@csrf
@method('PUT')
<button type="submit">Submit</button>
</form>
需要更多定制的東西嗎?您可以創(chuàng)建自己的 Blade 指令以實(shí)現(xiàn)可重用邏輯。
例如,假設(shè)您經(jīng)常需要格式化日期。您可以像這樣定義自定義指令:
<h1>Hello, {{ $name }}!</h1>

其他特點(diǎn)
Blade 配備了一些非常方便的功能,可以讓您作為開發(fā)人員的生活更加順利。讓我們深入研究其中的一些。
管理資產(chǎn) URL
需要鏈接您的 CSS 或 JavaScript 文件嗎? asset() 輔助函數(shù)可以滿足您的需求。它會為您的資源生成正確的 URL,因此您不必?fù)?dān)心路徑:
@if ($user)
<p>Welcome, {{ $user->name }}!</p>
@else
<p>Please log in.</p>
@endif
處理空數(shù)組或集合
Blade 的 @forelse 指令在處理空數(shù)組或集合時是一個救星。它可以讓您循環(huán)遍歷項(xiàng)目,還可以優(yōu)雅地處理沒有項(xiàng)目的情況:
<!-- layout.blade.php -->
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<div>
<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>
<pre class="brush:php;toolbar:false">@extends('layout')
@section('title', 'Home Page')
@section('content')
<h1>Welcome to the Home Page!</h1>
@endsection
有條件的內(nèi)容顯示
Blade 提供了多種指令來根據(jù)條件顯示內(nèi)容:
@isset:檢查變量是否已設(shè)置
@empty:檢查變量是否為空
@unless:與 if 類似,但相反
這是使用 @isset 的示例:
<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>
<!-- Usage -->
<x-button>Click Me</x-button>
防范 XSS
Blade 自動轉(zhuǎn)義輸出以保護(hù)您的應(yīng)用程序免受 XSS(跨站腳本)攻擊。但有時,您可能想要輸出原始 HTML。在這種情況下,請使用 {!! ?。:
// In a component class
public function render()
{
return view('components.button', [
'type' => $this->type,
'class' => $this->class,
]);
}
// In the Blade component
<button type="{{ $type }}">
<h2>
Including Subviews
</h2>
<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" class="lazy" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>
<h2>
Blade Directives
</h2>
<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>
<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
@csrf
@method('PUT')
<button type="submit">Submit</button>
</form>

高級使用
需要包含包含 Blade 語法的原始 HTML 或 JavaScript?使用 @verbatim 指令阻止 Blade 嘗試解析它:
// In a service provider
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
});
// Usage in Blade
@datetime($dateVariable)
使用 API? Blade 可以輕松地直接在模板中渲染 JSON 數(shù)據(jù):
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
如果您使用 Livewire,Blade 可以與其無縫協(xié)作。您可以將 Blade 組件與 Livewire 組件一起使用,以實(shí)現(xiàn)動態(tài)的交互式 UI,而無需編寫太多 JavaScript。
@once 指令確保一段代碼只運(yùn)行一次。 Blade 允許您創(chuàng)建根據(jù)您傳??遞的數(shù)據(jù)進(jìn)行調(diào)整的動態(tài)組件。這對于靈活、可重用的 UI 片段來說非常有用:
@forelse ($items as $item)
<p>{{ $item }}</p>
@empty
<p>No items found.</p>
@endforelse
@error 指令可幫助您輕松顯示特定字段的錯誤消息:
@isset($variable)
<p>{{ $variable }}</p>
@endisset
當(dāng)我第一次開始使用 Blade 時,我對自己有多少選擇感到有點(diǎn)迷失,但不久之后,整個世界就向我敞開了?,F(xiàn)在我無法想象沒有它的多功能功能的編碼。我希望這篇文章能幫助您找到進(jìn)入這個令人驚嘆的模板引擎的方法。
以上是充分利用 Blade:Laravel 的模板引擎的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!