Laravel @include и @yield blade
В настоящее время я использую шаблонизатор Laravel Blade для создания страниц. Я использую страницу по умолчанию для рендеринга всего. Проблема в том, что я не могу получить все css в головной части. В меню есть настраиваемый CSS, который я в конечном итоге хочу включить в голову. Таким образом, я могу использовать каждую деталь индивидуально. Почему css не попадает в часть head.blade.php?
Default.blade.php
<!doctype html>
<html>
<head>
@include('includes.head')
</head>
<body>
<div class = "container">
<header class = "row">
@include('includes.menu')
</header>
<div id = "main" class = "row">
@yield('content')
</div>
</div>
</body>
</html>
head.blade.php
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
@yield('styles')
menu.blade.php
@section('styles')
<link href = "{{ asset('/css/menu.css') }}" rel = "stylesheet">
@endsection
login.blade.php
@extends('layouts.default')
@section('styles')
@parent
<link href = "{{ asset('/css/login.css') }}" rel = "stylesheet">
@endsection
@section('content')
--content here--
@stop
В конечном итоге я хочу, чтобы каждый отдельный css загружался в файл head на основе включенных представлений.
Ответы 2
Default.blade.php
<!doctype html>
<html>
<head>
@section('head')
@include('includes.head')
@show
</head>
<body>
<div class = "container">
<header class = "row">
@include('includes.menu')
</header>
<div id = "main" class = "row">
@yield('content')
</div>
</div>
</body>
</html>
@section ... @show такой же, как @yield, но сразу показывает
head.blade.php
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
тогда, если вы хотите добавить больше стилей в голову, сделайте это в menu.blade.php
@section('head')
@parent
<link href = "{{ asset('/css/menu.css') }}" rel = "stylesheet">
@endsection
или если вы хотите заменить все стили, сделайте это без @parent
поместите ваш @yield('styles') в Default.blade.php после @include, и он будет работать
Это возвращает встроенный CSS. Я предпочитаю, чтобы все мои CSS находились в голове. Полагаю, это невозможно с помощью двигателя с лезвиями.
Вот моя песчинка. Вы можете организовать их таким образом, чтобы разделы распознавания лезвия были определены в главном шаблоне (в вашем случае default.blade.php)
default.blade.php
<!doctype html>
<html>
<head>
@yield('head')
@yield('styles')
</head>
<body>
<div class = "container">
<header class = "row">
@yield('primarymenu')
</header>
<div id = "main" class = "row">
@yield('content')
</div>
</div>
@yield('scripts')
</body>
</html>
Обратите внимание, что я добавил раздел скриптов ^^^, который позже также будет заполнен в каждом компоненте (меню, логин)
включает / head.blade.php
@section('head')
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
@endsection
включает / menu.blade.php
@section('primarymenu')
<!-- here goes your navitation links -->
@endsection
@section('styles')
@parent
<link href = "{{ asset('/css/menu.css') }}" rel = "stylesheet">
@endsection
@section('scripts')
@parent
<script type = "text/javascript" src = "{{ asset ('js/menu.js') }}"></script>
@endsection
login.blade.php
@extends('layouts.default')
@section('content')
@include('includes.head')
@include('includes.menu')
<!-- here goes your login contents -->
@endsection
@section('styles')
@parent
<link href = "{{ asset('css/login.css') }}" rel = "stylesheet">
@endsection
@section('scripts')
@parent
<script type = "text/javascript" src = "{{ asset ('js/login.js') }}"></script>
@endsection
Также обратите внимание на использование @parent, которое также помогает, когда вы хотите добавить больше контента в раздел, где другие компоненты, возможно, уже были заполнены контентом.
Надеюсь, это поможет!
Хотя при этом загружается CSS для login.blade.php, CSS для меню по-прежнему не отображается.