Level 67
Yes, your solution works for this very specific simplistic example you gave, but falls apart when you're talking about template inheritance, which you're solution can't handle. @yield does.
Feb 11, 2019
49
Level 75
@cronix take this for example:
<div class="container">
@section('content')
{{ $content }}
@show
</div>
But
<div class="container">
{{ $content }}
</div>
Does the exact same thing, I see no need for section in this example.
As far as yield,
<div class="pull-right">
@yield('navigation')
</div>
same as
<div class="pull-right">
<?= View::make('navigation'')->render(); ?>
</div>
Granted sometimes yield is shorter. But either way the same thing.
I haven't tried
{{ View::make('navigation')->render() }}
I suppose it would work in blade.
I came up with non-blade techniques since I wasn't using blade. Why when it has to compile to php at runtime anyway.
And it's not any easier than php, in some cases harder with all the sections, yields, etc.
Level 67
That doesn't extend the base template and you'd have to have a complete page for everything instead of a master template and being able to easily override or extend portions of that base template. Perhaps a free video from Jeffrey is in order? I'm done with this conversation and polluting the OPs thread. It's too bad there isn't a PM system here. Carry on.
Level 75
Okay no reply needed:
But that's the whole point, having a master layout, and with
<?= View::make('whatever')->render(); ?>
you can place many different things in there as needed.
You can use it one time, 20 times, whatever.
It's the same as section and yield, you are just putting in various content somewhere in the layout. But enough on this.
Level 13
@lestah Can you provide your full code of main.blade.php and home.blade.php?
Level 11
@CRONIX -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="{{ asset('template/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{{ asset('template/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="{{ asset('template/css/clean-blog.min.css') }}" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('template/img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 24, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 18, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on August 24, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on July 8, 2019</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2019</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="{{ asset('template/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('template/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Custom scripts for this template -->
<script src="{{ asset('template/js/clean-blog.min.js') }}"></script>
</body>
</html>
This is my main.blade.php without @yielding the page header it displays fine. heres what on my route web.php
Route::get('/', function () {
return view('main');
});
Level 11
i did this
Route::get('/', function () {
return view('home');
});
and my page displays with no errors buy when i change the return view('main') @yield is not working
Level 67
That's not very helpful without seeing how you were trying to do it originally. You also didn't show the home view.
At it's simplest
/resources/views/main.blade.php would have (somewhere)
@yield('header')
Then /resources/views/home.blade.php would have
@extends('main')
@section('header')
this will show where you yield header in the MAIN template. This home template NEEDS to extend the main template
@endsection
The very first line in the home view is important
@extends('main')
That tells the child template that you're extending the main.blade.php template, where your @yield is defined.
In your controller, you'd only load the child view that extends the main template. In this case,home
return view('home');
This is template inheritance. Here are the applicable docs: https://laravel.com/docs/5.7/blade#template-inheritance
Level 13
That header content should create in different page after use @yield in your main.blade.php
Level 11
@CRONIX -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="{{ asset('template/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{{ asset('template/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="{{ asset('template/css/clean-blog.min.css') }}" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
@yield('header')
<!-- Main Content -->
<div class="container">
@yield('content')
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2019</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="{{ asset('template/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('template/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Custom scripts for this template -->
<script src="{{ asset('template/js/clean-blog.min.js') }}"></script>
</body>
</html>
This is my main.blade.php i @yield('header') and @yield('content')
@extends('main')
@section('header')
<!-- Page Header -->
<header class="masthead" style="background-image: url('template/img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
@endsection
@section('content')
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 24, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 18, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on August 24, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on July 8, 2019</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
</div>
</div>
@endsection
this is my home.blade.php i @extends('main')
Level 11
Level 13
@LESTAH - Then you have to use different different names for that? otherwise you can't yield it but in same page you can create multiple with different name.
Level 67
@lestah Are both your main.blade.php and home.blade.php views in the same dir and not separate dirs? By your code, they should both be directly in /resources/views.
Is your controller returning the home view, or main view?
Level 11
@CRONIX - yes they are both on the views folder... just testing the page not using any controller yet
Route::get('/', function () {
return view('home');
});
Route::get('about', function () {
return view('about');
});
Route::get('contact', function () {
return view('contact');
});
i can view them with no errors but when i do this
Route::get('/', function () {
return view('main');
});
Route::get('about', function () {
return view('about');
});
Route::get('contact', function () {
return view('contact');
});
main page is broken the part that i @yield is blank on file source page
Level 67
Right, you load the view that is extending it. The child view home not main. As you noted, that works!
Level 67
I haven't tried it, but you might be able to load the main view directly if you give the @yield a default value in the main template.
@yield('header', 'This is default content if header is not supplied')
If you want no content there for default, use an empty string for the 2nd parameter.
1 like
Level 11
@CRONIX - this what i did on my main.blade.php
<!DOCTYPE html>
<html lang="en">
@include('partials._head')
<body>
@include('partials._nav')
<!-- Main Content -->
<div class="container">
@yield('content')
</div>
<hr>
@include('partials._footer')
@include('partials._javascripts')
</body>
</html>
it works and i think its more organize by the way thanks for your help :D
Level 122
You should mark one of @cronix answers correct
Level 11
@SNAPEY - ok :D
Please or to participate in this conversation.