การสร้าง Layout ด้วย Blade ช่วยให้การจัดการโครงสร้างหน้าเว็บใน Laravel เป็นไปได้ง่ายและมีความเป็นระเบียบมากขึ้น Layout สามารถใช้เป็นแม่แบบสำหรับหน้าเว็บหลายๆ หน้า โดยมีส่วนที่เป็นโครงสร้างหลัก เช่น Header, Footer, Sidebar และส่วนที่เป็นเนื้อหาหลัก (Content) ซึ่งสามารถกำหนดให้แตกต่างกันไปในแต่ละหน้า
การสร้าง Layout แม่แบบใน Blade
- สร้างไฟล์ Layout แม่แบบในโฟลเดอร์
resources/views/layouts - ตั้งชื่อไฟล์เป็น
main.blade.php(หรือตามต้องการ)
ตัวอย่างไฟล์ main.blade.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- resources/views/layouts/main.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>My Laravel App</h1> @include('partials.nav') </header> <main> @yield('content') </main> <footer> <p>&copy; 2023 My Laravel App</p> </footer></body></html> |
ในตัวอย่างนี้เราใช้คำสั่ง @yield('title') และ @yield('content') ซึ่งจะถูกแทนที่ด้วยเนื้อหาในแต่ละหน้า
การสร้าง View ที่ใช้ Layout นี้
จากนั้นเราจะสร้าง View ที่ใช้ Layout นี้โดยการใช้คำสั่ง @extends เพื่อระบุ Layout ที่ต้องการใช้ และกำหนด @section เพื่อระบุเนื้อหาที่ต้องการในแต่ละส่วน
ตัวอย่างไฟล์ home.blade.php:
1 2 3 4 5 6 7 8 | <!-- resources/views/home.blade.php -->@extends('layouts.main')@section('title', 'Home Page')@section('content') <p>ยินดีต้อนรับสู่หน้าแรกของเรา!</p>@endsection |
ในตัวอย่างนี้ เรากำหนดชื่อหน้าเป็น “Home Page” และเนื้อหาหลักของหน้าผ่านคำสั่ง @section('content') ข้อมูลนี้จะไปแทนที่ตำแหน่ง @yield('content') ใน Layout แม่แบบ main.blade.php
การใช้ @include สำหรับส่วนที่ใช้ร่วมกัน
Blade มีคำสั่ง @include ที่ช่วยให้เราสามารถแทรก View ย่อยๆ เช่น ส่วนของเมนู (Navigation), Header หรือ Footer ได้
ตัวอย่างไฟล์ partials/nav.blade.php:
1 2 3 4 5 6 7 8 | <!-- resources/views/partials/nav.blade.php --><nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul></nav> |
จากนั้นเราสามารถใช้ @include เพื่อแทรกเมนูนี้เข้าไปใน Layout หลัก main.blade.php โดยใส่ไว้ในตำแหน่งที่ต้องการ เช่น ในส่วน Header
การนำไปใช้งาน
การสร้าง Layout ด้วย Blade ช่วยให้การจัดการหน้าเว็บใน Laravel มีความสะดวกมากขึ้น โดยสามารถกำหนดโครงสร้างหลักเพียงครั้งเดียวแล้วใช้เป็นแม่แบบได้หลายหน้า ลดความซ้ำซ้อน และเพิ่มความเป็นระบบในการจัดการเนื้อหาที่แตกต่างกันในแต่ละหน้า