Laravel 的模板引擎支援 React、Vue 和其他庫。然而，開發者最喜歡的還是 Laravel Blade 引擎的強大功能，它可以快速建立模組化、可重用的檢視。Blade 可以讓你毫不費力地擴充套件布局、定義版塊，並使用控制結構生成資料驅動的內容。
這篇實踐文章將探討 Blade 是什麼、如何工作以及如何增強你的 Laravel 應用程式。
使用 Laravel Blade 所需的一切
Laravel Blade 是 Laravel 框架的預設模板引擎。它能讓你在 HTML 程式碼中直接使用變數、迴圈、條件語句和其他 PHP 功能。要建立 Blade 檔案，只需在 Laravel 專案的 resources/views 目錄下建立副檔名為 .blade.php 的檔案，定義 Blade 檢視，然後在這些檔案中構建你喜歡的動態頁面。
為什麼要使用 Blade？
Blade的一個主要優點是它的模組化程式碼組織。Blade可以將程式碼組織成可重複使用的模組，您可以輕鬆地新增、刪除或更新這些模組，而不會影響應用程式的其他部分。
程式碼封裝是 Blade 的另一個優勢。Blade 可幫助封裝功能，使測試、除錯和程式碼維護更加易於管理。這種方法有利於大型應用程式，因為沒有組織的應用程式很快就會變得難以管理。
Blade 的模板引擎效能卓越，是我們測試過的速度最快的 PHP 框架。該引擎會將所有 Blade 檢視編譯成純 PHP 程式碼，然後快取起來，直到你修改它們。這種方法提高了渲染速度和整體效能。
如何使用 Laravel Blade
在本教程中，我們將建立一個 Laravel 應用程式來體驗 Blade 模板的實際應用。學習定義和擴充套件 Blade 佈局、在 Blade 檢視之間傳遞資料、使用各種可用的控制結構，以及建立自己的 Blade。
先決條件
要學習本教程，請確保您具備以下條件：
- 熟悉 PHP
- 已安裝 Composer。執行
composer -V驗證系統中是否安裝了 Composer。
請檢視完整的教程程式碼，以便在工作時獲得指導。
如何建立 Laravel 應用程式
要建立 Laravel 應用程式示例，請執行：
composer create-project laravel/laravel my-app
按照終端上的提示完成應用程式的製作。
接下來，進入應用程式目錄，使用此命令為其提供服務：
cd my-app php artisan serve
點選終端中的連結，在瀏覽器上開啟 Laravel 歡迎頁面。
如何定義佈局
佈局可讓您配置網路應用程式的各個部分，以便在多個頁面之間共享。例如，如果您的應用程式在各個頁面中使用一致的導航欄和頁尾，那麼一次建立比為每個頁面重新建立更有效。
在學習逐步說明之前，請先看看下面的骨架演示。
建立無佈局網站的程式碼如下所示。它要求你為每個頁面重新編寫導航欄和頁尾程式碼。
<!-- Page 1 --> <nav>. . . </nav> Content for page 1 <footer> . . . </footer>
<!-- Page 2 --> <nav>. . . </nav> Content for page 2 <footer> . . . </footer>
相反，您可以使用佈局輕鬆構建應用程式，在單個程式碼塊中共享相同的元件：
<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>
一旦定義了佈局，就可以在任何頁面上使用：
<!-- Page 1 or Page n --> <main-layout> Content for page n </main-layout>
在舊版本的 Laravel 中，你必須使用模板繼承來建立佈局。然而，當公司新增了元件功能後，建立強大的佈局就變得容易多了。
要使用 Laravel Blade 建立一個新佈局，首先要執行這條命令來建立佈局的元件：
php artisan make:component Layout
該命令會生成一個新的 layout.blade.php 檔案，該檔案位於 resources/views/ 目錄下名為 components 的新資料夾中。開啟該檔案並貼上以下程式碼：
<html>
<head>
<title>{{ $title ?? 'Example Website' }}</title>
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>
<nav>
<h3>Welcome to my website</h3>
<hr>
</nav>
{{ $slot }}
<footer>
<hr />
© 2023 example.com
</footer>
</body>
</html>
這段程式碼將建立一個具有簡單導航欄和頁尾的佈局元件。 slot 函式定義了在擴充套件布局元件時傳遞主要內容的位置。
如何擴充套件布局
您可以使用標籤在 blade 檢視中輕鬆匯入元件。此方法同樣適用於你之前建立的佈局元件。
要檢視擴充套件布局的效果，請開啟預設的 resources/views/welcome.blade.php 檔案，並用以下程式碼替換該檔案的內容：
<x-layout> <div> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p> <button class="btn">Get Started</button> </div> </x-layout>
這種方法可以更新歡迎頁面以使用佈局元件，同時傳遞一個標題元素和一段模擬文字作為其內容。重新載入之前開啟的連結，檢視更改。
在佈局定義中，請注意如果程式碼不傳遞標題資料，則會呈現預設為 “Example Website” 的標題資料。您可以通過 <x-slot name="slotName" /> 程式碼在檢視中以命名槽的形式傳遞這些資料，在本例中就是 <x-slot name="title" /> 。用下面的程式碼更新 welcome.blade.php 檔案，然後重新載入頁面：
<x-layout> <x-slot name="title"> Home | Example Website </x-slot> <div> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p> <button class="btn">Get Started</button> </div> </x-layout>
接下來，新增一些樣式來增強應用程式的外觀。在 /public/css 目錄下新建一個 app.css 檔案，然後貼上該檔案中的程式碼。
完成所有這些更新後，您在 http://127.0.0.1:8000/ 上預覽應用程式時應該會看到以下輸出。
Hello world
如何加入後臺資料
在前面的示例中，你通過插槽在元件和檢視之間輕鬆地共享了資料。不過，從資料庫或其他遠端源載入資料有更好的方法。
在這種情況下，可以直接從路由器定義中載入和傳遞資料，並像訪問前例中的命名槽一樣訪問資料。為此，請開啟 routes/web.php 檔案，並用以下程式碼替換其內容：
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$name = "John Doe";
return view('welcome', ['name' => $name]);
});
在上面的程式碼中，您更新了網路路由，將名稱 ” John Doe ” 傳遞給了歡迎檢視。現在，像這樣在 blade 檢視中訪問這個值：
<div>
Hello, {{ $name }}
<!-- Outputs: Hello, John Doe -->
</div>
您可以使用這種方法從資料庫載入資料。例如，假設您有一個包含待辦事項列表的待辦事項表。使用 DB facade 載入這些待辦事項，並將它們傳遞給檢視：
<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$todos = DB::table('todos')->get();
return view('welcome', ['todos' => $todos]);
});
不過，如果您沒有資料庫，可更新網路入口路由以傳遞靜態待辦事項陣列。開啟 routes/web.php 檔案，用下面的程式碼更新預設 ( / ) 路由：
Route::get('/', function () {
$todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
return view('welcome', ['todos' => $todos]);
});
用下面的程式碼替換 welcome.blade.php 檔案的內容，以 JSON 編碼陣列的形式訪問待辦事項。
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<p>{{ json_encode($todos) }}</p>
<!-- Output: ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
</x-layout>
如何使用控制快捷鍵
Blade 模板引擎還支援多個指令，以有條件地呈現各種資料型別。例如，要遍歷傳給歡迎檢視的 to-dos 返回陣列，可在 welcome.blade.php 檔案中貼上以下程式碼，應用 foreach 迴圈：
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<ul>
@foreach ($todos as $todo)
<li>{{ $todo }}</li>
@endforeach
</ul>
</x-layout>
這一更改將以無序列表的形式顯示待辦事項，就像下面的截圖一樣。
無序列表中的待辦事項
要構建條件語句塊，可使用 @if 、 @elseif 、 @else 和 @endif 指令。例如
@if (count($todos) === 1) <p>I have one task!</p> @elseif (count($todos) > 1) <p>I have multiple tasks!</p> @else <p>I don't have any tasks!</p> @endif
用上述程式碼替換 welcome.blade.php 檔案的內容。各種 if-else 指令會計算待辦事項，並在不同情況下顯示自定義資訊。如果您的待辦事項陣列中包含多個任務，您就會在瀏覽器中看到輸出 “I have multiple tasks!”（我有多個任務！）。
你可以在 Laravel 文件中找到更多支援的指令。
如何構建自定義擴充套件
您也可以編寫與上例類似的自定義指令。要探索這種技術，請建立一個自定義文字截斷指令。
首先，執行以下命令建立一個新的服務提供器：
php artisan make:provider TruncateTextServiceProvider
該命令會生成一個新的服務提供器檔案，檔名為 app/Providers/TruncateTextServiceProvider.php。開啟該檔案並將其內容替換為
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class TruncateTextServiceProvider extends ServiceProvider
{
public function register()
{
//
}
public function boot()
{
Blade::directive('truncate', function ($expression) {
list($text, $length) = explode(',', $expression);
return "<?php echo Str::limit($text, $length); ?>";
});
}
}
程式碼匯入了 Blade Facade，並定義了一個名為 @truncate 的新自定義指令。該指令接受兩個引數： $text 和 $length 。它使用 Str::limit() 方法將文字截斷到指定長度。
最後，將服務提供者新增到 config/app.php 配置檔案中的提供者陣列中，註冊服務提供者：
'providers' => [ // Other service providers App\Providers\TruncateTextServiceProvider::class, ],
在 Blade 模板（welcome.blade.php）中使用自定義指令，通過 @truncate 語法呼叫它。
<div>
@truncate('Lorem ipsum dolor sit amet', 10)
<!-- Outputs: Lorem ipsu... -->
</div>
小結
本文探討了 Laravel Blade 如何幫助你簡化開發流程，同時為網路應用程式建立模組化和可重用的檢視。然而，你的 Laravel 開發之旅不應該就此結束。
評論留言