نسخه:

قالب های تیغه

معرفی

Blade موتور قالب ساده و در عین حال قدرتمندی است که با لاراول ارائه شده است. بر خلاف سایر موتورهای قالب سازی محبوب PHP، Blade شما را از استفاده از کدهای ساده PHP در نماهایتان محدود نمی کند. در واقع، تمام نماهای Blade در کدهای PHP ساده کامپایل می شوند و تا زمانی که اصلاح شوند در کش ذخیره می شوند، به این معنی که Blade اساساً سربار صفر را به برنامه شما اضافه می کند. فایل های Blade view از .blade.php پسوند فایل استفاده می کنند و معمولاً در resources/views دایرکتوری ذخیره می شوند.

وراثت الگو

تعریف طرح بندی

دو مورد از مزایای اصلی استفاده از Blade، وراثت قالب و بخش‌ها است . برای شروع، اجازه دهید نگاهی به یک مثال ساده بیاندازیم. ابتدا یک صفحه‌آرایی «مستر» را بررسی می‌کنیم. از آنجایی که اکثر برنامه های کاربردی وب یک طرح کلی را در صفحات مختلف حفظ می کنند، تعریف این طرح به عنوان یک نمای Blade راحت است:

<!-- Stored in resources/views/layouts/app.blade.php -->
 
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
 
<div class="container">
@yield('content')
</div>
</body>
</html>

همانطور که می بینید، این فایل حاوی نشانه گذاری معمولی HTML است. با این حال، دستورالعمل ها @section و @yield دستورالعمل ها را مورد توجه قرار دهید. دستورالعمل @section ، همانطور که از نام آن پیداست، بخشی از محتوا را تعریف می کند، در حالی که @yield دستورالعمل برای نمایش محتوای یک بخش خاص استفاده می شود.

اکنون که یک طرح بندی برای برنامه خود تعریف کرده ایم، بیایید یک صفحه فرزند تعریف کنیم که layout را به ارث می برد.

گسترش یک طرح

هنگام تعریف نمای فرزند، از @extends دستورالعمل Blade استفاده کنید تا مشخص کنید نمای فرزند باید چه طرحی را به ارث ببرد. نماهایی که طرح‌بندی Blade را گسترش می‌دهند، ممکن است با استفاده از @section دستورالعمل‌ها، محتوا را به بخش‌های طرح‌بندی تزریق کنند. به یاد داشته باشید، همانطور که در مثال بالا مشاهده می شود، محتویات این بخش ها در طرح بندی با استفاده از @yield :

<!-- Stored in resources/views/child.blade.php -->
 
@extends('layouts.app')
 
@section('title', 'Page Title')
 
@section('sidebar')
@@parent
 
<p>This is appended to the master sidebar.</p>
@endsection
 
@section('content')
<p>This is my body content.</p>
@endsection

در این مثال، بخش از دستورالعمل برای الحاق (به جای بازنویسی) محتوا به نوار کناری طرح‌بندی sidebar استفاده می‌کند . @parent هنگامی که نما ارائه می شود، دستورالعمل @parent با محتوای طرح جایگزین می شود.

برخلاف مثال قبلی، این sidebar بخش به @endsection جای @show . دستورالعمل @endsection فقط یک بخش را تعریف می کند در حالی که آن بخش @show را تعریف می کند و بلافاصله ارائه می دهد .

دستورالعمل @yield همچنین یک مقدار پیش فرض را به عنوان پارامتر دوم خود می پذیرد. این مقدار در صورتی نمایش داده می‌شود که بخش ارائه‌شده تعریف نشده باشد:

@yield('content', View::make('view.name'))

نماهای تیغه ممکن است از مسیرها با استفاده از کمک کننده جهانی بازگردانده شوند view :

Route::get('blade', function () {
return view('child');
});

نمایش داده ها

شما می توانید داده های ارسال شده به نمای Blade خود را با قرار دادن متغیر در بریس های فرفری نمایش دهید. به عنوان مثال، با توجه به مسیر زیر:

Route::get('greeting', function () {
return view('welcome', ['name' => 'Samantha']);
});

می توانید محتویات متغیر را name به صورت زیر نمایش دهید:

Hello, {{ $name }}.

دستورات Blade {{ }} به طور خودکار از طریق تابع PHP htmlspecialchars برای جلوگیری از حملات XSS ارسال می شوند.

شما محدود به نمایش محتویات متغیرهای ارسال شده به view نیستید. همچنین می توانید نتایج هر تابع PHP را تکرار کنید. در واقع، شما می توانید هر کد PHP را که می خواهید در داخل دستور Blade echo قرار دهید:

The current UNIX timestamp is {{ time() }}.

نمایش داده های بدون فرار

به طور پیش فرض، عبارات Blade {{ }} به طور خودکار از طریق تابع PHP htmlspecialchars برای جلوگیری از حملات XSS ارسال می شوند. اگر نمی‌خواهید داده‌های شما از بین بروند، می‌توانید از دستور زیر استفاده کنید:

