Директива @push
Директива @push в Blade-шаблонах Laravel позволяет добавлять блоки кода (обычно CSS или JavaScript) в именованный стек. Первым параметром передаётся имя стека, вторым - содержимое, которое будет добавлено в этот стек. Директива работает в паре с директивой @stack, которая выводит накопленное содержимое в нужном месте шаблона. Это удобно, когда дочерние шаблоны должны добавлять свои скрипты или стили в секции, определённые в родительском макете.
Синтаксис
@push('stack_name')
<!-- содержимое, которое будет добавлено в стек -->
@endpush
Пример
Добавим стили в стек 'styles' в дочернем шаблоне:
@extends('layouts.app')
@section('content')
<h1>Дочерняя страница</h1>
<p>Основной контент страницы.</p>
@endsection
@push('styles')
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
@endpush
Пример
Добавим JavaScript в стек 'scripts' в дочернем шаблоне:
@extends('layouts.app')
@section('content')
<h2>Форма обратной связи</h2>
<form id="contactForm">
<input type="text" name="name" placeholder="Введите имя">
<button type="submit">Отправить</button>
</form>
@endsection
@push('scripts')
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
console.log('Форма отправлена');
});
</script>
@endpush
Пример
Добавим внешнюю библиотеку в стек 'head' через @push:
@extends('layouts.app')
@section('content')
<div id="profile">
<h1>Профиль пользователя</h1>
<p>Информация о пользователе.</p>
</div>
@endsection
@push('head')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
@endpush
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log('jQuery загружен');
});
</script>
@endpush
