الدورات

title


إنشاء القوالب وتوسيعها في Blade: Layouts و@yield / @section

إنشاء القوالب وتوسيعها في Blade: Layouts و@yield / @section

إنشاء القوالب وتوسيعها في Blade: Layouts و@yield / @section

مقدمة

في تطوير تطبيقات Laravel، يعتبر Blade نظام القوالب الرسمي، ويتيح إنشاء قوالب رئيسية (Layouts) يمكن توسيعها في صفحات متعددة. هذه الطريقة تجعل الكود أكثر تنظيمًا، يقلل التكرار، ويسهل صيانة الموقع. في هذا المقال، سنتعرف على كيفية إنشاء Layouts واستخدام @yield و**@section** لتوسيع القوالب بشكل احترافي.


ما هي Layouts في Blade؟

Layout هو قالب رئيسي يحتوي على الهيكل الأساسي للصفحة، مثل الرأس، التذييل، وشريط التنقل. يمكن لكل صفحة فرعية أن ترث هذا القالب وتملأ محتوى محدد باستخدام @section.


إنشاء قالب أساسي (Layout)

مثال:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>موقعي باستخدام Laravel</h1>
    </header>

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

    <footer>
        <p>حقوق النشر © 2025</p>
    </footer>
</body>
</html>
  • @yield('title') و @yield('content') هي نقاط يمكن للصفحات الفرعية تعبئتها.

إنشاء صفحة فرعية وتوسيع Layout

مثال:

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

@section('title', 'الصفحة الرئيسية')

@section('content')
    <h2>مرحبا بك في الصفحة الرئيسية</h2>
    <p>هذا محتوى الصفحة الرئيسية الموروث من Layout.</p>
@endsection
  • @extends('layouts.app') تشير إلى القالب الأساسي الذي سيتم توسيعه.
  • @section('title', 'الصفحة الرئيسية') تعبئ عنوان الصفحة.
  • @section('content') ... @endsection تعبئ محتوى الصفحة.

إنشاء Template جزئي (Partial Template) وإدراجه

يمكنك إنشاء ملفات جزئية لإعادة استخدام أجزاء من الصفحة مثل الرأس أو التذييل:

مثال:

<!-- resources/views/partials/header.blade.php -->
<header>
    <h1>شعار الموقع</h1>
</header>

استخدام Include داخل Layout:

@include('partials.header')
  • هذا يقلل تكرار الأكواد ويسهل التعديل على جميع الصفحات.

نصائح هامة

  1. استخدم Layouts لتوحيد تصميم الموقع.
  2. استخدم @yield في Layout و @section في الصفحات الفرعية لتحديد المحتوى الديناميكي.
  3. استخدم Partial Templates للأجزاء المشتركة مثل الرأس والتذييل والقوائم.
  4. حافظ على تنظيم ملفات Blade داخل resources/views لتسهيل الوصول إليها.

الخلاصة

إنشاء القوالب وتوسيعها في Blade باستخدام Layouts و@yield / @section طريقة قوية لبناء تطبيقات Laravel منظمة. من خلال هذه الطريقة، يمكنك إدارة التصميم العام للموقع بسهولة، إعادة استخدام الأكواد، وعرض محتوى صفحات مختلفة بشكل ديناميكي دون تكرار.


سجل بالدورة الأفضل والأشهر في مجال الويب