Layouts و Sections در Blade

Layouts و Sections در Blade

در Blade، که موتور قالب لاراول است، شما می‌توانید با استفاده از layouts و sections ساختار صفحات وب خود را به راحتی مدیریت کنید. این امکان به شما اجازه می‌دهد که کدهای مشترک مانند هدر، فوتر و نوار کناری را در یک فایل جداگانه قرار داده و سپس در صفحات مختلف خود از آن‌ها استفاده کنید.

در این مقاله، نحوه استفاده از layouts و sections در Blade را توضیح خواهیم داد.

فصل 1: Layouts در Blade

Layouts در Blade به شما این امکان را می‌دهند که یک ساختار کلی برای صفحات خود ایجاد کنید و سپس صفحات خاص را با محتوای ویژه پر کنید.

ایجاد Layout اولیه:

ابتدا باید یک فایل layout (طرح) اصلی برای صفحات خود ایجاد کنید. معمولاً این فایل‌ها در پوشه resources/views/layouts ذخیره می‌شوند. به عنوان مثال، فایل app.blade.php را می‌توان به عنوان layout اصلی در نظر گرفت.

در این فایل، می‌توانید ساختار اصلی صفحه مانند هدر، فوتر و نوار کناری را قرار دهید:
```
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', 'My Website')</title>
    
</head>
<body>
    <header>
        
        <h1>My Website</h1>
    </header>

    <nav>
        
    </nav>

    <div class="content">
        @yield('content') 
    </div>

    <footer>
        
        <p>Footer content here.</p>
    </footer>
</body>
</html>
```
در اینجا، @yield('title') و @yield('content') به شما این امکان را می‌دهند که بخش‌هایی از محتوا را در صفحات مختلف به صورت پویا پر کنید.
استفاده از Layout در صفحات مختلف:

حالا که یک layout ایجاد کرده‌اید، می‌توانید در صفحات خود از آن استفاده کنید. برای این کار، از دستور @extends استفاده می‌کنید تا به Blade بگویید که این صفحه از یک layout خاص استفاده کند.

به عنوان مثال، در صفحه home.blade.php:
```
php

@extends('layouts.app')

@section('title', 'Home Page') 

@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is the content of the home page.</p>
@endsection
```
در اینجا:
- @extends('layouts.app') به Blade می‌گوید که از layout app.blade.php استفاده کند.
- @section('title') و @section('content') برای پر کردن بخش‌های مربوطه در layout اصلی هستند.

فصل 2: Sections در Blade

Sections به شما این امکان را می‌دهند که قسمت‌های مختلف یک صفحه را به صورت پویا پر کنید. شما می‌توانید از دستور @section برای تعریف محتوای خاص استفاده کنید و سپس با استفاده از @yield آن را در layout فراخوانی کنید.

تعریف Section:

در layout خود، باید قسمت‌هایی که می‌خواهید در صفحات مختلف تغییر کنند را با @yield مشخص کنید. در صفحه app.blade.php، بخش‌هایی مانند title و content با @yield مشخص شده‌اند.
```
php
<title>@yield('title', 'My Website')</title> 
<div class="content">
    @yield('content') 
</div>
```
تعریف بخش‌ها در صفحات مختلف:

برای پر کردن بخش‌های مختلف در صفحات خود، شما باید از دستور @section استفاده کنید. به عنوان مثال:
```
php
@section('title', 'Home Page') 

@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is the content of the home page.</p>
@endsection
```
- @section('title', 'Home Page') برای تعیین عنوان صفحه است.
- @section('content') محتوای اصلی صفحه را تعریف می‌کند.

فصل 3: استفاده از Yield و Section در ترکیب

با استفاده از ترکیب @yield و @section، شما می‌توانید یک ساختار عمومی برای سایت خود ایجاد کرده و بخش‌های خاص آن را در صفحات مختلف مدیریت کنید.

چندین Section در یک Layout:

شما می‌توانید چندین بخش مختلف را در یک layout تعریف کنید. به عنوان مثال، یک بخش برای header و یک بخش دیگر برای footer:

php
<!-- resources/views/layouts/app.blade.php -->
<header>
    @yield('header') <!-- بخش هدر -->
</header>

<footer>
    @yield('footer') <!-- بخش فوتر -->
</footer>

سپس در صفحات مختلف می‌توانید این بخش‌ها را پر کنید:

php
<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@section('header')
    <h1>Welcome to My Website</h1>
@endsection

@section('footer')
    <p>Footer Content</p>
@endsection

@section('content')
    <h2>Home Page Content</h2>
@endsection

استفاده از @include برای اجزای مشترک:

اگر بخواهید یک بخش از کد را در چندین layout یا صفحه استفاده کنید، می‌توانید از @include استفاده کنید. به عنوان مثال، یک بخش هدر را به‌طور جداگانه در یک فایل قرار داده و آن را در صفحات مختلف گنجانده می‌شود.
```
php

<header>
    <h1>My Website</h1>
</header>
```
سپس در فایل layout یا صفحه خود می‌توانید از آن استفاده کنید:
```
php
@include('layouts.header')
```

فصل 4: استفاده از Stacks در Blade

اگر نیاز دارید که کدهایی را در مکان‌های خاصی از صفحه قرار دهید (مانند اضافه کردن اسکریپت‌های JS در انتهای صفحه)، می‌توانید از Stacks استفاده کنید.

تعریف Stack در Layout:

ابتدا یک stack در layout تعریف کنید:

php
<body>
    <!-- محتوا -->
    @stack('scripts') <!-- اینجا اسکریپت‌ها قرار خواهند گرفت -->
</body>

استفاده از Stack در صفحات:

سپس در صفحات خود می‌توانید با استفاده از @push اسکریپت‌ها یا استایل‌ها را به stack اضافه کنید:
```
php
@push('scripts')
    <script src="script.js"></script>
@endpush
```

نتیجه‌گیری

با استفاده از Layouts و Sections در Blade، شما می‌توانید ساختار صفحات وب خود را به‌طور مؤثری مدیریت کنید. این ابزار به شما کمک می‌کند تا کدهای مشترک مانند هدر، فوتر، و نوار کناری را در یک فایل جداگانه قرار داده و در صفحات مختلف از آن‌ها استفاده کنید، که این کار باعث بهینه‌سازی و کاهش تکرار کد می‌شود. همچنین با استفاده از Stacks می‌توانید اسکریپت‌ها و استایل‌ها را به راحتی مدیریت کنید.

سبد خرید

مارک پلاس