Hello, {!! $name !!}.

هنگام بازتاب محتوایی که توسط کاربران برنامه شما ارائه می شود بسیار مراقب باشید. برای جلوگیری از حملات XSS هنگام نمایش داده‌های ارائه‌شده توسط کاربر، همیشه از دستور پرانتز فرار و دوتایی استفاده کنید.

رندر JSON

گاهی اوقات ممکن است یک آرایه را به نمای خود ارسال کنید تا آن را به صورت JSON ارائه کنید تا یک متغیر جاوا اسکریپت را مقداردهی کنید. مثلا:

<script>
var app = <?php echo json_encode($array); ?>;
</script>

با این حال، به جای تماس دستی json_encode ، می توانید از @json دستورالعمل Blade استفاده کنید. این @json دستورالعمل همان آرگومان های json_encode تابع PHP را می پذیرد:

<script>
var app = @json($array);
 
var app = @json($array, JSON_PRETTY_PRINT);
</script>

شما فقط باید از @json دستورالعمل برای ارائه متغیرهای موجود به عنوان JSON استفاده کنید. قالب Blade بر اساس عبارات منظم است و تلاش برای انتقال یک عبارت پیچیده به دستورالعمل ممکن است باعث خرابی های غیرمنتظره شود.

کدگذاری موجودیت HTML

به طور پیش فرض، Blade (و کمک کننده لاراول e ) موجودیت های HTML را دو برابر می کند. اگر می خواهید رمزگذاری دوگانه را غیرفعال کنید، Blade::withoutDoubleEncoding متد را از boot متد خود فراخوانی کنید AppServiceProvider :

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Blade::withoutDoubleEncoding();
}
}

Blade & JavaScript Frameworks

از آنجایی که بسیاری از فریم ورک‌های جاوا اسکریپت نیز از پرانتزهای "فرفری" برای نشان دادن نمایش یک عبارت معین در مرورگر استفاده می‌کنند، می‌توانید از این @ نماد برای اطلاع به موتور رندر Blade استفاده کنید که یک عبارت باید دست نخورده باقی بماند. مثلا:

<h1>Laravel</h1>
 
Hello, @{{ name }}.

در این مثال، @ نماد توسط Blade حذف خواهد شد. با این حال، {{ name }} بیان توسط موتور Blade دست نخورده باقی می ماند و به آن اجازه می دهد تا در عوض توسط چارچوب جاوا اسکریپت شما ارائه شود.

این @ نماد همچنین ممکن است برای فرار از دستورات Blade استفاده شود:

{{-- Blade --}}
@@json()
 
<!-- HTML output -->
@json()

بخشنامه @verbatim _

اگر متغیرهای جاوا اسکریپت را در بخش بزرگی از قالب خود نمایش می دهید، می توانید HTML را در @verbatim دستورالعمل قرار دهید تا مجبور نباشید هر عبارت Blade echo را با یک @ علامت پیشوند قرار دهید:

@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim

ساختارهای کنترلی

علاوه بر وراثت قالب و نمایش داده ها، Blade همچنین میانبرهای مناسبی را برای ساختارهای رایج کنترل PHP، مانند دستورات شرطی و حلقه ها، فراهم می کند. این میانبرها روشی بسیار تمیز و مختصر برای کار با ساختارهای کنترل PHP را ارائه می دهند، در حالی که برای همتایان PHP خود آشنا هستند.

اگر بیانیه ها

شما می توانید if با استفاده از دستورات @if ،، و دستورالعمل ها @elseif را بسازید . این دستورالعمل ها مشابه همتایان PHP خود عمل می کنند: @else @endif

@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif

برای راحتی، Blade همچنین @unless دستورالعملی را ارائه می دهد:

@unless (Auth::check())
You are not signed in.
@endunless

علاوه بر دستورالعمل‌های شرطی که قبلاً مورد بحث قرار گرفته‌اند، دستورات @isset و @empty ممکن است به عنوان میانبرهای مناسب برای توابع PHP مربوطه خود استفاده شوند:

@isset($records)
// $records is defined and is not null...
@endisset
 
@empty($records)
// $records is "empty"...
@endempty

دستورالعمل های احراز هویت

دستورات @auth و @guest ممکن است برای تعیین سریع اینکه آیا کاربر فعلی احراز هویت شده است یا مهمان است استفاده شود:

@auth
// The user is authenticated...
@endauth
 
@guest
// The user is not authenticated...
@endguest

در صورت نیاز، می‌توانید محافظ احراز هویت را مشخص کنید که باید هنگام استفاده از دستورالعمل‌ها @auth و @guest دستورالعمل‌ها بررسی شود:

@auth('admin')
// The user is authenticated...
@endauth
 
@guest('admin')
// The user is not authenticated...
@endguest

بخش دستورالعمل ها

با استفاده از دستورالعمل می توانید بررسی کنید که آیا یک بخش دارای محتوا است @hasSection :

