Laravel - Blade Templates: A Beginner's Guide

您好，有志於網頁開發的各位！今天，我們將要深入 Laravel 的 Blade 模板引擎的奇妙世界。別擔心如果你從未編過程序碼——我將成為你這段旅程中的友好導遊，我們會一步一步地進行。

Laravel - Blade Templates

Blade 是什麼？

Blade 是 Laravel 的強大模板引擎。把它當作一個神奇的工具，它能幫助我們創建動態且可重用的 HTML 模板。這就像是有了一個超級聰明的助手，他能為你的網頁填充實際數據。

為什麼使用 Blade？

它簡單且容易學習
它讓你的代碼更乾淨、更易於閱讀
它幫助你避免重複（記住，開發者喜歡偷懶——這是一種好的懶散！）

現在，讓我們挽起袖子開始吧！

創建 Blade 模板佈局的步驟

1. 創建主佈局

首先，我們需要創建一個主佈局。這就像是你的網站的骨骼——它包含了每個頁面上都保持不變的部分。

在 resources/views 目錄中創建一個名為 layout.blade.php 的新文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>我的超棒網站</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 我的超棒網站</p>
</footer>
</body>
</html>

讓我們來分解這個：

@yield('title')：這告訴 Blade，"嘿，我們稍後會為每個頁面填入標題。"
@yield('content')：這是每個頁面的主要內容將要放置的地方。

2. 創建子模板

現在，讓我們創建一個使用我們佈局的子模板。創建一個名為 home.blade.php 的新文件：

@extends('layout')

@section('title', '首頁')

@section('content')
<h2>歡迎來到我的超棒網站！</h2>
<p>這是首頁內容。</p>
@endsection

這裡發生了什麼：

@extends('layout')：這告訴 Blade 使用我們的 layout.blade.php 文件作為基礎。
@section('title', '首頁')：這填滿了我們先前留下的標題。
@section('content')：這是我們放置這個頁面獨特內容的地方。

3. 顯示數據

Blade 在顯示數據方面非常出色。讓我們假設我們想要顯示一個水果列表。我們將更新我們的 home.blade.php：

@extends('layout')

@section('title', '首頁')

@section('content')
<h2>歡迎來到我的超棒網站！</h2>
<p>這是首頁內容。</p>

<h3>我們的水果選擇：</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>對不起，我們已經沒有水果了！</p>
@endif
@endsection

在這個例子中：

@if 和 @else：這些讓我們在模板中做出決定。
@foreach：這幫助我們循環我們的水果列表。
{{ $fruit }}：雙重花括號告訴 Blade 顯示變量的值。

4. 使用 Blade 組件

Blade 組件就像是你的網站的樂高積木。它們是你可以跨不同頁面重用的部件。讓我們為按鈕創建一個簡單的組件。

在 resources/views/components/button.blade.php 中創建一個新文件：

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

現在我們可以在我們的 home.blade.php 中使用這個按鈕：

@extends('layout')

@section('title', '首頁')

@section('content')
<h2>歡迎來到我的超棒網站！</h2>
<p>這是首頁內容。</p>

@component('components.button', ['type' => 'success'])
點我！
@endcomponent
@endsection

這將創建一個帶有文字 "點我！" 和成功樣式的按鈕。

Blade 指令速查表

以下是一些常見的 Blade 指令：

指令	用途
@if	條件語句
@else	@if 的替代
@elseif	替代條件
@foreach	循環數組
@for	for 循環
@while	while 循環
@switch	switch 語句
@yield	在佈局中定義一個區域
@section	定義佈局內容
@extends	指定使用哪個佈局
@include	包含另一個視圖
@auth	檢查用戶是否已認證
@guest	檢查用戶是否是訪客

記住，熟能生巧！不要害怕嘗試這些指令並創建有你自己風格的模板。在你還沒有察覺之前，你將會成為一名 Blade 高手，像熱刀切黃油一樣切割 HTML！

在我多年的教學經驗中，我發現最好的學習方式就是實踐。那麼，為什麼不嘗試使用我們學到的知識來創建一個簡單的博客佈局呢？從一個主佈局開始，創建首頁、關於我們和博客文章的頁面，並使用 Blade 的強大功能來讓你的代碼保持乾淨和DRY（不要重複自己）。

快樂編程，願 Blade 伴你前行！?

Credits: Image by storyset