در این مطلب یاد میگیریم به چه شکل برای پروژه های لاراول یک چیدمان ثابت یا Master Layout ایجاد کنیم.
ایجاد layout در لاراول
تقریبا در تمامی پروژه ها طراحان و برنامه نویسان حوزه های مختلف نیاز به یک چیدمان ثابت یا Master Layout برای قراردادن محتوای تکراری هستند.
در حوزه وب معمولا محتوای هدر و فوتر در این چیدمان قرار می گیرد زیرا نیاز هست در تمامی صفحات تکرار شوند.
مراحل ایجاد Master Layout در لاراول
کار رو با یک مثال پیش می بریم تا درک مطالب ساده تر باشه.
1) در این مثال من سه صفحه یا view به نام های “index” , “about” , “contact” دارم.
می خوام هدر و فوتر رو در همه آنها تکرار کنم.
یک پوشه به نام layouts در پوشه view ایجاد می کنم، در این پوشه می خوام فایل چیدمان یا همان layout رو قرار بدم، من نام فایلم رو “app.blade.php” میزارم که شما می تونید هر نام دلخواه دیگری رو انتخاب کنید.
در نهایت فایل های من به شکل تصویر زیر خواهند بود.
layout-file-laravel
فایل “app.layout” رو باز می کنم و کدهای زیر رو درون آن می نویسم.
//app.layout.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body data-rsssl=1 class="bg-dark text-white">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded mt-4">
<a class="navbar-brand px-4" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ route('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('about') }}">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('contact') }}">Contact</a>
</li>
</ul>
</div>
</nav>
@yield('content')
<footer>
<div class="bg-light text-dark p-2 rounded text-center">This is Footer</div>
</footer>
</div>
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>
در این فایل قسمت هایی رو که می خوایم به شکل ثابت در تمام صفحات تکرار شوند رو تعریف می کنیم و اون قسمتی که می خوایم به صورت داینامیک باشه و در هر page به صورت مجزا محتوای متفاوت داشته باشه رو با استفاده از دستور “yield” مشخص می کنیم.
در اینجا من قسمتی که می خوام داینامیک باشه رو در متد “yield” نامش رو “content” گذاشتم.
2) حالا وارد فایل هایی که می خوام از این layout استفاده کنند میشم و بهشون میگم که از این چیدمان ارث بری کنند.
extends-layout
در خط کد1، دستور مربوط به ارث بری رو نوشتم و در خط کد 2 و 6 ناحیه ای رو می خوایم به شکل داینامیک یا قابل تغییر باشه نسبت به چیدمان استاتیک مشخص کردم.
//content
@extends('layouts.app')
@section('content')
<div class="py-4">contact page</div>
@endsection
//about
@extends('layouts.app')
@section('content')
<div class="py-4">about page</div>
@endsection
//index
@extends('layouts.app')
@section('content')
<div class="py-4">index page</div>
@endsection
جمع بندی
در این مقاله کوتاه سعی کردم نحوه ایجاد یک Master Page یا Master Layout در لاراول رو توضیح بدم. امیدوارم این مطلب براتون مفید واقع شده باشه.
لطفا اگر نظر و پیشنهادی در خصوص مطالب و پیشبرد آنها دارید خوشحال میشم در قسمت دیدگاه ها مطرح بفرمایید.