@hasSection('navigation')
<div class="pull-right">
@yield('navigation')
</div>
 
<div class="clearfix"></div>
@endif

می توانید از sectionMissing دستورالعمل برای تعیین اینکه آیا یک بخش محتوا ندارد استفاده کنید:

@sectionMissing('navigation')
<div class="pull-right">
@include('default-navigation')
</div>
@endif

دستورالعمل های محیط زیست

می توانید بررسی کنید که آیا برنامه در محیط تولید با استفاده از @production دستورالعمل اجرا می شود:

@production
// Production specific content...
@endproduction

یا، می توانید تعیین کنید که آیا برنامه در یک محیط خاص با استفاده از @env دستورالعمل اجرا می شود:

@env('staging')
// The application is running in "staging"...
@endenv
 
@env(['staging', 'production'])
// The application is running in "staging" or "production"...
@endenv

تغییر بیانیه ها

دستورات سوئیچ را می توان با استفاده از @switch دستورات @case ،، و دستورات ساخت : @break @default @endswitch

@switch($i)
@case(1)
First case...
@break
 
@case(2)
Second case...
@break
 
@default
Default case...
@endswitch

حلقه ها

علاوه بر دستورات شرطی، Blade دستورالعمل های ساده ای برای کار با ساختارهای حلقه PHP ارائه می دهد. باز هم، هر یک از این دستورالعمل ها به طور یکسان با همتایان PHP خود عمل می کنند:

@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
 
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
 
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
 
@while (true)
<p>I'm looping forever.</p>
@endwhile

هنگام حلقه زدن، می توانید از متغیر حلقه برای به دست آوردن اطلاعات ارزشمند در مورد حلقه استفاده کنید، مانند اینکه آیا در اولین یا آخرین تکرار از طریق حلقه هستید.

هنگام استفاده از حلقه‌ها، می‌توانید حلقه را پایان دهید یا از تکرار فعلی رد شوید:

@foreach ($users as $user)
@if ($user->type == 1)
@continue
@endif
 
<li>{{ $user->name }}</li>
 
@if ($user->number == 5)
@break
@endif
@endforeach

همچنین می توانید شرط را با اعلامیه دستورالعمل در یک خط قرار دهید:

@foreach ($users as $user)
@continue($user->type == 1)
 
<li>{{ $user->name }}</li>
 
@break($user->number == 5)
@endforeach

متغیر حلقه

هنگام حلقه زدن، یک $loop متغیر در داخل حلقه شما در دسترس خواهد بود. این متغیر دسترسی به برخی از بیت های مفید از اطلاعات مانند شاخص حلقه جاری و اینکه آیا این اولین یا آخرین تکرار از طریق حلقه است را فراهم می کند:

@foreach ($users as $user)
@if ($loop->first)
This is the first iteration.
@endif
 
@if ($loop->last)
This is the last iteration.
@endif
 
<p>This is user {{ $user->id }}</p>
@endforeach

$loop اگر در یک حلقه تودرتو هستید، می توانید از طریق ویژگی به متغیر حلقه والد دسترسی پیدا کنید parent :

@foreach ($users as $user)
@foreach ($user->posts as $post)
@if ($loop->parent->first)
This is first iteration of the parent loop.
@endif
@endforeach
@endforeach

این $loop متغیر همچنین دارای خواص مفید دیگری نیز می باشد:

ویژگی شرح
$loop->index شاخص تکرار حلقه جاری (از 0 شروع می شود).
$loop->iteration تکرار حلقه جاری (از 1 شروع می شود).
$loop->remaining تکرارهای باقی مانده در حلقه
$loop->count تعداد کل موارد در آرایه در حال تکرار.
$loop->first آیا این اولین تکرار از طریق حلقه است.
$loop->last آیا این آخرین تکرار از طریق حلقه است.
$loop->even آیا این یک تکرار یکنواخت از طریق حلقه است.
$loop->odd آیا این یک تکرار عجیب و غریب از طریق حلقه است.
$loop->depth سطح تودرتوی حلقه جاری.
$loop->parent هنگامی که در یک حلقه تودرتو، متغیر حلقه والد.

نظرات

Blade همچنین به شما امکان می دهد نظرات را در نماهای خود تعریف کنید. با این حال، برخلاف نظرات HTML، نظرات Blade در HTML بازگردانده شده توسط برنامه شما گنجانده نشده است:

{{-- This comment will not be present in the rendered HTML --}}

PHP

در برخی شرایط، جاسازی کد PHP در نماهای خود مفید است. می توانید از @php دستور Blade برای اجرای بلوکی از PHP ساده در قالب خود استفاده کنید:

@php
//
@endphp

در حالی که Blade این ویژگی را فراهم می کند، استفاده مکرر از آن ممکن است سیگنالی باشد که شما منطق زیادی در قالب خود دارید.

بخشنامه @once _

