blade-mastery
星标8
分支3
更新时间2026年1月28日 14:55
Blade templating patterns including components, slots, directives, and layouts.
安装
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
SKILL.md
readonly
下载
相关职业SOC
基于 SOC 职业分类
菜单
Blade templating patterns including components, slots, directives, and layouts.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
PHP Artisan CLI patterns including make commands, flags, custom commands, and AI-friendly usage.
Advanced Eloquent ORM patterns including relationships, eager loading, factories, and query optimization.
Laravel development best practices covering service providers, dependency injection, facades, and the Laravel Way.
Laravel Tinker best practices for debugging, testing ideas, and data exploration. When and how to use safely.
Laravel-native error handling patterns. Renderable exceptions, Livewire traits strategies, and user-facing notifications.
Integrate Anthropic Claude API with Laravel. HTTP client, message format, error handling. Use when calling Claude models from Laravel applications.
| name | blade-mastery |
| description | Blade templating patterns including components, slots, directives, and layouts. |
// resources/views/components/button.blade.php
<button {{ $attributes->merge(['class' => 'btn btn-primary']) }}>
{{ $slot }}
</button>
// Usage
<x-button class="btn-lg">Submit</x-button>
php artisan make:component Alert
// app/View/Components/Alert.php
class Alert extends Component
{
public function __construct(
public string $type = 'info',
public string $message = '',
) {}
public function render()
{
return view('components.alert');
}
}
{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
{{-- Component --}}
<div class="card">
{{ $slot }}
</div>
{{-- Usage --}}
<x-card>
<p>Card content</p>
</x-card>
{{-- Component --}}
<div class="card">
<div class="card-header">{{ $header }}</div>
<div class="card-body">{{ $slot }}</div>
<div class="card-footer">{{ $footer }}</div>
</div>
{{-- Usage --}}
<x-card>
<x-slot:header>Card Title</x-slot:header>
<p>Card content</p>
<x-slot:footer>Footer text</x-slot:footer>
</x-card>
{{-- Component --}}
<button {{ $attributes->merge(['class' => 'btn']) }}>
{{ $slot }}
</button>
{{-- Usage: class="btn btn-primary" (merged) --}}
<x-button class="btn-primary">Click</x-button>
<div {{ $attributes->class(['active' => $isActive]) }}>
@if ($condition)
{{-- content --}}
@elseif ($other)
{{-- content --}}
@else
{{-- content --}}
@endif
@unless ($condition)
{{-- shown if false --}}
@endunless
@empty ($items)
<p>No items</p>
@endempty
@foreach ($items as $item)
{{ $item->name }}
@if ($loop->first) First! @endif
@if ($loop->last) Last! @endif
@endforeach
@forelse ($items as $item)
{{ $item->name }}
@empty
<p>No items</p>
@endforelse
@auth
Welcome, {{ auth()->user()->name }}
@endauth
@guest
<a href="/login">Login</a>
@endguest
@can('update', $post)
<a href="{{ route('posts.edit', $post) }}">Edit</a>
@endcan
@cannot('delete', $post)
<p>You cannot delete this post</p>
@endcannot
{{-- resources/views/components/layouts/app.blade.php --}}
<!DOCTYPE html>
<html>
<head>
<title>{{ $title ?? 'My App' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
{{ $slot }}
</body>
</html>
{{-- Page view --}}
<x-layouts.app title="Home">
<h1>Welcome</h1>
</x-layouts.app>
{{-- Layout --}}
<head>
@stack('styles')
</head>
<body>
{{ $slot }}
@stack('scripts')
</body>
{{-- Page --}}
@push('styles')
<link rel="stylesheet" href="custom.css">
@endpush
@push('scripts')
<script src="custom.js"></script>
@endpush
✅ Extract repeated elements into components
✅ Use named slots for complex layouts
✅ Merge attributes for flexibility
✅ Use @stack for page-specific assets
❌ Don't put logic in views
❌ Don't create giant blade files
❌ Don't skip escaping with {!! !!}