適合對象：Laravel 新手、PHP 開發者、想快速上手現代 Blade 模板的同學
Laravel 的 Blade 模板引擎是打造優雅、可維護前端視圖的核心工具。它簡單卻強大：既支援原生 PHP，又提供大量便捷指令，讓你的 HTML 程式碼乾淨俐落。
在 2026 年的 Laravel（11.x / 12.x）中，Blade 仍是主流選擇，尤其在元件化開發上更加成熟。本文將帶你從零開始，掌握視圖基礎、佈局繼承、現代元件用法。
1. Blade 是什麼？為什麼值得學習？
- Blade 檔案以 .blade.php 結尾
- 自動編譯成純 PHP，效能優秀
- 支援模板繼承、元件、插槽、條件、迴圈等
- 與 Livewire、Inertia 等前端方案無縫整合
- 官方文件：https://laravel.com/docs/blade
2. 基本語法快速瀏覽
在控制器中返回視圖並傳遞資料：
PHP
// routes/web.php 或控制器
return view('welcome', [
'title' => '我的 Laravel 應用',
'users' => ['張三', '李四', '王五']
]);
視圖檔案 resources/views/welcome.blade.php：
blade
<!DOCTYPE html>
<html>
<head>
<title>{{ $title }}</title>
</head>
<body>
<h1>歡迎使用 Laravel {{ now()->year }}！</h1>
<!-- 輸出已轉義，防止 XSS -->
<p>目前使用者：{{ $users[0] }}</p>
<!-- 不轉義輸出（小心使用） -->
<div>{!! '<strong>粗體內容</strong>' !!}</div>
<!-- 迴圈 -->
<ul>
@foreach ($users as $user)
<li>{{ $user }}</li>
@endforeach
</ul>
<!-- 條件 -->
@if (count($users) > 3)
<p>使用者很多！</p>
@else
<p>使用者較少</p>
@endif
</body>
</html>
常用指令速查：
- @if / @else / @endif
- @foreach / @endforeach
- @for / @endfor
- @while / @endwhile
- @isset($var) / @empty($var)
- {{ $var ?? '預設值' }}
- @auth / @guest
3. 佈局（Layout） — 避免重複撰寫頭尾
現代網頁應用幾乎都使用佈局來統一結構。
步驟 1：建立主佈局 resources/views/layouts/app.blade.php
blade
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title') - 我的應用</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="antialiased">
<header>
<nav>導航列</nav>
</header>
<main class="container mx-auto py-8">
@yield('content')
</main>
<footer class="bg-gray-800 text-white py-4">
<div class="container mx-auto text-center">
© {{ now()->year }} Laravel 學習站
</div>
</footer>
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
</body>
</html>
步驟 2：子頁面繼承佈局 resources/views/home.blade.php
blade
@extends('layouts.app')
@section('title', '首頁')
@section('content')
<h1 class="text-3xl font-bold">歡迎來到首頁！</h1>
<p>這是內容區域</p>
@endsection
@push('scripts')
<script>
console.log('首頁專用 JS');
</script>
@endpush
4. 現代推薦：Blade 元件（Components） — 2026 年最愛
元件比舊式的 @include 更強大，支援屬性、插槽。
建立元件：
Bash
php artisan make:component Alert
產生兩個檔案：
- app/View/Components/Alert.php
- resources/views/components/alert.blade.php
元件視圖 alert.blade.php：
blade
<div class="p-4 rounded {{ $type === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
{{ $slot }}
</div>
使用元件：
blade
<x-alert type="success">
操作成功！歡迎加入我們。
</x-alert>
<x-alert type="error">
密碼錯誤，請重試。
</x-alert>
帶命名插槽的高級用法：
blade
<x-card>
<x-slot name="header">
<h2 class="text-xl">卡片標題</h2>
</x-slot>
<p>卡片內容...</p>
</x-card>
5. 最佳實務與小技巧（2026 版）
- 搭配 Tailwind CSS + Blade 元件，開發效率翻倍
- 優先使用匿名元件（無需類別），適合簡單 UI 區塊
- 大型專案推薦使用 Storybook for Blade 或元件庫（如 Laravel Volt）
- 避免在 Blade 中寫複雜邏輯 → 移到 View Composer 或元件類別
- 開啟 Blade 快取：php artisan view:cache
- 除錯技巧：@dd($variable) 或 Laravel Debugbar
結語
掌握 Blade 後，你的 Laravel 前端程式碼會變得異常優雅、可重用。建議搭配 Laravel Breeze / Jetstream 快速上手完整認證 + 佈局系統。
想看影片示範？ YouTube 搜尋：Laravel Blade Tutorial for Beginners 2026 或直接點擊：https://youtu.be/HtbENzC74po
歡迎在下方留言你的疑問，一起學習 Laravel！
標籤：#Laravel #Blade #Laravel教學 #PHP #網頁開發 #2026