close

เค้าโครงอาคารด้วย Laravel- การสร้างอินเทอร์เฟซที่ยืดหยุ่นและบำรุงรักษาได้

ใน Laravel เค้าโครงมีบทบาทสำคัญในการสร้างส่วนติดต่อผู้ใช้สำหรับเว็บแอปพลิเคชัน เค้าโครงแสดงถึงโครงสร้างโดยรวมของหน้าเว็บ รวมถึงส่วน ทั่วไป  เช่น header และ ในบทความนี้ เราจะสำรวจวิธีสร้างเลย์เอาต์ เพื่อสร้างอินเทอร์เฟซที่ยืดหยุ่นและบำรุงรักษาได้ footer sidebar Laravel

อันดับแรก มาสร้างเค้าโครงพื้นฐานสำหรับเว็บไซต์ของเรากันก่อน เริ่มต้นด้วยการสร้างชื่อไฟล์ app.blade.php ใน ไดเร็กทอรี ไฟล์นี้จะทำหน้าที่เป็นเค้าโครงหลักสำหรับเว็บไซต์ทั้งหมด resources/views/layouts

นี่คือตัวอย่างเนื้อหาสำหรับ app.blade.php ไฟล์:

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

ในเค้าโครงนี้ เราใช้ @yield คำสั่งเพื่อกำหนดส่วนไดนามิกภายในเค้าโครง ตัวอย่างเช่น @yield('title') อนุญาตให้ลูก แทนที่และตั้งชื่อหน้า ในทำนองเดียวกัน อนุญาตให้ลูก แทรกเนื้อหาหลักของหน้า views @yield('content') views

เมื่อสร้างเลย์เอาต์แล้ว เราสามารถสร้างลูก ที่ใช้เลย์เอาต์นี้ได้ ตัวอย่างเช่น หากต้องการสร้าง เพจที่มีเค้าโครงคล้ายกัน ให้สร้างไฟล์ชื่อ ใน ไดเร็กทอรี ไฟล์นี้จะขยาย  เค้าโครงและกำหนดเนื้อหาเฉพาะสำหรับ เพจ: views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

ในตัวอย่างข้างต้น เราใช้ @extends คำสั่งเพื่อสืบทอด app.blade.php  โครงร่าง ต่อไป เราใช้ @section คำสั่งเพื่อกำหนดเนื้อหาเฉพาะสำหรับส่วน title  และ content  ส่วนของเพจ

สุดท้าย เราจำเป็นต้องกำหนดเส้นทางเพื่อเชื่อมโยง URL ไปยังที่ เกี่ยวข้อง views

ตัวอย่างเช่น ใน routes/web.php  ไฟล์ คุณสามารถเพิ่มเส้นทางต่อไปนี้:

Route::get('/', function() {  
    return view('welcome');  
});  
  
Route::get('/about', function() {  
    return view('about');  
});

ในตัวอย่างนี้ URL "/" เชื่อมโยงไปยัง welcome.blade.php view ส่วน /about URL เชื่อมโยงไปยัง about.blade.php view.

โดยสรุป การสร้างเลย์เอาต์ใน Laravel ช่วยให้คุณสร้างอินเทอร์เฟซที่ใช้ร่วมกันสำหรับเว็บแอปพลิเคชันของคุณและจัดการส่วนทั่วไป เช่น ส่วน header และ ด้วยการใช้โครงร่างและชายด์ คุณสามารถสร้างอินเทอร์เฟซที่ยืดหยุ่นและบำรุงรักษาได้ ใน footer sidebar views Laravel