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