این @once دستورالعمل به شما امکان می دهد بخشی از الگو را تعریف کنید که فقط یک بار در هر چرخه رندر ارزیابی می شود. این ممکن است برای فشار دادن یک قطعه معین از جاوا اسکریپت در هدر صفحه با استفاده از پشته ها مفید باشد . به عنوان مثال، اگر یک مؤلفه معین را در یک حلقه رندر می‌کنید ، ممکن است بخواهید فقط اولین بار که مؤلفه رندر می‌شود، جاوا اسکریپت را به سربرگ فشار دهید:

@once
@push('scripts')
<script>
// Your custom JavaScript...
</script>
@endpush
@endonce

تشکیل می دهد

فیلد CSRF

هر زمان که یک فرم HTML را در برنامه خود تعریف می کنید، باید یک فیلد رمز پنهان CSRF را در فرم قرار دهید تا میان افزار حفاظت CSRF بتواند درخواست را تأیید کند. می توانید از @csrf دستورالعمل Blade برای تولید فیلد نشانه استفاده کنید:

<form method="POST" action="/profile">
@csrf
 
...
</form>

فیلد روش

از آنجایی که فرم‌های HTML نمی‌توانند، یا درخواست ایجاد PUT کنند PATCH ، DELETE باید یک _method فیلد مخفی برای جعل این افعال HTTP اضافه کنید. دستورالعمل @method Blade می تواند این فیلد را برای شما ایجاد کند:

<form action="/foo/bar" method="POST">
@method('PUT')
 
...
</form>

خطاهای اعتبارسنجی

این @error دستورالعمل ممکن است برای بررسی سریع وجود پیام های خطای اعتبارسنجی برای یک ویژگی خاص استفاده شود. در یک @error دستورالعمل، می توانید $message متغیر را برای نمایش پیام خطا تکرار کنید:

<!-- /resources/views/post/create.blade.php -->
 
<label for="title">Post Title</label>
 
<input id="title" type="text" class="@error('title') is-invalid @enderror">
 
@error('title')
<div class="alert alert-danger">{{ $message }}</div>
@enderror

می‌توانید نام یک کیسه خطای خاص را به‌عنوان پارامتر دوم @error برای بازیابی پیام‌های خطای اعتبارسنجی در صفحات حاوی چندین فرم به دستورالعمل ارسال کنید:

<!-- /resources/views/auth.blade.php -->
 
<label for="email">Email address</label>
 
<input id="email" type="email" class="@error('email', 'login') is-invalid @enderror">
 
@error('email', 'login')
<div class="alert alert-danger">{{ $message }}</div>
@enderror

اجزاء

کامپوننت ها و اسلات ها مزایای مشابهی را برای بخش ها و طرح بندی ها فراهم می کنند. با این حال، برخی ممکن است مدل ذهنی اجزا و شکاف ها را راحت تر درک کنند. دو رویکرد برای نوشتن مؤلفه ها وجود دارد: مؤلفه های مبتنی بر کلاس و مؤلفه های ناشناس.

برای ایجاد یک جزء مبتنی بر کلاس، می توانید از make:component دستور Artisan استفاده کنید. برای توضیح نحوه استفاده از کامپوننت ها، یک Alert کامپوننت ساده ایجاد می کنیم. دستور make:component کامپوننت را در app/View/Components دایرکتوری قرار می دهد:

php artisan make:component Alert

این make:component دستور همچنین یک view template برای کامپوننت ایجاد می کند. نمای در resources/views/components دایرکتوری قرار خواهد گرفت.

ثبت دستی اجزای بسته

هنگام نوشتن کامپوننت ها برای برنامه خود، اجزا به طور خودکار در app/View/Components دایرکتوری و resources/views/components دایرکتوری کشف می شوند.

با این حال، اگر در حال ساخت بسته ای هستید که از اجزای Blade استفاده می کند، باید کلاس کامپوننت خود و نام مستعار تگ HTML آن را به صورت دستی ثبت کنید. شما معمولاً باید اجزای خود را در boot روش ارائه دهنده خدمات بسته خود ثبت کنید:

use Illuminate\Support\Facades\Blade;
 
/**
* Bootstrap your package's services.
*/
public function boot()
{
Blade::component('package-alert', AlertComponent::class);
}

هنگامی که کامپوننت شما ثبت شد، ممکن است با استفاده از تگ مستعار آن رندر شود:

<x-package-alert/>

نمایش کامپوننت ها

برای نمایش یک کامپوننت، می توانید از یک تگ جزء Blade در یکی از قالب های Blade خود استفاده کنید. تگ‌های اجزای Blade با رشته شروع می‌شوند x- و به دنبال آن نام کیس کباب کلاس کامپوننت قرار می‌گیرد:

<x-alert/>
 
<x-user-profile/>

اگر کلاس کامپوننت عمیق‌تر در app/View/Components دایرکتوری تو در تو باشد، می‌توانید از . کاراکتر برای نشان دادن تودرتوی دایرکتوری استفاده کنید. به عنوان مثال، اگر فرض کنیم که یک کامپوننت در قرار دارد App/View/Components/Inputs/Button.php ، ممکن است آن را به این صورت ارائه کنیم:

