آشنایی با extends@ و yield@ در blade

در قسمت قبل با برخی از متدهای کمکی لاراول در blade آشنا شدیم و حالا نوبت به نوشتن HTML و ظاهر اینستاگرام است. اگر یادتان باشد در جلسه قبل تصویر لوگوی روکسو را در فایل app.blade.php قرار دادیم:

همانطور که می بینید این شکل دو اشکال دارد: اولا لوگو بیش از حد بزرگ است و دوما لوگو و نوشته ما روی هم قرار گرفته اند. مشکل اول را با یک تگ استایل و height ساده حل می کنم:

من علاوه بر اضافه کردن border-right از vertical-align هم استفاده کرده ام تا لوگوی روکسو با نوشته RoxoGram در یک سطح قرار بگیرند:

این می شود header برنامه ما. حالا به فایل home.blade.php در پوشه views می رویم کدهای درون section را حذف می کنیم تا محتویات آن به شکل زیر در بیاید:

@extends('layouts.app')

@section('content')
<div class="container">

</div>
@endsection

همانطور که می بینید در این قسمت extends@ و section@ را داریم که از ویژگی های blade هستند بنابراین باید آن ها را برایتان توضیح بدهم. بیایید دوباره به فایل app.blade.php برگردیم. اگر دقت کنید در انتهای این فایل قسمتی به شکل زیر را پیدا می کنید:

<main class="py-4">
    @yield('content')
</main>

فایل app.blade.php یک layout است یعنی یک قالب کلی است که ساختار کلی صفحات سایت ما را دارد تا مجبور نشویم قسمت های تکراری را چندین بار در فایل های HTML مختلف بنویسیم. به این فایل یک view پدر می گوییم. حالا در کد بالا دستور yield@ را داریم که کارش دریافت یک قسمت تعریف شده است. در اینجا yield@ ما به دنبال قسمتی به نام content است تا آن را در اینجا نمایش بدهد. به نظر شما این قسمت کجاست؟ به فایل home.blade.php بروید و دوباره به کد زیر نگاه کنید:

@extends('layouts.app')

@section('content')
<div class="container">

</div>
@endsection

در این فایل اول از همه دستور extends@ را داریم که مشخص می کند این view فرزند باید از چه view پدری ارث بری داشته باشد. یعنی ساختار کلی این view چطور است؟ ما گفته ایم layouts.app که یعنی در پوشه layouts به دنبال فایل app.blade.php بگرد و از آن به عنوان قالب کلی استفاده کن (در blade با نقطه آدرس دهی می کنیم، شروع آدرس دهی از پوشه views است و پسوند blade.php را نیز نمی آوریم). تا این مرحله فایل های app.blade.php و home.blade.php را به هم متصل کرده ایم و رابطه بین آن ها را تعریف کرده ایم:

• فایل blade.php فایل پدر است و ساختار کلی را مشخص می کند.
• فایل blade.php فایل فرزند است و ساختار کلی پدر را به ارث می برد. هر جایی که extends@ دیدیم، آن فایل یک فایل فرزند یا view فرزند است.

حالا که دو فایل به هم متصل شده اند دستور section@ را داریم که مسئول تعریف یک section (به معنی «قسمت») می باشد. آرگومان پاس داده شده به این دستور یک نام دلخواه است که اینجا content در نظر گرفته شده است اما شما می توانید آن را تغییر دهید. تمام محتویاتی که بین section@ و endsection@ می نویسید در قالب یک «قسمت» با نام پاس داده شده تعریف می شوند. حالا باید در جایی تزریق شوند. کجا؟ قسمت yield@ در فایل پدر، یعنی app.blade.php! با این کار جلوی نوشتن کدهای تکراری (مثل header که در تمام صفحات تکراری است) را گرفته ایم. یادتان باشد که نام تعیین شده برای section@ در اینجا باید با نام داده شده به yield@ یکی باشد تا بتواند آن را پیدا کند.

تصور کنید که در فایل پدر (مثلا app.blade.php) چنین کدی را داشته باشیم:

اول با استفاده از extends@ گفته ایم که فایل پدر کجاست تا رابطه برقرار شود. سپس section ای به نام title تعریف کرده ایم (در فایل پدر به دنبال این title بودیم) و مقدار آن را یک رشته ساده برابر Page Title گذاشته ایم. بنابراین page title از اینجا در فایل پدر تزریق می شود و تگ زیر را می سازد:

<title>App Name - Page Title</title>

سپس section دیگری به نام sidebar را تعریف کرده ام که parent@ را در آن صدا می زنیم. با این کار به لاراول گفته ایم که محتوای موجود در فایل پدر را حذف نکند. در sidebar در فایل پدر یک رشته بدین شکل داشتیم:

This is the master sidebar.

با صدا زدن parent@ دیگر این رشته حذف نمی شود. در نهایت هم content را به عنوان یک section دیگر تعریف کرده ایم.

امیدوارم درک بهتری نسبت به blade پیدا کرده باشید.