iT邦幫忙

2025 iThome 鐵人賽

DAY 6
0
Modern Web

Laravel 30天速成筆記系列 第 6

【Day6】Blade 模板引擎

  • 分享至 

  • xImage
  •  

昨天我們學會了用 Controller 把資料和功能分開,今天要學的是 Blade 模板引擎,它可以讓我們更方便的把資料和 HTML 結合,做出漂亮且容易維護的網頁!!


什麼是 Blade?

Blade 是 Laravel 內建的「網頁模板工具」,就像是「網頁的拼裝工廠」:

  • 你準備好 HTML 的結構
  • Laravel 會幫你把資料自動填進去
  • 最後組裝成完整的網頁

好處是:

  1. 語法簡單!!
  2. 不用每頁都重複寫一樣的 HTML
  3. 容易和 Laravel 的資料互動

Blade 檔案放哪?

所有 Blade 模板放在:resources/views/
副檔名是 .blade.php
例如 welcome.blade.php


在 Blade 顯示資料

假設 Controller 傳了一個變數 $name

public function hello()
{
    $name = "Amy";
    return view('welcome', ['name' => $name]);
}

resources/views/welcome.blade.php

<h1>你好,{{ $name }}!</h1>

瀏覽器顯示:

你好,Amy!

{{ $變數 }} 就是 Blade 顯示資料的方式。


Blade的條件判斷

@if($age >= 18)
    <p>你已滿 18 歲</p>
@else
    <p>未滿 18 歲</p>
@endif

Blade的迴圈

<ul>
@foreach($items as $item)
    <li>{{ $item }}</li>
@endforeach
</ul>

Blade的版型繼承

<html>
<body>
    <header>我的網站</header>
    <main>
        @yield('content')
    </main>
</body>
</html>

子頁面繼承它:

@extends('layout')

@section('content')
<h1>首頁內容</h1>
@endsection

這樣可以避免每個頁面重複寫 header、footer


小結

  • Blade 是 Laravel 的網頁模板工具
  • {{ }} 顯示資料、@if 條件判斷、@foreach 迴圈
  • 可以用版型繼承讓網站結構更一致~

上一篇
【Day5】Controller 與 Request
下一篇
【Day7】使用 Eloquent ORM 操作資料庫
系列文
Laravel 30天速成筆記9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言