Blade 是 Laravel 內建的簡單而強大的模板引擎。與一些 PHP 模板引擎不同，Blade 不會限制您在模板中使用純 PHP 代碼。事實上，所有 Blade 模板都會被編譯成純 PHP 代碼並緩存，直到被修改，這意味著 Blade 幾乎不會給您的應用程式增加任何額外負擔。Blade 模板文件使用 .blade.php 文件擴展名，通常存儲在 resources/views 目錄中。
可以使用全局的 view 助手從路由或控制器返回 Blade 視圖。當然，如在 視圖 文件中所述，可以使用 view 助手的第二個參數將數據傳遞給 Blade 視圖：
Route::get('/', function () {
return view('greeting', ['name' => 'Finn']);
});想要將您的 Blade 模板提升到下一個水平，並輕鬆構建動態界面嗎？請查看 Laravel Livewire。Livewire 允許您編寫帶有動態功能的 Blade 組件，這通常只能通過像 React 或 Vue 這樣的前端框架實現，為構建現代、反應靈敏的前端提供了一個很好的方法，而無需許多 JavaScript 框架的複雜性、客戶端渲染或構建步驟。
您可以通過將變數放在花括號中來顯示傳遞給 Blade 視圖的資料。例如，給定以下路由：
Route::get('/', function () {
return view('welcome', ['name' => 'Samantha']);
});您可以這樣顯示 name 變數的內容：
Hello, {{ $name }}.Note
Blade 的 {{ }} 輸出語句會自動通過 PHP 的 htmlspecialchars 函數來防止 XSS 攻擊。
您不僅限於顯示傳遞給視圖的變數的內容。您還可以輸出任何 PHP 函數的結果。事實上，您可以將任何您希望的 PHP 代碼放在 Blade 輸出語句中。
目前的 UNIX 時間戳記是 {{ time() }}。預設情況下，Blade（以及 Laravel 的 e 函數）會對 HTML 實體進行雙重編碼。如果您想要禁用雙重編碼，請從您的 AppServiceProvider 的 boot 方法中調用 Blade::withoutDoubleEncoding 方法：
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Blade::withoutDoubleEncoding();
}
}預設情況下，Blade 的 {{ }} 陳述式會自動通過 PHP 的 htmlspecialchars 函數，以防止 XSS 攻擊。如果您不希望您的資料被轉義，您可以使用以下語法：
你好，{!! $name !!}。Warning
當回显應用程序使用者提供的內容時，請非常小心。通常應使用轉義的雙大括號語法，以防止在顯示用戶提供的資料時發生 XSS 攻擊。
由於許多 JavaScript 框架也使用“大括號”來指示應在瀏覽器中顯示的表達式，您可以使用 @ 符號來通知 Blade 渲染引擎表達式應保持不變。例如：
<h1>Laravel</h1>
你好，@{{ name }}。在此示例中，@ 符號將被 Blade 刪除；但是，{{ name }} 表達式將保持不變，允許您的 JavaScript 框架渲染它。
@ 符號也可用於逃逸 Blade 指令：
{{-- Blade template --}}
@@if()
<!-- HTML output -->
@if()有時您可能會將一個陣列傳遞給視圖，目的是將其渲染為 JSON 以初始化 JavaScript 變數。例如：
<script>
var app = <?php echo json_encode($array); ?>;
</script>但是，您可以使用 Illuminate\Support\Js::from 方法指示詞，而不是手動調用 json_encode。from 方法接受與 PHP 的 json_encode 函數相同的參數；但是，它將確保生成的 JSON 正確轉義以包含在 HTML 引號中。from 方法將返回一個 JSON.parse JavaScript 陳述，該陳述將將給定的對象或陣列轉換為有效的 JavaScript 對象：
<script>
var app = {{ Illuminate\Support\Js::from($array) }};
</script>最新版本的Laravel應用程式骨架包含一個Js外觀，它在您的Blade模板中提供了方便的訪問這個功能的方式：
<script>
var app = {{ Js::from($array) }};
</script>Warning
您應該僅使用Js::from方法將現有變數呈現為JSON。Blade模板是基於正則表達式的，嘗試將複雜表達式傳遞給指示詞可能導致意外失敗。
如果您在模板的大部分部分中顯示JavaScript變數，您可以將HTML包裹在@verbatim指示詞中，這樣您就不必在每個Blade echo語句前加上@符號：
@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim除了模板繼承和顯示數據外，Blade還提供了方便的快捷方式來處理常見的PHP控制結構，如條件語句和循環。這些快捷方式提供了一種非常乾淨、簡潔的方式來處理PHP控制結構，同時也保持了與PHP對應物的熟悉性。
您可以使用@if、@elseif、@else和@endif指示詞構造if語句。這些指示詞的功能與它們的PHP對應物相同：
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif為了方便起見，Blade還提供了@unless指示詞：
@unless (Auth::check())
您尚未登錄。
@endunless除了已討論的條件指示詞外，@isset和@empty指示詞也可以用作它們各自的PHP函數的方便快捷方式：
@isset($records)
// $records is defined and is not null...
@endisset
@empty($records)
// $records is "empty"...
@endempty@auth和@guest指示詞可用於快速確定當前用戶是否已認證或是訪客：
@auth
// The user is authenticated...
@endauth
@guest
// The user is not authenticated...
@endguest如果需要，您可以指定在使用 @auth 和 @guest 指令時應檢查的認證警衛：
@auth('admin')
// The user is authenticated...
@endauth
@guest('admin')
// The user is not authenticated...
@endguest您可以使用 @production 指令來檢查應用程式是否在正式環境中運行：
@production
// 正式環境特定內容...
@endproduction或者，您可以使用 @env 指令來確定應用程式是否在特定環境中運行：
@env('staging')
// The application is running in "staging"...
@endenv
@env(['staging', 'production'])
// The application is running in "staging" or "production"...
@endenv您可以使用 @hasSection 指令來確定模板繼承區段是否有內容：
@hasSection('navigation')
<div class="pull-right">
@yield('navigation')
</div>
<div class="clearfix"></div>
@endif您可以使用 sectionMissing 指令來確定區段是否沒有內容：
@sectionMissing('navigation')
<div class="pull-right">
@include('default-navigation')
</div>
@endif@session 指令可用於確定是否存在 會話 值。如果會話值存在，則將評估 @session 和 @endsession 指令內的模板內容。在 @session 指令的內容中，您可以輸出 $value 變數以顯示會話值：
@session('status')
<div class="p-4 bg-green-100">
{{ $value }}
</div>
@endsession可以使用 @switch、@case、@break、@default 和 @endswitch 指令來構建選擇語句：
@switch($i)
@case(1)
First case...
@break
@case(2)
Second case...
@break
@default
Default case...
@endswitch除了條件語句外，Blade 還提供了用於處理 PHP 迴圈結構的簡單指令。同樣，這些指令的每個功能與其 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>
@endwhileNote
在遍歷 foreach 迴圈時，您可以使用 迴圈變數 來獲取有關迴圈的寶貴信息，例如您是否在迴圈中的第一次或最後一次迭代。
當使用循環時，您也可以使用 @continue 和 @break 指示詞來跳過當前迭代或結束循環：
@foreach ($users as $user)
@if ($user->type == 1)
@continue
@endif
<li>{{ $user->name }}</li>
@if ($user->number == 5)
@break
@endif
@endforeach您也可以在指示詞聲明中包含繼續或中斷條件：
@foreach ($users as $user)
@continue($user->type == 1)
<li>{{ $user->name }}</li>
@break($user->number == 5)
@endforeach在遍歷 foreach 循環時，您可以在循環內部訪問到一個 $loop 變數。該變數提供了一些有用的信息，例如當前循環索引以及這是否是循環中的第一次或最後一次迭代：
@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如果您在嵌套循環中，可以通過 parent 屬性訪問父循環的 $loop 變數：
@foreach ($users as $user)
@foreach ($user->posts as $post)
@if ($loop->parent->first)
This is the first iteration of the parent loop.
@endif
@endforeach
@endforeach$loop 變數還包含各種其他有用的屬性：
| 屬性 | 描述 |
|---|---|
$loop->index |
當前循環迭代的索引（從 0 開始）。 |
$loop->iteration |
當前循環迭代（從 1 開始）。 |
$loop->remaining |
循環中剩餘的迭代次數。 |
$loop->count |
正在遍歷的陣列中項目的總數。 |
$loop->first |
是否這是循環中的第一次迭代。 |
$loop->last |
是否這是循環中的最後一次迭代。 |
$loop->even |
是否這是循環中的偶數次迭代。 |
$loop->odd |
是否這是循環中的奇數次迭代。 |
$loop->depth |
當前循環的嵌套級別。 |
$loop->parent |
在嵌套循環中，父循環的循環變數。 |
@class 指示詞有條件地編譯 CSS 類別字串。該指示詞接受一個包含類別的陣列，其中陣列鍵包含您希望添加的類別或類別，而值是一個布林表達式。如果陣列元素具有數字鍵，則它將始終包含在呈現的類別清單中：
@php
$isActive = false;
$hasError = true;
@endphp
<span @class([
'p-4',
'font-bold' => $isActive,
'text-gray-500' => ! $isActive,
'bg-red' => $hasError,
])></span>
<span class="p-4 text-gray-500 bg-red"></span>同樣地，@style 指示詞可用於有條件地將內聯 CSS 樣式添加到 HTML 元素：
@php
$isActive = true;
@endphp
<span @style([
'background-color: red',
'font-weight: bold' => $isActive,
])></span>
<span style="background-color: red; font-weight: bold;"></span>為了方便起見，您可以使用 @checked 指示詞來輕鬆指示給定的 HTML 复選框輸入是否為 "checked"。如果提供的條件評估為 true，此指示詞將輸出 checked：
<input
type="checkbox"
name="active"
value="active"
@checked(old('active', $user->active))
/>同樣地，@selected 指示詞可用於指示給定的選擇選項是否應為 "selected"：
<select name="version">
@foreach ($product->versions as $version)
<option value="{{ $version }}" @selected(old('version') == $version)>
{{ $version }}
</option>
@endforeach
</select>此外，@disabled 指示詞可用於指示給定元素是否應為 "disabled"：
<button type="submit" @disabled($errors->isNotEmpty())>提交</button>此外，@readonly 指示詞可用於指示給定元素是否應為 "readonly"：
<input
type="email"
name="email"
value="[email protected]"
@readonly($user->isNotAdmin())
/>此外，@required 指示詞可用於指示給定元素是否應為 "required"：
<input
type="text"
name="title"
value="title"
@required($user->isAdmin())
/>Note
雖然您可以自由使用 @include 指示詞，但 Blade 元件 提供了類似的功能，並且比 @include 指示詞具有多個優勢，例如數據和屬性綁定。
Blade 的 @include 指示詞允許您從另一個視圖中包含 Blade 視圖。所有可用於父視圖的變數將被提供給包含的視圖：
<div>
@include('shared.errors')
<form>
<!-- Form Contents -->
</form>
</div>即使包含的視圖將繼承父視圖中的所有可用數據，您也可以傳遞一個陣列的額外數據，這些數據應該提供給包含的視圖：
@include('view.name', ['status' => 'complete'])如果您嘗試 @include 一個不存在的視圖，Laravel 將拋出錯誤。如果您想要包含一個可能存在或可能不存在的視圖，您應該使用 @includeIf 指示詞：
@includeIf('view.name', ['status' => 'complete'])如果您想要根據給定的布林表達式評估為 true 或 false 來 @include 一個視圖，您可以使用 @includeWhen 和 @includeUnless 指示詞：
@includeWhen($boolean, 'view.name', ['status' => 'complete'])
@includeUnless($boolean, 'view.name', ['status' => 'complete'])要從給定的視圖陣列中包含第一個存在的視圖，您可以使用 includeFirst 指示詞：
@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])Warning
應該避免在 Blade 視圖中使用 __DIR__ 和 __FILE__ 常數，因為它們將參考已經緩存、編譯的視圖的位置。
您可以使用 Blade 的 @each 指示詞將循環和包含結合到一行中：
@each('view.name', $jobs, 'job')@each 指示詞的第一個參數是要為陣列或集合中的每個元素渲染的視圖。第二個參數是您希望遍歷的陣列或集合，而第三個參數是將分配給視圖中當前迭代的變數名稱。例如，如果您正在遍歷一個 jobs 陣列，通常您會希望在視圖中將每個工作訪問為一個 job 變數。當前迭代的陣列鍵將作為視圖中的 key 變數可用。
您也可以將第四個參數傳遞給 @each 指示詞。此參數確定如果給定的陣列為空時將渲染的視圖。
@each('view.name', $jobs, 'job', 'view.empty')Warning
通過 @each 渲染的視圖不會繼承父視圖的變數。如果子視圖需要這些變數，您應該改用 @foreach 和 @include 指示詞。
@once 指示詞允許您定義模板中僅在每個渲染週期中評估一次的部分。這對於使用 stacks 將特定的 JavaScript 代碼推送到頁面標頭中可能很有用。例如，如果您在循環中渲染特定的 component，您可能希望只在第一次渲染該組件時將 JavaScript 推送到標頭中：
@once
@push('scripts')
<script>
// Your custom JavaScript...
</script>
@endpush
@endonce由於 @once 指示詞通常與 @push 或 @prepend 指示詞一起使用，為了方便起見，您可以使用 @pushOnce 和 @prependOnce 指示詞：
@pushOnce('scripts')
<script>
// Your custom JavaScript...
</script>
@endPushOnce在某些情況下，將 PHP 代碼嵌入視圖中是有用的。您可以使用 Blade 的 @php 指示詞在模板中執行一個純 PHP 塊：
@php
$counter = 1;
@endphp或者，如果您只需要使用 PHP 來導入一個類，您可以使用 @use 指示詞：
@use('App\Models\Flight')第二個參數可以提供給 @use 指示詞以為導入的類別取別名：
@use('App\Models\Flight', 'FlightModel')Blade 也允許您在視圖中定義註釋。但是，與 HTML 註釋不同，Blade 註釋不包含在應用程序返回的 HTML 中：
{{-- 這個註釋不會出現在渲染的 HTML 中 --}}元件和插槽提供了與區段、佈局和包含相似的好處；但是，有些人可能會發現元件和插槽的心智模型更容易理解。撰寫元件有兩種方法：基於類的元件和匿名元件。
要創建基於類的元件，您可以使用 make:component Artisan 命令。為了說明如何使用元件，我們將創建一個簡單的 Alert 元件。make:component 命令將把元件放在 app/View/Components 目錄中：
php artisan make:component Alertmake:component 命令還將為元件創建一個視圖模板。該視圖將放在 resources/views/components 目錄中。在為您自己的應用程序編寫元件時，元件會自動在 app/View/Components 目錄和 resources/views/components 目錄中被發現，因此通常不需要進一步的元件註冊。
您也可以在子目錄中創建組件：
php artisan make:component Forms/Input上述命令將在 app/View/Components/Forms 目錄中創建一個 Input 組件，並將視圖放置在 resources/views/components/forms 目錄中。
如果您想要創建一個匿名組件（只有 Blade 模板而沒有類），您可以在調用 make:component 命令時使用 --view 標誌：
php artisan make:component forms.input --view上述命令將在 resources/views/components/forms/input.blade.php 創建一個 Blade 檔案，可以通過 <x-forms.input /> 來呈現為一個組件。
在為您自己的應用程序編寫組件時，組件會自動在 app/View/Components 目錄和 resources/views/components 目錄中被發現。
但是，如果您正在構建一個使用 Blade 組件的套件，您需要手動註冊您的組件類和其 HTML 標籤別名。通常應該在套件的服務提供者的 boot 方法中註冊您的組件：
use Illuminate\Support\Facades\Blade;
/**
* Bootstrap your package's services.
*/
public function boot(): void
{
Blade::component('package-alert', Alert::class);
}組件註冊後，可以使用其標籤別名來呈現：
<x-package-alert/>或者，您可以使用 componentNamespace 方法按照約定自動加載組件類。例如，一個 Nightshade 套件可能有 Calendar 和 ColorPicker 組件，位於 Package\Views\Components 命名空間中：
use Illuminate\Support\Facades\Blade;
/**
* Bootstrap your package's services.
*/
public function boot(): void
{
Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}這將允許使用 package-name:: 語法使用供應商命名空間的套件組件：
<x-nightshade::calendar />
<x-nightshade::color-picker />Blade 將通過將組件名稱轉換為帕斯卡大小寫來自動檢測與該組件關聯的類。子目錄也支持使用「點」表示法。
要顯示元件，您可以在 Blade 模板中使用 Blade 元件標籤。Blade 元件標籤以 x- 字串開頭，後面跟著元件類別的 kebab case 名稱：
<x-alert/>
<x-user-profile/>如果元件類別在 app/View/Components 目錄中更深層嵌套，您可以使用 . 字元來指示目錄嵌套。例如，假設一個元件位於 app/View/Components/Inputs/Button.php，您可以這樣呈現它：
<x-inputs.button/>如果您想有條件地呈現您的元件，您可以在元件類別上定義一個 shouldRender 方法。如果 shouldRender 方法返回 false，則該元件將不會被呈現：
use Illuminate\Support\Str;
/**
* Whether the component should be rendered
*/
public function shouldRender(): bool
{
return Str::length($this->message) > 0;
}有時元件是元件群組的一部分，您可能希望將相關元件分組放在單個目錄中。例如，想像一個具有以下類結構的 "card" 元件：
App\Views\Components\Card\Card
App\Views\Components\Card\Header
App\Views\Components\Card\Body
由於根 Card 元件嵌套在 Card 目錄中，您可能期望需要透過 <x-card.card> 來呈現元件。但是，當元件的檔案名稱與元件目錄的名稱相符時，Laravel 會自動假設該元件是 "根" 元件，並允許您呈現元件而不需要重複目錄名稱：
<x-card>
<x-card.header>...</x-card.header>
<x-card.body>...</x-card.body>
</x-card>您可以使用 HTML 屬性將資料傳遞給 Blade 元件。硬編碼的基本值可以使用簡單的 HTML 屬性字串傳遞給元件。PHP 表達式和變數應該通過使用 : 字元作為前綴的屬性傳遞給元件：
<x-alert type="error" :message="$message"/>您應該在元件的類構造函式中定義所有元件的資料屬性。元件上的所有公共屬性將自動提供給元件的視圖。從元件的 render 方法將資料傳遞給視圖並不是必要的：
<?php
namespace App\View\Components;
use Illuminate\View\Component;
use Illuminate\View\View;
class Alert extends Component
{
/**
* Create the component instance.
*/
public function __construct(
public string $type,
public string $message,
) {}
/**
* Get the view / contents that represent the component.
*/
public function render(): View
{
return view('components.alert');
}
}當您的元件被呈現時，您可以透過按名稱回顯變數來顯示元件的公共變數的內容：
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>元件建構子引數應使用 camelCase 來指定，而在 HTML 屬性中引用引數名稱時應使用 kebab-case。例如，考慮以下元件建構子：
/**
* Create the component instance.
*/
public function __construct(
public string $alertType,
) {}$alertType 引數可以這樣提供給元件：
<x-alert alert-type="danger" />當將屬性傳遞給元件時，您也可以使用「簡短屬性」語法。這通常很方便，因為屬性名稱經常與對應的變數名稱匹配：
{{-- Short attribute syntax... --}}
<x-profile :$userId :$name />
{{-- Is equivalent to... --}}
<x-profile :user-id="$userId" :name="$name" />由於一些 JavaScript 框架（如 Alpine.js）也使用以冒號為前綴的屬性，您可以使用雙冒號（::）前綴來告知 Blade 該屬性不是 PHP 表達式。例如，考慮以下元件：
<x-button ::class="{ danger: isDeleting }">
提交
</x-button>Blade 將呈現以下 HTML：
<button :class="{ danger: isDeleting }">
提交
</button>除了公共變數可用於您的元件模板外，元件上的任何公共方法也可以被調用。例如，想像一個具有 isSelected 方法的元件：
/**
* Determine if the given option is the currently selected option.
*/
public function isSelected(string $option): bool
{
return $option === $this->selected;
}您可以透過調用與方法名稱匹配的變數來從元件模板中執行此方法：
<option {{ $isSelected($value) ? 'selected' : '' }} value="{{ $value }}">
{{ $label }}
</option>Blade 元件還允許您在類別的 render 方法內訪問元件名稱、屬性和區塊。但是，為了訪問這些資料，您應該從您元件的 render 方法中返回一個閉包：
use Closure;
/**
* Get the view / contents that represent the component.
*/
public function render(): Closure
{
return function () {
return '<div {{ $attributes }}>Components content</div>';
};
}您元件的 render 方法返回的閉包也可以接收一個 $data 陣列作為其唯一引數。這個陣列將包含幾個元素，提供有關元件的資訊：
return function (array $data) {
// $data['componentName'];
// $data['attributes'];
// $data['slot'];
return '<div {{ $attributes }}>Components content</div>';
}Warning
$data 陣列中的元素不應直接嵌入到您的 render 方法返回的 Blade 字串中，因為這樣做可能允許通過惡意屬性內容進行遠程代碼執行。
componentName 等於在 x- 前綴後的 HTML 標籤中使用的名稱。因此 <x-alert /> 的 componentName 將是 alert。attributes 元素將包含在 HTML 標籤上存在的所有屬性。slot 元素是一個具有元件區塊內容的 Illuminate\Support\HtmlString 實例。
閉包應返回一個字串。如果返回的字串對應於現有視圖，則將呈現該視圖；否則，將該返回的字串作為內聯 Blade 視圖進行評估。
如果您的元件需要 Laravel 的服務容器中的依賴項，您可以在元件的任何資料屬性之前列出它們，它們將自動由容器注入：
use App\Services\AlertCreator;
/**
* Create the component instance.
*/
public function __construct(
public AlertCreator $creator,
public string $type,
public string $message,
) {}如果您希望防止一些公共方法或屬性被公開為變數傳遞給您的元件模板，您可以將它們添加到元件的 $except 陣列屬性中：
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
/**
* The properties / methods that should not be exposed to the component template.
*
* @var array
*/
protected $except = ['type'];
/**
* Create the component instance.
*/
public function __construct(
public string $type,
) {}
}我們已經研究了如何將資料屬性傳遞給元件；但是，有時您可能需要指定額外的 HTML 屬性，例如 class，這些屬性不是元件正常運作所需的資料的一部分。通常，您希望將這些額外的屬性傳遞給元件模板的根元素。例如，假設我們想要這樣呈現一個 alert 元件：
<x-alert type="error" :message="$message" class="mt-4"/>所有不屬於元件建構子的屬性將自動添加到元件的「屬性包」中。這個屬性包通過 $attributes 變數自動提供給元件。可以透過輸出這個變數在元件內呈現所有屬性：
<div {{ $attributes }}>
<!-- 元件內容 -->
</div>Warning
目前不支援在元件標籤內使用 @env 等指示詞。例如，<x-alert :live="@env('production')"/> 將不會被編譯。
有時您可能需要為屬性指定預設值或將其他值合併到某些元件屬性中。為了實現這一點，您可以使用屬性包的 merge 方法。這個方法對於定義一組應始終應用於元件的預設 CSS 類特別有用：
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>如果我們假設這個元件被這樣使用：
<x-alert type="error" :message="$message" class="mb-4"/>元件的最終呈現 HTML 將如下所示：
<div class="alert alert-error mb-4">
<!-- $message 變數的內容 -->
</div>有時您可能希望在特定條件為 true 時合併類別。您可以通過 class 方法實現這一點，該方法接受一個包含類別的陣列，其中陣列鍵包含您希望添加的類別或類別，而值是一個布林表達式。如果陣列元素具有數字鍵，它將始終包含在呈現的類別清單中：
<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
{{ $message }}
</div>如果您需要將其他屬性合併到您的元件上，可以將 merge 方法鏈接到 class 方法上：
<button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}>
{{ $slot }}
</button>Note
如果您需要在其他不應接收合併屬性的 HTML 元素上有條件地編譯類別，您可以使用 @class 指令。
當合併不是 class 屬性的屬性時，提供給 merge 方法的值將被視為該屬性的「預設」值。然而，與 class 屬性不同，這些屬性不會與注入的屬性值合併。相反，它們將被覆蓋。例如，button 元件的實現可能如下所示：
<button {{ $attributes->merge(['type' => 'button']) }}>
{{ $slot }}
</button>要渲染具有自定義 type 的按鈕元件，可以在使用元件時指定。如果未指定類型，將使用 button 類型：
<x-button type="submit">
提交
</x-button>此示例中 button 元件的渲染 HTML 將如下所示：
<button type="submit">
提交
</button>如果您希望除了 class 之外的屬性具有其預設值和注入值結合在一起，可以使用 prepends 方法。在此示例中，data-controller 屬性將始終以 profile-controller 開頭，並且任何其他注入的 data-controller 值將放在此預設值之後：
<div {{ $attributes->merge(['data-controller' => $attributes->prepends('profile-controller')]) }}>
{{ $slot }}
</div>您可以使用 filter 方法來篩選屬性。此方法接受一個閉包，如果您希望在屬性包中保留屬性，則應返回 true：
{{ $attributes->filter(fn (string $value, string $key) => $key == 'foo') }}為了方便起見，您可以使用 whereStartsWith 方法來檢索所有鍵以特定字串開頭的屬性：
相反地，whereDoesntStartWith 方法可用於排除所有鍵以特定字串開頭的屬性：
{{ $attributes->whereDoesntStartWith('wire:model') }}使用 first 方法，您可以呈現給定屬性包中的第一個屬性：
{{ $attributes->whereStartsWith('wire:model')->first() }}如果您想要檢查組件上是否存在某個屬性，您可以使用 has 方法。此方法將屬性名稱作為其唯一引數，並返回一個布林值，指示該屬性是否存在：
@if ($attributes->has('class'))
<div>Class 屬性存在</div>
@endif如果將陣列傳遞給 has 方法，該方法將確定組件上是否存在所有給定的屬性：
@if ($attributes->has(['name', 'class']))
<div>所有屬性都存在</div>
@endifhasAny 方法可用於確定組件上是否存在任何給定的屬性：
@if ($attributes->hasAny(['href', ':href', 'v-bind:href']))
<div>其中一個屬性存在</div>
@endif您可以使用 get 方法檢索特定屬性的值：
{{ $attributes->get('class') }}預設情況下，某些關鍵字保留供 Blade 在渲染組件時內部使用。以下關鍵字不能在您的組件中定義為公共屬性或方法名稱：
datarenderresolveViewshouldRenderviewwithAttributeswithName
您通常需要通過“插槽”將額外內容傳遞給您的組件。組件插槽通過回顯 $slot 變數來呈現。為了探索這個概念，讓我們假設一個 alert 組件具有以下標記：
<!-- /resources/views/components/alert.blade.php -->
<div class="alert alert-danger">
{{ $slot }}
</div>我們可以通過將內容注入組件來將內容傳遞給 slot：
<x-alert>
<strong>糟糕！</strong> 發生了錯誤！
</x-alert>有時候，一個元件可能需要在元件的不同位置渲染多個不同的插槽。讓我們修改我們的警示元件，以允許注入一個 "title" 插槽：
<!-- /resources/views/components/alert.blade.php -->
<span class="alert-title">{{ $title }}</span>
<div class="alert alert-danger">
{{ $slot }}
</div>您可以使用 x-slot 標籤來定義命名插槽的內容。任何不在明確的 x-slot 標籤內的內容將被傳遞到 $slot 變數中的元件：
<x-alert>
<x-slot:title>
Server Error
</x-slot>
<strong>Whoops!</strong> Something went wrong!
</x-alert>您可以調用插槽的 isEmpty 方法來確定插槽是否包含內容：
<span class="alert-title">{{ $title }}</span>
<div class="alert alert-danger">
@if ($slot->isEmpty())
This is default content if the slot is empty.
@else
{{ $slot }}
@endif
</div>此外，hasActualContent 方法可用於確定插槽是否包含任何不是 HTML 註釋的 "實際" 內容：
@if ($slot->hasActualContent())
作用域中有非註釋內容。
@endif如果您使用過像 Vue 這樣的 JavaScript 框架，您可能熟悉 "作用域插槽"，它允許您在插槽中訪問組件中的數據或方法。您可以通過在組件上定義公共方法或屬性並通過 $component 變數在插槽中訪問組件來在 Laravel 中實現類似的行為。在這個例子中，我們假設 x-alert 元件在其組件類中定義了一個名為 formatAlert 的公共方法：
<x-alert>
<x-slot:title>
{{ $component->formatAlert('Server Error') }}
</x-slot>
<strong>Whoops!</strong> Something went wrong!
</x-alert>與 Blade 元件一樣，您可以為插槽分配額外的 屬性，如 CSS 類名：
<x-card class="shadow-sm">
<x-slot:heading class="font-bold">
Heading
</x-slot>
Content
<x-slot:footer class="text-sm">
Footer
</x-slot>
</x-card>要與插槽屬性互動，您可以訪問插槽變數的 attributes 屬性。有關如何與屬性互動的更多信息，請參考 組件屬性 的文檔：
@props([
'heading',
'footer',
])
<div {{ $attributes->class(['border']) }}>
<h1 {{ $heading->attributes->class(['text-lg']) }}>
{{ $heading }}
</h1>
{{ $slot }}
<footer {{ $footer->attributes->class(['text-gray-700']) }}>
{{ $footer }}
</footer>
</div>對於非常小的組件，同時管理組件類和組件的視圖模板可能感覺很繁瑣。因此，您可以直接從 render 方法返回組件的標記：
/**
* Get the view / contents that represent the component.
*/
public function render(): string
{
return <<<'blade'
<div class="alert alert-danger">
{{ $slot }}
</div>
blade;
}若要建立一個渲染內嵌視圖的元件，您可以在執行 make:component 指令時使用 inline 選項：
php artisan make:component Alert --inline有時您可能需要渲染一個元件，但直到執行時才知道應該渲染哪個元件。在這種情況下，您可以使用 Laravel 內建的 dynamic-component 元件，根據執行時的值或變數來渲染元件：
// $componentName = "secondary-button";
<x-dynamic-component :component="$componentName" class="mt-4" />Warning
以下關於手動註冊元件的文件主要適用於編寫包含視圖元件的 Laravel 套件的人。如果您不是在撰寫套件，這部分元件文件的內容可能與您無關。
在為您自己的應用程式編寫元件時，元件會自動在 app/View/Components 目錄和 resources/views/components 目錄中被發現。
但是，如果您正在建立一個使用 Blade 元件的套件或將元件放在非傳統目錄中，您需要手動註冊您的元件類別及其 HTML 標籤別名，以便 Laravel 知道在哪裡找到該元件。通常應在套件的服務提供者的 boot 方法中註冊您的元件：
use Illuminate\Support\Facades\Blade;
use VendorPackage\View\Components\AlertComponent;
/**
* Bootstrap your package's services.
*/
public function boot(): void
{
Blade::component('package-alert', AlertComponent::class);
}元件註冊後，可以使用其標籤別名來渲染：
<x-package-alert/>或者，您可以使用 componentNamespace 方法按照慣例自動載入元件類別。例如，一個 Nightshade 套件可能有位於 Package\Views\Components 命名空間中的 Calendar 和 ColorPicker 元件：
這將允許使用 package-name:: 語法通過其供應商命名空間來使用套件元件：
<x-nightshade::calendar />
<x-nightshade::color-picker />Blade 將自動檢測與此元件相關聯的類別，方法是將元件名稱轉換為帕斯卡大小寫。子目錄也支持使用「點」表示法。
與內聯元件類似，匿名元件提供了一種通過單個文件管理元件的機制。但是，匿名元件利用單個視圖文件，並且沒有相關聯的類別。要定義匿名元件，您只需將 Blade 模板放在您的 resources/views/components 目錄中。例如，假設您在 resources/views/components/alert.blade.php 中定義了一個元件，您可以像這樣簡單地呈現它：
<x-alert/>您可以使用 . 字元來指示元件是否更深層嵌套在 components 目錄中。例如，假設元件定義在 resources/views/components/inputs/button.blade.php，您可以這樣呈現它：
<x-inputs.button/>有時，當一個元件由許多 Blade 模板組成時，您可能希望將給定元件的模板分組在單個目錄中。例如，想像一個具有以下目錄結構的「手風琴」元件：
/resources/views/components/accordion.blade.php
/resources/views/components/accordion/item.blade.php
這個目錄結構允許您像這樣呈現手風琴元件及其項目：
<x-accordion>
<x-accordion.item>
...
</x-accordion.item>
</x-accordion>然而，為了通過 x-accordion 呈現手風琴元件，我們被迫將「索引」手風琴元件模板放在 resources/views/components 目錄中，而不是將其與其他與手風琴相關的模板嵌套在 accordion 目錄中。
幸運的是，Blade 允許您在元件的目錄中放置與元件目錄名稱匹配的文件。當此模板存在時，即使它嵌套在目錄中，它也可以作為元件的「根」元素呈現。因此，我們可以繼續使用上面示例中給出的相同 Blade 語法；但是，我們將調整我們的目錄結構如下：
/resources/views/components/accordion/accordion.blade.php
/resources/views/components/accordion/item.blade.php
由於匿名元件沒有任何相關的類別，您可能會想知道應該將哪些資料作為變數傳遞給元件，以及應該將哪些屬性放在元件的屬性包中。
您可以在元件的 Blade 模板頂部使用 @props 指示詞來指定哪些屬性應該被視為資料變數。元件上的所有其他屬性將通過元件的屬性包可用。如果您希望給資料變數設定默認值，您可以將變數名稱指定為陣列鍵，將默認值指定為陣列值：
<!-- /resources/views/components/alert.blade.php -->
@props(['type' => 'info', 'message'])
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>根據上面的元件定義，我們可以這樣呈現元件：
<x-alert type="error" :message="$message" class="mb-4"/>有時您可能希望在子元件內部存取父元件的資料。在這些情況下，您可以使用 @aware 指示詞。例如，假設我們正在建立一個由父 <x-menu> 和子 <x-menu.item> 組成的複雜選單元件：
<x-menu color="purple">
<x-menu.item>...</x-menu.item>
<x-menu.item>...</x-menu.item>
</x-menu><x-menu> 元件可能具有以下實現：
<!-- /resources/views/components/menu/index.blade.php -->
@props(['color' => 'gray'])
<ul {{ $attributes->merge(['class' => 'bg-'.$color.'-200']) }}>
{{ $slot }}
</ul>因為 color 屬性只傳遞給了父元件（<x-menu>），所以在 <x-menu.item> 內部將無法使用。但是，如果我們使用 @aware 指示詞，我們也可以在 <x-menu.item> 內部使用它：
<!-- /resources/views/components/menu/item.blade.php -->
@aware(['color' => 'gray'])
<li {{ $attributes->merge(['class' => 'text-'.$color.'-800']) }}>
{{ $slot }}
</li>Warning
@aware 指示詞無法存取未通過 HTML 屬性明確傳遞給父元件的父元件資料。未明確傳遞給父元件的預設 @props 值無法被 @aware 指示詞存取。
如先前討論的，匿名元件通常是透過將 Blade 模板放置在您的 resources/views/components 目錄中來定義的。然而，除了預設路徑之外，您偶爾可能希望向 Laravel 註冊其他匿名元件路徑。
anonymousComponentPath 方法接受匿名元件位置的 "路徑" 作為第一個引數，以及一個可選的 "命名空間" 作為第二個引數，用於指定元件應該放置在其中。通常，應該從應用程式的一個 服務提供者 的 boot 方法中調用此方法：
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Blade::anonymousComponentPath(__DIR__.'/../components');
}當像上面的示例一樣註冊元件路徑時，它們在 Blade 元件中也可以不帶相應的前綴呈現。例如，如果在上面註冊的路徑中存在一個 panel.blade.php 元件，則可以這樣呈現：
<x-panel />"命名空間" 可以作為 anonymousComponentPath 方法的第二個引數提供：
Blade::anonymousComponentPath(__DIR__.'/../components', 'dashboard');提供前綴時，該 "命名空間" 內的元件可以在呈現元件時將命名空間前綴到元件名稱：
<x-dashboard::panel />大多數 Web 應用程式在各個頁面上保持相同的一般版面配置。如果我們必須在每個建立的視圖中重複整個版面 HTML，那麼維護我們的應用程式將變得非常繁瑣和困難。幸運的是，將此版面配置定義為單一的 Blade 元件，然後在整個應用程式中使用它是非常方便的。
例如，假設我們正在建立一個 "待辦事項" 清單應用程式。我們可以定義一個看起來像以下的 layout 元件：
<!-- resources/views/components/layout.blade.php -->
<html>
<head>
<title>{{ $title ?? 'Todo Manager' }}</title>
</head>
<body>
<h1>Todos</h1>
<hr/>
{{ $slot }}
</body>
</html>一旦layout元件被定義，我們可以建立一個使用該元件的 Blade 視圖。在這個例子中，我們將定義一個簡單的視圖，顯示我們的任務清單：
<!-- resources/views/tasks.blade.php -->
<x-layout>
@foreach ($tasks as $task)
<div>{{ $task }}</div>
@endforeach
</x-layout>請記住，注入到元件中的內容將提供給我們的layout元件內的預設$slot變數。正如您可能已經注意到的，我們的layout還尊重提供的$title插槽；否則，將顯示一個默認標題。我們可以使用元件文件中討論的標準插槽語法，從我們的任務清單視圖中注入自定義標題：
<!-- resources/views/tasks.blade.php -->
<x-layout>
<x-slot:title>
Custom Title
</x-slot>
@foreach ($tasks as $task)
<div>{{ $task }}</div>
@endforeach
</x-layout>現在我們已經定義了我們的版面和任務清單視圖，我們只需要從路由返回task視圖：
use App\Models\Task;
Route::get('/tasks', function () {
return view('tasks', ['tasks' => Task::all()]);
});版面也可以通過"模板繼承"來創建。這是在引入元件之前構建應用程序的主要方式。
首先，讓我們看一個簡單的例子。首先，我們將檢查一個頁面版面。由於大多數 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指令用於顯示給定區域的內容。
現在我們已經為我們的應用程序定義了一個版面，讓我們定義一個繼承該版面的子頁面。
在定義子視圖時，使用@extends Blade 指令指定子視圖應該“繼承”的版面。擴展 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 指示詞來附加（而不是覆蓋）版面配置的側邊欄內容。當視圖被呈現時，@@parent 指示詞將被版面的內容取代。
Note
與前一個範例相反，這個 sidebar 部分以 @endsection 結尾，而不是 @show。@endsection 指示詞僅定義一個區塊，而 @show 則定義並立即呈現該區塊。
@yield 指示詞也接受第二個參數作為預設值。如果被呈現的區塊未定義，則將呈現此值：
@yield('content', '預設內容')每當您在應用程式中定義 HTML 表單時，應該在表單中包含一個隱藏的 CSRF 欄位，以便 CSRF 保護 中介層可以驗證請求。您可以使用 @csrf Blade 指示詞來生成這個欄位：
<form method="POST" action="/profile">
@csrf
...
</form>由於 HTML 表單無法進行 PUT、PATCH 或 DELETE 請求，您需要添加一個隱藏的 _method 欄位來模擬這些 HTTP 動詞。@method Blade 指示詞可以為您創建這個欄位：
<form action="/foo/bar" method="POST">
@method('PUT')
...
</form>@error 指示詞可用於快速檢查特定屬性是否存在 驗證錯誤訊息。在 @error 指示詞內，您可以輸出 $message 變數以顯示錯誤訊息：
<!-- /resources/views/post/create.blade.php -->
<label for="title">Post Title</label>
<input
id="title"
type="text"
class="@error('title') is-invalid @enderror"
/>
@error('title')
<div class="alert alert-danger">{{ $message }}</div>
@enderror由於 @error 指示詞編譯為一個 "if" 陳述式，您可以使用 @else 指示詞在屬性沒有錯誤時呈現內容：
<!-- /resources/views/auth.blade.php -->
<label for="email">Email address</label>
<input
id="email"
type="email"
class="@error('email') is-invalid @else is-valid @enderror"
/>您可以將 特定錯誤包的名稱 作為 @error 指示詞的第二個參數，以檢索包含多個表單的頁面上的驗證錯誤訊息：
<!-- /resources/views/auth.blade.php -->
<label for="email">Email address</label>
<input
id="email"
type="email"
class="@error('email', 'login') is-invalid @enderror"
/>
@error('email', 'login')
<div class="alert alert-danger">{{ $message }}</div>
@enderrorBlade 允許您將內容推送到具名的堆疊，這些堆疊可以在另一個視圖或佈局中的其他位置呈現。這對於指定子視圖所需的任何 JavaScript 函式庫特別有用：
@push('scripts')
<script src="/example.js"></script>
@endpush如果您想要在給定的布林表達式評估為 true 時 @push 內容，您可以使用 @pushIf 指示詞：
@pushIf($shouldPush, 'scripts')
<script src="/example.js"></script>
@endPushIf您可以將內容推送到堆疊中任意次數。要呈現完整的堆疊內容，將堆疊的名稱傳遞給 @stack 指示詞：
<head>
<!-- Head Contents -->
@stack('scripts')
</head>如果您想要將內容預置到堆疊的開頭，您應該使用 @prepend 指示詞：
@push('scripts')
This will be second...
@endpush
// Later...
@prepend('scripts')
This will be first...
@endprepend@inject 指示詞可用於從 Laravel 服務容器 中檢索服務。傳遞給 @inject 的第一個引數是服務將放入的變數名稱，而第二個引數是您希望解析的服務的類別或介面名稱：
@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>有時您可能需要將原始 Blade 模板字符串轉換為有效的 HTML。您可以使用 Blade 門面提供的 render 方法來完成這個任務。render 方法接受 Blade 模板字符串和一個可選的數據陣列，以提供給模板：
use Illuminate\Support\Facades\Blade;
return Blade::render('Hello, {{ $name }}', ['name' => 'Julian Bashir']);Laravel 通過將內嵌 Blade 模板寫入 storage/framework/views 目錄來呈現內嵌 Blade 模板。如果您希望 Laravel 在呈現 Blade 模板後刪除這些臨時文件，您可以向該方法提供 deleteCachedView 參數：
return Blade::render(
'Hello, {{ $name }}',
['name' => 'Julian Bashir'],
deleteCachedView: true
);當使用前端框架如 Turbo 和 htmx 時，您可能偶爾需要僅在 HTTP 回應中返回 Blade 模板的一部分。Blade "片段" 正好讓您可以這樣做。要開始，將您的 Blade 模板部分放在 @fragment 和 @endfragment 指示詞之間：
@fragment('user-list')
<ul>
@foreach ($users as $user)
<li>{{ $user->name }}</li>
@endforeach
</ul>
@endfragment然後，在渲染使用此模板的視圖時，您可以調用 fragment 方法來指定只應在輸出的 HTTP 回應中包含指定的片段：
return view('dashboard', ['users' => $users])->fragment('user-list');fragmentIf 方法允許您有條件地返回視圖的片段，根據給定的條件。否則，將返回整個視圖：
return view('dashboard', ['users' => $users])
->fragmentIf($request->hasHeader('HX-Request'), 'user-list');fragments 和 fragmentsIf 方法允許您在回應中返回多個視圖片段。這些片段將被串聯在一起：
view('dashboard', ['users' => $users])
->fragments(['user-list', 'comment-list']);
view('dashboard', ['users' => $users])
->fragmentsIf(
$request->hasHeader('HX-Request'),
['user-list', 'comment-list']
);Blade 允許您使用 directive 方法定義自己的自訂指示詞。當 Blade 編譯器遇到自訂指示詞時，將使用提供的回呼函式調用該指示詞所包含的表達式。
以下示例創建了一個 @datetime($var) 指示詞，用於格式化給定的 $var，該 $var 應該是 DateTime 的實例：
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*/
public function register(): void
{
// ...
}
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Blade::directive('datetime', function (string $expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
}如您所見，我們將 format 方法鏈接到傳遞給指示詞的任何表達式上。因此，在此示例中，此指示詞生成的最終 PHP 將是：
<?php echo ($var)->format('m/d/Y H:i'); ?>Warning
在更新 Blade 指示詞的邏輯後，您需要刪除所有快取的 Blade 視圖。可以使用 view:clear Artisan 命令來刪除快取的 Blade 視圖。
若您嘗試使用 Blade 來 "echo" 一個物件，該物件的 __toString 方法將被調用。__toString 方法是 PHP 內建的 "魔術方法" 之一。然而，有時您可能無法控制特定類別的 __toString 方法，例如當您與屬於第三方函式庫的類別互動時。
在這些情況下，Blade 允許您為該特定類型的物件註冊自訂 echo 處理器。為了達成這一點，您應該調用 Blade 的 stringable 方法。stringable 方法接受一個閉包。這個閉包應該對應負責渲染的物件類型進行型別提示。通常，stringable 方法應該在應用程式的 AppServiceProvider 類別的 boot 方法內被調用：
use Illuminate\Support\Facades\Blade;
use Money\Money;
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Blade::stringable(function (Money $money) {
return $money->formatTo('en_GB');
});
}一旦您定義了自訂 echo 處理器，您可以在 Blade 模板中簡單地 echo 該物件：
成本：{{ $money }}當定義簡單的自訂條件陳述式時，有時編寫自訂指示詞可能比必要的更複雜。因此，Blade 提供了一個 Blade::if 方法，讓您可以快速使用閉包定義自訂條件指示詞。例如，讓我們定義一個自訂條件，檢查應用程式的配置預設 "disk"。我們可以在 AppServiceProvider 的 boot 方法中進行這個操作：
use Illuminate\Support\Facades\Blade;
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Blade::if('disk', function (string $value) {
return config('filesystems.default') === $value;
});
}一旦定義了自訂條件，您可以在模板中使用它：
@disk('local')
<!-- The application is using the local disk... -->
@elsedisk('s3')
<!-- The application is using the s3 disk... -->
@else
<!-- The application is using some other disk... -->
@enddisk
@unlessdisk('local')
<!-- The application is not using the local disk... -->
@enddisk