<x-inputs.button/>

انتقال داده به کامپوننت ها

می توانید داده ها را با استفاده از ویژگی های HTML به اجزای Blade منتقل کنید. مقادیر سخت کد شده و ابتدایی ممکن است با استفاده از ویژگی های ساده HTML به مؤلفه منتقل شوند. عبارات و متغیرهای PHP باید از طریق ویژگی هایی که با پیشوند : :

<x-alert type="error" :message="$message"/>

باید داده های مورد نیاز کامپوننت را در سازنده کلاس آن تعریف کنید. تمام خصوصیات عمومی یک مؤلفه به طور خودکار در معرض دید مؤلفه قرار می گیرد. لازم نیست داده ها را از render متد کامپوننت به view ارسال کنید:

<?php
 
namespace App\View\Components;
 
use Illuminate\View\Component;
 
class Alert extends Component
{
/**
* The alert type.
*
* @var string
*/
public $type;
 
/**
* The alert message.
*
* @var string
*/
public $message;
 
/**
* Create the component instance.
*
* @param string $type
* @param string $message
* @return void
*/
public function __construct($type, $message)
{
$this->type = $type;
$this->message = $message;
}
 
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|\Closure|string
*/
public function render()
{
return view('components.alert');
}
}

وقتی کامپوننت شما رندر می‌شود، می‌توانید محتوای متغیرهای عمومی جزء خود را با تکرار نام متغیرها نمایش دهید:

<div class="alert alert-{{ $type }}">
{{ $message }}
</div>

پوشش

آرگومان های سازنده کامپوننت باید با استفاده از مشخص شوند camelCase ، در حالی که kebab-case باید هنگام ارجاع نام آرگومان ها در ویژگی های HTML شما استفاده شوند. به عنوان مثال، با توجه به سازنده کامپوننت زیر:

/**
* Create the component instance.
*
* @param string $alertType
* @return void
*/
public function __construct($alertType)
{
$this->alertType = $alertType;
}

استدلال $alertType ممکن است به این صورت ارائه شود:

<x-alert alert-type="danger" />

روش های جزء

علاوه بر این که متغیرهای عمومی در قالب کامپوننت شما در دسترس هستند، هر روش عمومی روی کامپوننت نیز ممکن است اجرا شود. برای مثال، کامپوننتی را تصور کنید که دارای یک isSelected متد است:

/**
* Determine if the given option is the current selected option.
*
* @param string $option
* @return bool
*/
public function isSelected($option)
{
return $option === $this->selected;
}

شما می توانید این متد را از قالب جزء خود با فراخوانی متغیری که با نام متد مطابقت دارد اجرا کنید:

<option {{ $isSelected($value) ? 'selected="selected"' : '' }} value="{{ $value }}">
{{ $label }}
</option>

استفاده از ویژگی ها و شکاف ها در داخل کلاس

اجزای Blade همچنین به شما این امکان را می دهند که به نام مؤلفه، ویژگی ها و شکاف در متد رندر کلاس دسترسی داشته باشید. با این حال، برای دسترسی به این داده‌ها، باید یک Closure را از render متد جزء خود برگردانید. $data بسته شدن آرایه ای را به عنوان تنها آرگومان خود دریافت می کند :

/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|\Closure|string
*/
public function render()
{
return function (array $data) {
// $data['componentName'];
// $data['attributes'];
// $data['slot'];
 
return '<div>Component content</div>';
};
}

برابر componentName با نام استفاده شده در تگ HTML بعد از x- پیشوند است. همینطور <x-alert /> خواهد componentName بود alert . این attributes عنصر حاوی تمام ویژگی هایی است که در تگ HTML وجود دارد. عنصر slot یک Illuminate\Support\HtmlString نمونه با محتویات شکاف از جزء است.

وابستگی های اضافی

اگر کامپوننت شما به وابستگی هایی از ظرف سرویس لاراول نیاز دارد ، می توانید آنها را قبل از هر یک از ویژگی های داده کامپوننت لیست کنید و به طور خودکار توسط ظرف تزریق می شوند:

use App\AlertCreator
 
/**
* Create the component instance.
*
* @param \App\AlertCreator $creator
* @param string $type
* @param string $message
* @return void
*/
public function __construct(AlertCreator $creator, $type, $message)
{
$this->creator = $creator;
$this->type = $type;
$this->message = $message;
}

مدیریت ویژگی ها

ما قبلا نحوه انتقال ویژگی های داده به یک جزء را بررسی کرده ایم. با این حال، گاهی اوقات ممکن است لازم باشد ویژگی های اضافی HTML مانند , class که بخشی از داده های مورد نیاز برای عملکرد یک جزء نیستند را مشخص کنید. به طور معمول، شما می خواهید این ویژگی های اضافی را به عنصر ریشه قالب کامپوننت منتقل کنید. به عنوان مثال، تصور کنید که می خواهیم یک alert کامپوننت را مانند این رندر کنیم:

