قالب های تیغه
- معرفی
- وراثت الگو
- نمایش داده ها
- ساختارهای کنترلی
- تشکیل می دهد
- اجزاء
- از جمله مشاهده های فرعی
- پشته ها
- تزریق خدمات
- تیغه گسترش دهنده
معرفی
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
{{ }}
به طور خودکار از طریق تابع PHPhtmlspecialchars
برای جلوگیری از حملات 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