充分利用 Blade：Laravel 的模板引擎

什麼是模板引擎？

模板引擎就像一個工具，可以幫助您將內容和佈局分開。這使您的程式碼更乾淨且更易於管理。您無需將 HTML 與資料混合，而是建立定義內容外觀的模板，然後引擎負責填寫詳細資訊。

什麼是刀片？

Blade 是 Laravel 自己的模板引擎，它旨在讓您的生活更輕鬆。 Blade 模板儲存在 resources/views 目錄中，每個模板都有一個 .blade.php 副檔名。語法簡單明了，讓您可以輕鬆地將 HTML 與 PHP 混合。例如：

<h1 id="Hello-name">Hello, {{ $name }}!</h1>

但是 Blade 不僅僅用於顯示資料。您也可以在範本中新增邏輯，例如循環和條件。這是一個例子：

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

看看根據使用者是否登入顯示不同的內容是多麼容易？下次您需要循環存取使用者清單時，請嘗試使用 Blade 的 @foreach 指令。它很簡單並且可以讓你的程式碼保持整潔。

模板繼承

Blade 最好的功能之一是它如何幫助您重複使用佈局。您可以為您的網站建立一個主模板，然後只需填寫每個頁面的唯一內容。這是一個簡單的例子：

<!-- layout.blade.php -->


    <title>@yield('title')</title>


    <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 id="Welcome-to-the-Home-Page">Welcome to the Home Page!</h1>
@endsection

透過使用@extends，您可以連結到佈局，而@section允許您使用特定內容填充佔位符。這使您的程式碼保持乾燥（不要重複）並且超級易於管​​理。 Blade 簡化了您的工作流程，讓您更專注於重要的事情——建立出色的 Web 應用程式。

葉片組件

刀片元件就像 UI 的小構建塊。將它們想像成樂高積木——您可以創建介面的一個可重複使用的小部分，並可以將其卡入您需要的任何位置。這使您的程式碼更乾淨且更易於維護。

您可以定義一次元件並在整個應用程式中使用它。需要一個在不同頁面上看起來相同的按鈕嗎？為它創建一個 Blade 組件！更好的是，您可以將屬性傳遞給這些組件，使它們靈活且適應性強。

這是一個按鈕組件的簡單範例：

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

您可以使用元件類別使元件動態化。這允許您傳入類型或類別等屬性來自訂按鈕的行為或樣式。

// 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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Get The Most From Blade: Laravel"></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">

@csrf @method('PUT') Submit

需要更多客製化的東西嗎？您可以建立自己的 Blade 指令以實現可重複使用邏輯。

例如，假設您經常需要格式化日期。您可以像這樣定義自訂指令：

<h1 id="Hello-name">Hello, {{ $name }}!</h1>

其他特點

Blade 配備了一些非常方便的功能，可以讓您作為開發人員的生活更加順利。讓我們深入研究其中的一些。

管理資產 URL

需要連結您的 CSS 或 JavaScript 檔案嗎？ asset() 輔助函數可以滿足您的需求。它會為您的資源產生正確的 URL，因此您不必擔心路徑：

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

處理空數組或集合

Blade 的 @forelse 指令在處理空數組或集合時是一個救星。它可以讓您循環遍歷項目，還可以優雅地處理沒有項目的情況：

<!-- layout.blade.php -->


    <title>@yield('title')</title>


    <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 id="Welcome-to-the-Home-Page">Welcome to the Home Page!</h1>
@endsection

有條件的內容顯示

Blade 提供了多種指令來根據條件顯示內容：

@isset：檢查變數是否已設定
@empty：檢查變數是否為空
@unless：與 if 類似，但相反
這是使用 @isset 的範例：

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

防範 XSS

Blade 自動轉義輸出以保護您的應用程式免受 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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Get The Most From Blade: Laravel"></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">

@csrf @method('PUT') Submit

進階使用

需要包含包含 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 資料：

<link rel="stylesheet" href="%7B%7B%20asset('css/app.css')%20%7D%7D">

如果您使用 Livewire，Blade 可以與其無縫協作。您可以將 Blade 元件與 Livewire 元件一起使用，以實現動態的互動式 UI，而無需編寫太多 JavaScript。

@once 指令確保一段程式碼只運行一次。 Blade 可讓您建立根據您傳遞的資料進行調整的動態元件。這對於靈活、可重複使用的 UI 片段來說非常有用：

@forelse ($items as $item)
    <p>{{ $item }}</p>
@empty
    <p>No items found.</p>
@endforelse

@error 指令可協助您輕鬆顯示特定欄位的錯誤訊息：

@isset($variable)
    <p>{{ $variable }}</p>
@endisset

---

當我第一次開始使用 Blade 時，我對自己有多少選擇感到有點迷失，但不久之後，整個世界就向我敞開了。現在我無法想像沒有它的多功能功能的編碼。我希望這篇文章能幫助您找到進入這個令人驚嘆的模板引擎的方法。