<x-alert type="error" :message="$message" class="mt-4"/>

تمام ویژگی هایی که بخشی از سازنده کامپوننت نیستند به طور خودکار به "کیسه ویژگی" کامپوننت اضافه می شوند. این کیسه ویژگی به طور خودکار از طریق متغیر در اختیار مؤلفه قرار می گیرد $attributes . همه صفات ممکن است با تکرار این متغیر در کامپوننت ارائه شوند:

<div {{ $attributes }}>
<!-- Component Content -->
</div>

تکرار متغیرها ( {{ $attributes }} ) یا استفاده از دستورالعمل هایی مانند @env مستقیماً روی یک جزء در حال حاضر پشتیبانی نمی شود.

ویژگی های پیش فرض / ادغام شده

گاهی اوقات ممکن است لازم باشد مقادیر پیش فرض را برای ویژگی ها مشخص کنید یا مقادیر اضافی را در برخی از ویژگی های مؤلفه ادغام کنید. برای انجام این کار، می توانید از روش کیف ویژگی استفاده کنید merge :

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>

اگر فرض کنیم این مؤلفه به این صورت استفاده می شود:

<x-alert type="error" :message="$message" class="mb-4"/>

HTML نهایی و رندر شده کامپوننت به شکل زیر ظاهر می شود:

<div class="alert alert-error mb-4">
<!-- Contents of the $message variable -->
</div>

فیلتر کردن ویژگی ها

می توانید با استفاده از filter روش، ویژگی ها را فیلتر کنید. این روش یک Closure را می‌پذیرد که true اگر می‌خواهید ویژگی را در کیف ویژگی حفظ کنید، باید برگردد:

{{ $attributes->filter(fn ($value, $key) => $key == 'foo') }}

برای راحتی، می‌توانید از whereStartsWith روش برای بازیابی همه ویژگی‌هایی که کلیدهای آن‌ها با یک رشته مشخص شروع می‌شود استفاده کنید:

{{ $attributes->whereStartsWith('wire:model') }}

با استفاده از first روش، می توانید اولین ویژگی را در یک کیسه مشخصه ارائه دهید:

{{ $attributes->whereStartsWith('wire:model')->first() }}

شکاف ها

اغلب، شما نیاز دارید که محتوای اضافی را از طریق «اسلات» به مؤلفه خود منتقل کنید. بیایید تصور کنیم که alert کامپوننتی که ایجاد کردیم دارای نشانه گذاری زیر است:

<!-- /resources/views/components/alert.blade.php -->
 
<div class="alert alert-danger">
{{ $slot }}
</div>

slot ممکن است با تزریق محتوا به مؤلفه، محتوا را به آن منتقل کنیم :

<x-alert>
<strong>Whoops!</strong> Something went wrong!
</x-alert>

گاهی اوقات ممکن است یک کامپوننت نیاز داشته باشد که چندین اسلات مختلف را در مکان های مختلف درون کامپوننت ارائه دهد. بیایید مؤلفه هشدار خود را تغییر دهیم تا امکان تزریق یک «عنوان» وجود داشته باشد:

<!-- /resources/views/components/alert.blade.php -->
 
<span class="alert-title">{{ $title }}</span>
 
<div class="alert alert-danger">
{{ $slot }}
</div>

می توانید محتوای اسلات نامگذاری شده را با استفاده از x-slot تگ تعریف کنید. هر محتوایی که در یک x-slot تگ نباشد به مؤلفه موجود در $slot متغیر منتقل می شود:

<x-alert>
<x-slot name="title">
Server Error
</x-slot>
 
<strong>Whoops!</strong> Something went wrong!
</x-alert>

اسلات های محدوده

اگر از یک چارچوب جاوا اسکریپت مانند Vue استفاده کرده‌اید، ممکن است با «اسلات‌های scoped» آشنا باشید که به شما امکان می‌دهد به داده‌ها یا روش‌هایی از مؤلفه درون اسلات خود دسترسی داشته باشید. شما می‌توانید با تعریف متدها یا ویژگی‌های عمومی در کامپوننت خود و دسترسی به کامپوننت در اسلات خود از طریق $component متغیر، به رفتار مشابهی در لاراول دست پیدا کنید:

<x-alert>
<x-slot name="title">
{{ $component->formatAlert('Server Error') }}
</x-slot>
 
<strong>Whoops!</strong> Something went wrong!
</x-alert>

نماهای اجزای درون خطی

برای کامپوننت های بسیار کوچک، ممکن است مدیریت هر دو کلاس کامپوننت و نمایش الگوی کامپوننت سخت باشد. به همین دلیل، می‌توانید نشانه‌گذاری مؤلفه را مستقیماً از render روش برگردانید:

/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|\Closure|string
*/
public function render()
{
return <<<'blade'
<div class="alert alert-danger">
{{ $slot }}
</div>
blade;
}

