Директива @prepend
Директива @prepend применяется в шаблонах Blade для добавления контента в начало стека. Она принимает один параметр - имя стека, в который нужно добавить контент. Контент, заключённый между @prepend и @endprepend, будет помещён в начало соответствующего стека. Это особенно полезно, когда необходимо добавить скрипты или стили, которые должны загружаться перед уже существующими элементами в стеке.
Синтаксис
@prepend('stackName')
<!-- Content to prepend -->
@endprepend
Пример
Давайте добавим ссылку на CSS-файл в начало стека 'styles'. Для этого в основном шаблоне определим стек с помощью директивы @stack, а затем в дочернем шаблоне используем @prepend для добавления стилей в начало:
<html>
<head>
<title>App - @yield('title')</title>
@stack('styles')
</head>
<body>
@yield('content')
@stack('scripts')
</body>
</html>
@extends('layouts.app')
@section('title', 'Home Page')
@prepend('styles')
<link rel="stylesheet" href="/css/main.css">
@endprepend
@push('styles')
<link rel="stylesheet" href="/css/extra.css">
@endpush
@section('content')
<h1>Welcome to the Home Page</h1>
@endsection
Результат выполнения кода (сгенерированный HTML):
<html>
<head>
<title>App - Home Page</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/extra.css">
</head>
<body>
<h1>Welcome to the Home Page</h1>
</body>
</html>
Пример
Давайте используем @prepend для добавления JavaScript-скрипта в начало стека 'scripts' в дочернем представлении. Это гарантирует, что основной скрипт будет загружен перед дополнительными скриптами:
<html>
<head>
<title>App - @yield('title')</title>
</head>
<body>
@yield('content')
@stack('scripts')
</body>
</html>
@extends('layouts.app')
@section('title', 'Dashboard')
@push('scripts')
<script src="/js/extra.js"></script>
@endpush
@prepend('scripts')
<script src="/js/main.js"></script>
@endprepend
@section('content')
<h1>Dashboard</h1>
@endsection
Результат выполнения кода (сгенерированный HTML):
<html>
<head>
<title>App - Dashboard</title>
</head>
<body>
<h1>Dashboard</h1>
<script src="/js/main.js"></script>
<script src="/js/extra.js"></script>
</body>
</html>
