Laravel @include and @yield blade
Question
I'm currently using the Laravel Blade template engine to generate pages. I'm using a default page to render everything. The problem is that I can't seem to get every css in the head part. The menu has a custom css that I eventually want to include into the head. This way I can use every part individually. How come the css doesn't get included into the head.blade.php part?
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
What I eventually want is that every individual css gets loaded into the head file based on the included views.
2 answers
solution1
2 2019-10-06 18:07:59
Here's my grain of sand. You can organize them this way to have blade recognize sections defined in the master template (default.blade.php in your case)
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>
Notice I added scripts section ^^^, which later will also be populated within each component (menu, login)
includes/head.blade.php
@section('head')
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@endsection
includes/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
Also notice the use of @parent which also helps when you want to append more content in a section where other components might have already filled with content.
Hope that helps!
solution2
0 2018-05-29 10:53:08
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 is same as @yield but showing immidiately
head.blade.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
then if you want to add more styles to head do like this in menu.blade.php
@section('head')
@parent
<link href="{{ asset('/css/menu.css') }}" rel="stylesheet">
@endsection
or if you want to replace all styles do this without @parent
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.