تولید اجزای نمای درون خطی

برای ایجاد کامپوننتی که نمای درون خطی را ارائه می دهد، می توانید inline هنگام اجرای make:component دستور از این گزینه استفاده کنید:

php artisan make:component Alert --inline

اجزای ناشناس

مشابه اجزای درون خطی، کامپوننت های ناشناس مکانیزمی برای مدیریت یک جزء از طریق یک فایل واحد ارائه می دهند. با این حال، اجزای ناشناس از یک فایل مشاهده استفاده می کنند و هیچ کلاس مرتبطی ندارند. برای تعریف یک مؤلفه ناشناس، فقط باید یک قالب Blade را در resources/views/components فهرست خود قرار دهید. به عنوان مثال، با فرض اینکه یک جزء را در resources/views/components/alert.blade.php :

<x-alert/>

شما می‌توانید از این . کاراکتر برای نشان دادن اینکه آیا یک جزء در عمق دایرکتوری تودرتو شده است استفاده کنید components . به عنوان مثال، با فرض اینکه کامپوننت در تعریف شده است resources/views/components/inputs/button.blade.php ، می توانید آن را به این صورت ارائه کنید:

<x-inputs.button/>

ویژگی ها / ویژگی های داده

از آنجایی که مؤلفه‌های ناشناس هیچ کلاس مرتبطی ندارند، ممکن است تعجب کنید که چگونه می‌توانید تشخیص دهید که کدام داده باید به عنوان متغیر به مؤلفه منتقل شود و کدام ویژگی باید در کیف ویژگی مؤلفه قرار گیرد .

می‌توانید با استفاده از @props دستورالعمل موجود در بالای قالب Blade، مشخص کنید که کدام ویژگی باید به عنوان متغیر داده در نظر گرفته شود. تمام ویژگی‌های دیگر روی کامپوننت از طریق کیف ویژگی کامپوننت در دسترس خواهد بود. اگر می خواهید به یک متغیر داده مقدار پیش فرض بدهید، می توانید نام متغیر را به عنوان کلید آرایه و مقدار پیش فرض را به عنوان مقدار آرایه مشخص کنید:

<!-- /resources/views/components/alert.blade.php -->
 
@props(['type' => 'info', 'message'])
 
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>

از جمله مشاهده های فرعی

دستورالعمل Blade @include به شما این امکان را می دهد که نمای Blade را از یک نمای دیگر اضافه کنید. تمام متغیرهایی که برای نمای والد در دسترس هستند برای نمای شامل در دسترس قرار خواهند گرفت:

<div>
@include('shared.errors')
 
<form>
<!-- Form Contents -->
</form>
</div>

حتی اگر نمای شامل تمام داده‌های موجود در نمای والد را به ارث ببرد، می‌توانید آرایه‌ای از داده‌های اضافی را نیز به نمای موجود ارسال کنید:

@include('view.name', ['some' => 'data'])

اگر سعی کنید به @include نمایی که وجود ندارد، لاراول خطا می دهد. اگر می‌خواهید دیدگاهی را وارد کنید که ممکن است وجود داشته باشد یا نباشد، باید از @includeIf دستورالعمل استفاده کنید:

@includeIf('view.name', ['some' => 'data'])

اگر می‌خواهید @include که یک عبارت بولی داده شده را به یک view ارزیابی کنید true ، می‌توانید از @includeWhen دستورالعمل استفاده کنید:

@includeWhen($boolean, 'view.name', ['some' => 'data'])

اگر می‌خواهید @include که یک عبارت بولی داده شده را به یک view ارزیابی کنید false ، می‌توانید از @includeUnless دستورالعمل استفاده کنید:

@includeUnless($boolean, 'view.name', ['some' => 'data'])

برای گنجاندن اولین نمای که از یک آرایه معین از نماها وجود دارد، می توانید از includeFirst دستورالعمل استفاده کنید:

@includeFirst(['custom.admin', 'admin'], ['some' => 'data'])

شما باید از استفاده از ثابت‌ها __DIR__ و __FILE__ در نمای Blade خودداری کنید، زیرا آنها به مکان نمای ذخیره‌سازی شده و کامپایل شده اشاره می‌کنند.

نام مستعار شامل

اگر Blade شامل شما در یک زیر شاخه ذخیره می شود، ممکن است بخواهید آنها را برای دسترسی آسان تر نام مستعار کنید. به عنوان مثال، یک Blade شامل را تصور کنید که resources/views/includes/input.blade.php با محتوای زیر در آن ذخیره شده است:

<input type="{{ $type ?? 'text' }}">

می توانید از این include روش برای نام مستعار شامل از includes.input به استفاده کنید input . boot به طور معمول، این باید به روش شما انجام شود AppServiceProvider :

use Illuminate\Support\Facades\Blade;
 
Blade::include('includes.input', 'input');

هنگامی که شامل نام مستعار شد، می توانید آن را با استفاده از نام مستعار به عنوان دستورالعمل Blade ارائه دهید:

