Laravel Blade Layouts
Laravel uses Blade Templates
extends
@extends('file') is loading file.blade.php file.
section/show, section/endsection, yield, parent
Base File
1
2
3
4
5
| @section('section-name1')
<p>This is test section.</p>
@show
@yield('section-name2', 'Default Value')
|
Extend File
1
2
3
4
5
6
7
8
9
10
11
12
13
| @extends('base')
@section('section-name1')
@parent <!-- Load Parent Section Content -->
<p>This is replace section-name1</p>
@parent <!-- Load Parent Section Content -->
@endsection
@section('section-name2', 'This is section 2 value')
|
stack, push/endpush, prepend/endprepend
Base File
Extend File
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| @push('scripts')
<script type="text/javascript">
function pushFunction() {
// This is imported after prepend.
}
</script>
@endpush
@prepend('scripts')
<script type="text/javascript">
function prependFunction() {
// This is imported before push.
}
</script>
@endprepend
|
Layout File
resources/views/layouts/base.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html>
<head>
<title>@yield('title', 'Default Title')</title>
@stack('styles')
</head>
<body>
@include('partials.menu')
@section('content')
<p>This is layout.</p>
@show
@yield('footer')
@stack('scripts')
</body>
</html>
|
Partial File
resources/views/partials/menu.blade.php
1
2
3
4
5
6
7
|
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
|
Extend File
resources/views/web.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| @extends('layouts.base')
@push('styles')
<style type="text/css">
p {
margin: 10px;
}
</style>
@endpush
@pretend('styles')
<style type="text/css">
ul {
list-style: none;
}
</style>
@endpretend
@section('title', 'This is a extended file')
@section('content')
@parent
<p>This is web page.</p>
@parent
@endsection
@section('footer')
<p>This is footer.</p>
@endsection
@push('scripts')
<script type="text/javascript">
function pushScript() {
}
</script>
@endpush
@pretend('scripts')
<script type="text/javascript">
function pretendScript() {
}
</script>
@endpretend
|
CozyFex