Blade Templates في Laravel: الدليل الشامل
Blade Templates في Laravel: الدليل الشامل
دليل عملي من علاء عامر – مطور ومصمم مواقع وتطبيقات
Blade Templates هو محرك القوالب في Laravel الذي يسهل إنشاء واجهات المستخدم الديناميكية والتفاعلية.
2️⃣ نظام الوراثة والـ Layouts
إنشاء Layout أساسي:
{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>@yield('title') - {{ config('app.name') }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
@stack('styles')
</head>
<body>
{{-- Header --}}
<header>@include('partials.navigation')</header>
{{-- Main Content --}}
<main class="container mx-auto px-4 py-8">@yield('content')</main>
{{-- Footer --}}
<footer>@include('partials.footer')</footer>
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
</body>
</html>
صفحة تستخدم Layout:
{{-- resources/views/posts/show.blade.php --}} @extends('layouts.app')
@section('title', $post->title) @section('content')
<article>
<header>
<h1>{{ $post->title }}</h1>
<p class="text-gray-600">
بواسطة {{ $post->author->name }} في {{ $post->published_at->format('j F
Y') }}
</p>
</header>
<div class="content">{!! $post->content !!}</div>
@if($post->tags->count() > 0)
<div class="tags">
<h3>التصنيفات:</h3>
@foreach($post->tags as $tag)
<span class="tag">{{ $tag->name }}</span>
@endforeach
</div>
@endif
</article>
@endsection @push('styles')
<style>
.content {
line-height: 1.6;
}
.tags .tag {
background: #f3f4f6;
padding: 0.25rem 0.5rem;
margin: 0.25rem;
}
</style>
@endpush
### 4️⃣ إضافات مفيدة في Blade
#### تضمين الملفات:
```html
{{-- تضمين header --}} @include('partials.header') {{-- تضمين مع تمرير متغيرات
--}} @include('partials.sidebar', ['user' => $currentUser]) {{-- تضمين مع شرط
--}} @includeIf('partials.admin-menu') {{-- تضمين أول ملف موجود --}}
@includeFirst(['partials.custom-header', 'partials.header'])
```
#### Stacks للأصول:
```html
{{-- في Layout --}}
<head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
@stack('styles')
</head>
<body>
{{-- محتوى الصفحة --}}
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
</body>
{{-- في صفحة فرعية --}} @push('styles')
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
@endpush @push('scripts')
<script>
console.log("صفحة محددة جاهزة!");
</script>
@endpush
```
#### حلقات Blade المفيدة:
```html
{{-- حلقة مع فهرس --}} @foreach($posts as $post)
<div
class="post {{ $loop->first ? 'first' : '' }} {{ $loop->last ? 'last' : '' }}"
>
<h3>{{ $post->title }}</h3>
<small>{{ $loop->iteration }} من {{ $loop->count }}</small>
</div>
@endforeach {{-- حلقة مع شرط --}} @forelse($comments as $comment)
<div class="comment">{{ $comment->body }}</div>
@empty
<p>لا توجد تعليقات</p>
@endforelse
```
### 💡 أفضل الممارسات
1. **استخدم Components** للعناصر المتكررة
2. **نظّم Views** في مجلدات منطقية
3. **اتبع اتفاقيات التسمية** المتسقة
4. **استخدم @stack للأصول** الديناميكية
5. **فعّل Template Caching** للإنتاج
6. **اتبع مبدأ DRY** - لا تكرر نفسك
7. **استخدم Form Requests** مع Blade
### الخطوة التالية
تعلم **Database Migrations** و **Eloquent Relationships** لإدارة قواعد البيانات بكفاءة.
[📩 هل تحتاج مساعدة في تطوير Blade Templates؟](/contact)
Laravel
Blade Templates
Views
Frontend
Components
Layouts
قسم المقالة
Laravel
Blade Templates في Laravel: الدليل الشامل
تعلم أساسيات واستخدام Blade Templates في Laravel لإنشاء واجهات مستخدم ديناميكية وتفاعلية بطريقة منظمة وسهلة.
01
التواصل والاستشارة
تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.
02
التخطيط والجدولة
وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.
03
البرمجة والتطوير
تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.
04
المراجعة والتسليم
ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.
مقالات ذات صلة
مقدمة في Laravel: أقوى إطار عمل PHP الحديث
تثبيت وإعداد Laravel: دليل شامل للمبتدئين