@input(['type' => 'email'])

نمایش نماها برای مجموعه ها

شما می توانید حلقه ها و شامل را در یک خط با دستورالعمل Blade ترکیب کنید @each :

@each('view.name', $jobs, 'job')

اولین آرگومان نمای جزئی برای ارائه برای هر عنصر در آرایه یا مجموعه است. آرگومان دوم آرایه یا مجموعه ای است که می خواهید روی آن تکرار کنید، در حالی که آرگومان سوم نام متغیری است که به تکرار فعلی در view اختصاص داده می شود. بنابراین، برای مثال، اگر روی یک آرایه jobs از job . کلید تکرار فعلی به عنوان key متغیر در نمای جزئی شما در دسترس خواهد بود.

شما همچنین می توانید یک آرگومان چهارم را به @each دستورالعمل منتقل کنید. این آرگومان نمایه ای را تعیین می کند که در صورت خالی بودن آرایه داده شده ارائه می شود.

@each('view.name', $jobs, 'job', 'view.empty')

نماهایی که از طریق ارائه می شوند، @each متغیرها را از نمای والد به ارث نمی برند. اگر نمای فرزند به این متغیرها نیاز دارد، باید به جای آن از @foreach و استفاده کنید @include .

پشته ها

Blade به شما امکان می دهد تا به پشته های نامگذاری شده فشار دهید که می توانند در جای دیگری در نمای یا طرح بندی دیگر ارائه شوند. این می تواند به ویژه برای تعیین هر گونه کتابخانه جاوا اسکریپت مورد نیاز برای بازدیدهای فرزند شما مفید باشد:

@push('scripts')
<script src="/example.js"></script>
@endpush

می توانید هر چند بار که لازم است به پشته فشار دهید. برای رندر کردن محتویات کامل پشته، نام پشته را به @stack دستورالعمل ارسال کنید:

<head>
<!-- Head Contents -->
 
@stack('scripts')
</head>

اگر می خواهید محتوا را در ابتدای یک پشته قرار دهید، باید از @prepend دستورالعمل استفاده کنید:

@push('scripts')
This will be second...
@endpush
 
// Later...
 
@prepend('scripts')
This will be first...
@endprepend

تزریق خدمات

این دستورالعمل ممکن است برای بازیابی یک سرویس از ظرف سرویس @inject لاراول استفاده شود . اولین آرگومان ارسال شده به نام متغیری است که سرویس در آن قرار می گیرد، در حالی که آرگومان دوم کلاس یا نام رابط سرویسی است که می خواهید آن را حل کنید: @inject

@inject('metrics', 'App\Services\MetricsService')
 
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>

تیغه گسترش دهنده

Blade به شما اجازه می دهد تا دستورالعمل های سفارشی خود را با استفاده از این directive روش تعریف کنید. هنگامی که کامپایلر Blade با دستور سفارشی روبرو می شود، callback ارائه شده را با عبارتی که دستور دارد فراخوانی می کند.

مثال زیر @datetime($var) دستورالعملی را ایجاد می کند که یک داده را فرمت می کند $var ، که باید نمونه ای از آن باشد DateTime :

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
 
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
}

همانطور که می بینید، ما format متد را به هر عبارتی که به دستورالعمل منتقل می شود زنجیره می کنیم. بنابراین، در این مثال، PHP نهایی تولید شده توسط این دستورالعمل به صورت زیر خواهد بود:

<?php echo ($var)->format('m/d/Y H:i'); ?>

پس از به‌روزرسانی منطق یک دستورالعمل Blade، باید تمام نماهای کش شده Blade را حذف کنید. نماهای کش شده Blade ممکن است با استفاده از view:clear دستور Artisan حذف شوند.

بیانیه های سفارشی If

برنامه نویسی یک دستور العمل سفارشی گاهی اوقات پیچیده تر از آنچه لازم است در هنگام تعریف دستورات شرطی ساده و سفارشی است. به همین دلیل، Blade Blade::if روشی را ارائه می دهد که به شما امکان می دهد به سرعت دستورالعمل های شرطی سفارشی را با استفاده از Closures تعریف کنید. برای مثال، اجازه دهید یک شرطی سفارشی تعریف کنیم که ارائه‌دهنده ابر برنامه فعلی را بررسی می‌کند. ما ممکن است این کار را در boot روش خود انجام دهیم AppServiceProvider :

use Illuminate\Support\Facades\Blade;
 
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Blade::if('cloud', function ($provider) {
return config('filesystems.default') === $provider;
});
}

هنگامی که شرطی سفارشی تعریف شد، می توانیم به راحتی از آن در قالب های خود استفاده کنیم:

@cloud('digitalocean')
// The application is using the digitalocean cloud provider...
@elsecloud('aws')
// The application is using the aws provider...
@else
// The application is not using the digitalocean or aws environment...
@endcloud
 
@unlesscloud('aws')
// The application is not using the aws environment...
@endcloud