- يقوم Blade بتجميع قوالب .blade.php إلى PHP خالص ويقدم توجيهات نظيفة للشروط والحلقات والتخطيطات والمكونات.
- تتيح لك مجموعات Blade (@stack، @push، @prepend) توحيد البرامج النصية والأنماط، وتفويض ما تم تكديسه إلى وجهات نظر فرعية.
- تتكامل توجيهات البيئة والترخيص والجلسة والتحقق بشكل آمن وواضح مع بقية الإطار.
- تفتح التوجيهات المخصصة والمساعدات مثل Js::from الباب أمام الأنماط المتقدمة، بما في ذلك التوجيه المشابه لـ hasStack.
إذا كنت تعمل مع Laravel بشكل يومي، فستصادف عاجلاً أم آجلاً Blade وتوجيهاته، وبالطبع، مجموعات العرض وفكرة توجيه `hasStack` الافتراضي لإدارتها بشكل أفضل. قد تكون معتادًا على استخدام قوالب PHP التقليدية، أو ربما تكون معتادًا على React أو Vue، ولكن عندما تفهم Blade تمامًا وكل ما يقدمه (بما في ذلك مجموعات العرض)، حينها ستشهد عملية تنظيم العرض لديك نقلة نوعية.
في هذه المقالة، سنتعمق في تفاصيل Blade: ستتعرفون على آلية عمله، وما هي توجيهات التحكم، وكيفية تنظيم التخطيطات والمكونات والفتحات والخصائص والصلاحيات والبيئات، وفي هذا السياق، كيف يتناسب مفهوم المكدسات وتوجيه hasStack، مما يسمح لكم بالتحقق من وجود محتوى مكدس قبل عرضه. كل هذا سيتم توضيحه بأمثلة عملية ومنهجية واقعية مصممة خصيصًا لمشاريع Laravel الحديثة.
ما هو Blade ولماذا من المهم فهم توجيهاته؟
الشفرة هي محرك قوالب Laravel الرسميإنه لا يجبرك على التوقف عن استخدام PHP، لكنه يوفر لك قواعد لغوية أنظف بكثير لخلط منطق العرض وHTML دون فتح وإغلاق العلامات باستمرار. طوال الوقت. كل قالب .blade.php يتم تجميعه إلى PHP خالص ويتم تخزينه مؤقتًا في storage/framework/views، وبالتالي فإن تكلفة وقت التشغيل تكون ضئيلة.
يتم حفظ مناظر الشفرة عادةً في الموارد/الآراء ويتم إرجاعها من المسارات أو وحدات التحكم باستخدام المساعد view()يمكنك تمرير البيانات إلى هذا المساعد في وسيطة ثانية (مصفوفة ارتباطية، compact()إلخ)، ومن وجهة نظرهم، يتم استهلاكهم في بناء الجملة مفاتيح مزدوجة لعرض المحتوى المتسرب أو باستخدام علامات التعجب للمحتوى غير المتسرب.
الميزة الرئيسية لـ Blade هي أنها توفر توجيهات محددة (الكلمات التي تبدأ بـ @) للتعامل مع الشروط، والحلقات، والتفويض، ومكدسات النصوص، والمكونات، والفتحات، والتحقق، والبيئات... كل هذا يجعل كود العرض أكثر قابلية للقراءة والصيانة من مزيج فوضوي من PHP الكلاسيكي مع echo و HTML عادي.
بناء الجملة الأساسي لـ Blade: echo، وescape، وverbatim
العملية الأكثر شيوعًا في العرض هي عرض البيانات. باستخدام Blade، لطباعة محتويات متغير، استخدم ببساطة {{ }}، والتي تترجم داخليًا إلى echo e($variable) وبالتالي ، الهروب من كيانات HTML لمنع XSS:
عرض المتغيرات المُهرّبة بسيط للغاية:
{{ $name }}
إذا كنت ترغب في عرض HTML مُنشأ مسبقًا أو محتوى لا ينبغي تهريبه (على سبيل المثال، لأنك تتحكم فيه وتعرف أنه آمن)، يمكنك استخدام الصيغة {!! !!} ، التي تعطل الهروب التلقائي وتسمح للمتصفح بتفسيره كما هو:
{!! $htmlSeguro !!}
إذا كنت تعمل مع أطر عمل الواجهة الأمامية التي تستخدم أيضًا مفاتيح (على سبيل المثال، Vue أو بعض مكتبات القوالب الخاصة بجانب العميل)، فإن Blade يتيح لك "الهروب" من محركه الخاص بالبادئة @. بهذه الطريقة ، @{{ متغير جافا سكريبت }} لن يتم تفسيره على أنه تعبير Blade، بل سيبقى في HTML ليتم معالجته بواسطة إطار المتصفح.
عندما يكون لديك كتل كبيرة تحتاج إلى مراعاة الأقواس المزدوجة المعقوفة بشكل كامل دون أن يتدخل Blade فيها، يمكنك إحاطتها بالتوجيه @verbatim … @endverbatim . سيبقى كل شيء بداخلها دون تغيير، وهي أداة مفيدة للغاية عند دمج قوالب الواجهة الأمامية المعقدة.
هياكل التحكم: if، switch، loops، والمتغير $loop
يُقدّم Blade مجموعةً كاملةً من توجيهات التحكم في التدفق التي تُغلّف بنية PHP بطريقةٍ أكثر وضوحًا واتساقًا. عمليًا، المنطق يكاد يكون متطابقًا، لكنك تحصل على وضوحٍ أكبر وتتجنّب الإفراط في استخدام وسوم PHP داخل HTML.
عبارات الشرط لقد تم كتابتها بـ @if, @elseif, @else ويغلقون مع @endifلديك أيضًا اختصارات مثل @unless (نفي الشرط) @isset للتحقق من تعريف المتغير و @empty للتحقق من أنه فارغ.
بالنسبة للسيناريوهات ذات القيم المحتملة المتعددة، التوجيه @يُحوّل يكرر بنية التبديل PHP مع @case, @break, @default وأغلق مع @endswitch، مما يسهل استخدام الجمل الشرطية المتعددة التي يسهل قراءتها.
فيما يتعلق بالحلقات، لديك @ل, @foreach y @بينما، بالإضافة إلى @فورلسيعد هذا مفيدًا للغاية عندما تريد التكرار عبر مجموعة ولكنك تحتاج أيضًا إلى التعامل مع حالة القائمة الفارغة دون كتابة عبارة if إضافية. @forelse ... @empty ... @endforelse يمكنك تقديم محتوى بديل إذا لم تكن هناك عناصر.
عندما تسافر عبر @foreachيجعل Blade المتغير متاحًا لك حلقة $، كائن يحتوي على معلومات مفيدة للغاية حول التكرار الحالي: الفهرس، سواء كان هذا هو الدور الأول أو الأخير، سواء كان الفهرس زوجيًا أو فرديًا، وعدد التكرارات الإجمالية، أو حتى الوصول إلى الحلقة الأصلية في حالة الحلقات المتداخلة باستخدام $loop->parent.
وراثة القالب والتخطيطات والأقسام
في التطبيقات العملية، لا ترغب في تكرار الرؤوس أو القوائم أو التذييلات في كل عرض. يتيح لك Blade تحديد التخطيط الرئيسي (عادة ما يتم تخزينه في) resources/views/layouts/master.blade.php) التي ترثها جميع الصفحات. ضمن التخطيط، يمكنك تحديد مساحات "فارغة" بـ @yield ويظل باقي HTML المشترك مستقرًا.
لاستخدام هذا التخطيط من عرض فرعي، ما عليك سوى الإشارة إلى @extends('layouts.master') وأعلن عن الأقسام التي تريد ملئها باستخدام @قسم y endection. كل @yield('nombre') درجة الماجستير سوف تتوافق مع @section('nombre') في نظر ابنتي.
علاوة على ذلك، تتيح لك خاصية @parent ليس فقط تجاوز قسم معين، بل أيضاً إضافة محتوى أعلى أو أسفل ما يحدده التصميم . وهذا مفيد جداً في الأشرطة الجانبية أو الكتل التي ترغب في توسيعها، لا استبدالها.
إذا كنت بحاجة إلى تضمين مقتطفات HTML قابلة لإعادة الاستخدام دون وراثة كاملة، يوفر لك Blade @يشمل ومجموعة كاملة من التوجيهات ذات الصلة: @includeIf, @includeWhen, @includeUnless y @includeFirstالتي تسمح لك بتضمين العروض الفرعية بشكل مشروط أو اختيار أول عرض موجود في قائمة الطرق المحتملة.
في الحالات التي تقوم فيها بتكرار جزء صغير لكل عنصر من عناصر المجموعة، فإن التوجيه @each يجمع بين foreach + include في سطر واحد، ويمكنه حتى تحديد عرض بديل في حالة وصول المجموعة فارغة.
مكونات الشفرة والفتحات والسمات
مكونات Blade هي التطور الطبيعي للتخطيطات وتشمل: فهي تسمح لك بتغليف أجزاء واجهة قابلة لإعادة الاستخدام (أزرار، تنبيهات، بطاقات، نماذج...) مع منطقها وخصائصها وفتحاتها الخاصة بالمحتوى الذي يمكن إدخاله من الخارج، وكل ذلك بصيغة قريبة جدًا من مكونات إطار عمل JS الحديث.
هناك نوعان رئيسيان من المكونات: على أساس الطبقة (تقع في app/View/Components، تم إنشاؤها باستخدام php artisan make:component) و ال مجهولوالتي لا يمكن رؤيتها إلا في resources/views/components بدون فئة مرتبطة. في كلتا الحالتين، يتم عرضها في وجهات نظر مع تسميات من النوع <x-alert /> o <x-forms.input />.
تتلقى المكونات القائمة على الفئة البيانات من خلال سمات HTML (مع kebab-case في الأفق و camelCase في المنشئ، يتم عرضها في عرض المكون كخصائص عامة ويمكن اختيار طريقة shouldRender() لاتخاذ قرار مشروط بشأن ما إذا كان ينبغي عرضها أم لا.
بالنسبة للمحتوى المرن، تتميز المكونات فتحاتيتم الوصول إلى المحتوى الرئيسي على النحو التالي $slot في قالب المكون، و فتحات مع الاسم يتم تعريفها باستخدام <x-slot name="titulo">...</x-slot> عند استخدام المكوّن، يمكنك استدعاء أساليب المكوّن من الداخل من خلال $component وحتى التحقق مما إذا كانت الفتحة فارغة $slot->isEmpty() أو إذا كان له محتوى حقيقي مع $slot->hasActualContent().
كما تعمل المكونات أيضًا على إدارة سمات إضافية التي لا تتطابق مع خصائص المنشئ (على سبيل المثال class, id, data-*يتم تجميع كل هذا في "حقيبة السمات" التي يمكن الوصول إليها مع $attributesوالتي يمكنك تقديمها كما هي أو معالجتها باستخدام طرق مثل merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().
بالإضافة إلى ذلك، يتضمن Blade توجيهات محددة لنموذج HTML النموذجي: @checked و @selected و @disabled و @readonly و @required ، والتي تطبع السمة المقابلة فقط إذا كان الشرط الذي تتلقاه صحيحًا.
التخطيطات باستخدام المكونات والوراثة الكلاسيكية
في Laravel الحديث، أصبح من الشائع بشكل متزايد تحديد تخطيط التطبيق العالمي باعتباره مكون الشفرة (على سبيل المثال ، <x-layout>) بدلاً من استخدام الميراث الكلاسيكي فقط لـ @extendsبهذه الطريقة، يمكن للتخطيط أن يستقبل الفتحات والسمات والخصائص تمامًا مثل بقية المكونات.
يتضمن النمط النموذجي إنشاء مكون تصميم مع php artisan make:component Layoutقم بتحديد هيكل HTML الأساسي (الرأس، وروابط CSS، والتنقل، والتذييل) في القالب الخاص بك واستخدمه {{ $slot }} لحقن المحتوى الرئيسي. اختياريًا، يتم تحديد خانة مُسمّاة. title بحيث تحدد كل صفحة عنوانها بطريقة توضيحية.
من ناحية أخرى، لا يزال الخيار "الكلاسيكي" موجودًا وراثة القالب بواسطة @extends, @section y @yieldكان هذا شائع الاستخدام قبل شيوع استخدام المكونات. يمكنك الاستمرار في دمج كلا النهجين، باستخدام تخطيطات قائمة على المكونات لكل شيء، أو الالتزام بالوراثة التقليدية إذا كان مشروعك مُعدًّا بهذه الطريقة بالفعل.
في كلتا الحالتين، يكون الهدف هو نفسه: تجنب تكرار هيكل HTML في كل عرض ، والحفاظ على نقطة واحدة للحقيقة في التخطيط، والسماح لكل صفحة بالتركيز فقط على محتواها المحدد.
الجلسة والمصادقة والبيئة والتفويض في Blade
يتكامل Blade بشكل جيد للغاية مع بقية الإطار، لذلك فهو لا يقتصر على مجرد عرض HTML: بل يوفر لك أيضًا توجيهات عالية المستوى للتفاعل مع الجلسة ونظام المصادقة وبيئة التطبيق وقواعد التفويض.
لأغراض المصادقة، توجد توجيهات مثل @auth و @guest ، والتي تعرض محتواها فقط إذا كان المستخدم مصادقًا أو ضيفًا، على التوالي. بالإضافة إلى ذلك، يمكنك تحديد حارس معين كوسيط لتحسين سياق المصادقة المستخدم.
ال التوجيهات البيئية كما @production o @env('local') تتيح لك هذه الأدوات تخصيص أجزاء من العرض بناءً على بيئة لارافيل الحالية. وهي مفيدة جدًا، على سبيل المثال، لعرض اللافتات، أو تتبعات التصحيح، أو النصوص البرمجية فقط في البيئات المحلية أو التجريبية.
فيما يتعلق بالجلسات، يُسهّل توجيه @session التحقق من وجود مفتاح الجلسة، وفي حال وجوده، يُوفّر قيمته عبر المتغير $value . وهذا يُحلّ بشكلٍ أنيق مشكلة الرسائل أو التنبيهات المعتادة.
بالنسبة للسياسة وترخيص نمط البوابة، يوفر Blade @يستطيع, @لا يمكن y @كانانيباستخدامها، يمكنك إظهار أو إخفاء الأزرار أو الروابط أو الكتل بأكملها، وذلك بناءً على ما إذا كان لدى المستخدم إذن لإجراء معين على نموذج أو فئة. @guest o @authأنها تسمح ببناء واجهات أكثر أمانا ووضوحا.
النماذج والتحقق ومعالجة الأخطاء في العروض
عند الانتقال من العروض الثابتة إلى النماذج، ستدرك مدى سهولة استخدام Blade. يتطلب Laravel تضمين رمز CSRF في جميع النماذج التي تُعدّل البيانات، ولتجنب كتابة الحقل المخفي يدويًا، يوجد توجيه `@csrf` الذي يُنشئ حقل الإدخال بالرمز المناسب.
طرق HTTP مثل وضع أو تصحيح أو حذف يتم محاكاتها من خلال حقل مخفي _method، وBlade يجعلها متاحة لك @method('وضع') (أو PATCH/DELETE) لتوليده تلقائيًا داخل النموذج.
لإظهار أخطاء التحقق التوجيه موجود @خطأالذي يرتبط بحقل معين. بداخله، يتوفر لديك المتغير. رسالة مع نص الخطأ. بما أنه في الواقع عبارة if مُجمّعة، يمكنك استخدام @else لعرض محتوى بديل عندما لا يكون هناك خطأ.
الكائن أخطاء إنه موجود دائمًا في العروض، ويُجمّع جميع رسائل التحقق للطلب الحالي. يتكامل بسلاسة مع المساعد. old()، والذي يسمح لك بإعادة ملء النموذج بالقيم التي أرسلها المستخدم بعد فشل التحقق، مع الاحتفاظ بالإدخالات وعرض الأخطاء بوضوح.
من خلال الجمع بين هذه التوجيهات وقواعد التحقق في وحدات التحكم أو طلبات النماذج، ستحصل على تدفق تحقق قوي من جانب الخادم ، مكمل للتحقق من جانب العميل، وأكثر أمانًا بكثير ضد التلاعب الخبيث.
المكدسات في Blade: @stack، @push، @prepend ومفهوم hasStack
إحدى ميزات Blade الأقل شهرة ولكنها الأكثر فائدة للمشاريع الكبيرة هي ميزة "المكدسات" . المكدس عبارة عن مجموعة من أجزاء العرض التي يمكنك إضافة محتوى إليها من العروض الفرعية أو المكونات أو العناصر المضمنة، ثم عرضها جميعًا معًا في نقطة محددة في التخطيط الرئيسي.
يُحدد التوجيه `@stack('name')` مكان إضافة جميع الأجزاء المرتبطة بتلك المجموعة. في المقابل، من أي عرض آخر، يمكنك استخدام `@push('name')` لإضافة المحتوى إلى نهاية المجموعة أو `@prepend('name') ` لإضافته إلى بدايتها. يُستخدم هذا الأسلوب بكثرة في البرامج النصية وأنماط الصفحات.
تخيل، على سبيل المثال، أنه في تخطيطك لديك شيء مثل هذا في <head> وفي نهاية <body>:
@stack('styles')
...
@stack('scripts')
ثم، في عرض محدد يحتاج إلى جافا سكريبت إضافية ، يمكنك القيام بما يلي:
@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush
يُتيح هذا للتصميم تجنُّب معرفة كل نص برمجي أو نمط في كل صفحة ؛ فهو يُحدِّد فقط المجموعات، وتُضيف العروض الفرعية ما تحتاجه إلى المجموعات. كما يوجد أيضًا `@pushIf` لدفع المحتوى بناءً على شرط منطقي دون الحاجة إلى كتابة عبارة `if` كاملة.
في هذا السياق، يفتقد العديد من المطورين إلى توجيه مثل `@hasStack` أو ما شابه ، والذي يسمح لهم بالتحقق مما إذا كان مكدس معين يحتوي على محتوى قبل عرضه. على الرغم من أن Blade لا يتضمن توجيهًا بهذا الاسم افتراضيًا، إلا أن الفكرة واضحة: القدرة على القيام بشيء مثل "إذا كان مكدس البرنامج النصي فارغًا، فلا تطبع تسميات إضافية" أو "إذا كانت هناك عناصر في مكدس البيانات الوصفية، فقم بتغليفها في كتلة محددة".
الطريقة لتحقيق السلوك المكافئ اليوم هي استكمال توجيهات المكدس بالمنطق في التخطيط أو مع مساعدين مخصصين، أو حتى مع التوجيهات المسجلة الخاصة بنا عبر Blade::directive()بهذه الطريقة، يمكن محاكاة تعليمة hasStack التي تستفسر داخليًا عن المكدس قبل تحديد HTML الذي سيتم إنشاؤه.
JSON وJavaScript وتوجيهات المساعدة في Blade
في العديد من عروض لارافيل، تحتاج إلى تمرير البيانات من الواجهة الخلفية إلى جافا سكريبت. عادةً، يتضمن هذا إجراء json_encode() من مصفوفة أو مجموعة وتركها داخل نص برمجي مضمّن، لكن هذا ليس آمنًا أو ملائمًا دائمًا. يُسهّل لارافيل هذا الأمر باستخدام الأداة المساعدة Js::from()، والذي يقوم بتسلسل قيم PHP وتحويلها بشكل صحيح إلى JSON لتضمينها في HTML.
عند تقديم بيانات معقدة إلى المتصفح، Js::from() يتجنب المشاكل المتعلقة بعلامات الاقتباس أو الأحرف الخاصة ويعيد تعبيرًا JSON.parse() آمن للتضمين في السمات أو البرامج النصية. لا يُنصح بتمرير تعبيرات معقدة داخل التوجيه، لأن Blade يستخدم تعبيرات عادية داخليًا عند تجميعها، وهذا قد يُسبب مشاكل غير متوقعة.
علاوة على ذلك، يتيح لك Blade تعريف تعليقات القوالب التي لا تُمرر إلى ملف HTML النهائي (على عكس تعليقات HTML التقليدية)، بالإضافة إلى كتل @php … @endphp حيث يمكنك تنفيذ أجزاء صغيرة من كود PHP عند الضرورة القصوى. يمكنك أيضًا استخدام @use لاستيراد الفئات إلى العرض أو تعيين أسماء بديلة لها، وهو أمر مفيد عند العمل مع الدوال المساعدة أو المكونات المتخصصة جدًا.
إذا وصلت إلى النقطة التي تحتاج فيها إلى وظيفة صدى متخصصة للغاية لكائنات معينة، فيمكنك التسجيل معالجات الصدى المخصصة مع Blade::stringable()بحيث عندما يتم صدى كائن معين، يقوم Blade باستدعاء معاودة الاتصال الخاصة بك بدلاً من الطريقة السحرية __toString() الطبقة.
وجهات نظر الخطأ، والشظايا، والتوجيهات المخصصة
يتيح لك Laravel تخصيص وجهات نظر الخطأ: ببساطة قم بإنشاء ملفات في resources/views/errors مع رمز HTTP كاسم (على سبيل المثال، 404.blade.php o 500.blade.phpفي كل مرة يحدث هذا الخطأ، سيتم استخدام القالب الخاص بك بدلاً من القالب العام من الإطار.
بالنسبة للحالات التي تعمل فيها بأدوات مثل Turbo أو htmx وتريد فقط العودة أجزاء محددة من عرض مابليد يقدم التوجيهات @fragment … @endfragment جنبا إلى جنب مع أساليب مثل view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()بهذه الطريقة، يمكنك إعادة استخدام نفس القالب بأكمله واستخراج الأجزاء التي تحتاجها فقط اعتمادًا على السياق.
إذا لم يكن ذخيرة التوجيهات كافية بالنسبة لك، فيمكنك دائمًا إنشاء ذخيرتك الخاصة باستخدام Blade::directive()الممارسة المعتادة هي تسجيلهم باستخدام الطريقة boot() de AppServiceProvider أو من خلال موفر مخصص. سيُمرر لك مُجمِّع Blade التعبير داخل التوجيه كسلسلة نصية، وستُعيد لك كود PHP الذي ترغب في توليده عند التجميع.
بالنسبة للظروف المخصصة البسيطة، هناك أيضًا شفرة::إذا()الذي يُنشئ توجيهات شرطية في سطر واحد. على سبيل المثال، يمكنك تعريف @disk('s3') للتحقق مما إذا كان القرص الافتراضي للتطبيق هو S3، ثم استخدامه في أي عرض كما لو كان توجيهًا أصليًا.
باستخدام هذه الترسانة، يمكنك بناء لغة قوالب مصممة خصيصًا لتلبية احتياجاتك ، بما في ذلك توجيه من نوع hasStack إذا كنت ترغب في ذلك، والذي يعمل كسكر نحوي على المنطق الذي يتحقق داخليًا مما إذا كان المكدس يحتوي على محتوى أم لا قبل طباعته.
إن إتقان Blade بعمق - من بناء الجملة الأساسي إلى المكونات المتقدمة، وتوجيهات التفويض، والتحقق من الصحة، والبيئات، وقبل كل شيء، إدارة المكدس - يسمح لك ببناء طرق عرض معيارية وآمنة ومتسقة وسهلة الصيانة ، حيث يتناسب توجيه مستقبلي مثل hasStack بشكل طبيعي لزيادة التحكم في ما يتم إدخاله في كل منطقة من مناطق التخطيط الخاص بك.