I started laravel with Laravel8 and from what I was seeing was that they were moving towards using component templating such as:
<-- layout.blade.php -->
<html>
<body>
{{ $slot }}
</body>
</html>
<-- view.blade.php -->
<x-layout>
<main>Content</main>
</x-layout>
As opposed to #yield and #extends type templating:
<--layout.blade.php -->
<html>
<body>
#yields('content')
</body
</html>
<-- view.blade.php -->
#extends('layout')
#section('content')
Content
#endsection
Now I'm working towards creating dynamic titles per page.
<-- views/components/layout.blade.php -->
<html>
<head>
<title>{{ isset($title) ? $title . ' | ' . config('app.name') : config('app.name') }}</title>
</head>
<body>
{{ $slot }}
</body>
</html>
<-- views/articles/index.blade.php -->
<x-layout>
<main>Content</main>
</x-layout>
Then an Article Controller
public function index()
{
$title = 'Articles';
return view('articles.index', [
'articles' => Article::latest('published_at')->filter(request(['search', 'category']))->get(),
'title' => $title,
]);
}
Using the newer "component templating" style, how do I pass the $title from the articles/index.blade.php view to the layout component? Is this a limitation of this approach?
I've seen a number or writeups on how to achieve this using the #yields #extends approach, but trying to not have to rework my entire site if there is the capabilities with the approach I've taken.
I figured out how to address this. You can pass data to a parent component in the same way you pass data to a child component.
<-- views/articles/index.blade.php -->
<x-layout :title="$title">
<main>Content</main>
</x-layout>
Allowed the parent to be updated from the child.
Related
In Controller :
$data = [
'name' => 'Jony',
'age'. => 18
];
return View::make("user/detail", compact('data'));
In view/user/detail.blade.php
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Details</h1>
<div class="user-informatio">
//
I want to display view : user.blade.php
//
</div>
</body>
</html>
In view/user/user.blade.php
<div>{{ $data['name'] }}</div> <br/>
<div>{{ $data['age'] }}</div>
I want to pass $data from detail.blade.php to user.blade.php and display user.blade form inside detail.blade.
Please give me any ideas.Thanks
You can #include user.blade.php file in it.
<div class="user-informatio">
//
I want to display view : user.blade.php
//
#include('user.user', $data)
</div>
try this
return view('user/detail')->with('data', $data);
then in the view just use $data
I am trying to make layout using blade but the problem is that when i tried to
#yield on the file which is included in master file but #yield is not working.
resouces/views/layouts/app.blade.php
<html>
<head>
...
...
</head>
<body>
#include('layouts.navigation')
#include('layouts.main_panel')
#include('layouts.footer')
</body>
</html>
resouces/views/layouts/main_panel.blade.php
// some html stuff
#yield('form')
// some html stuff
resouces/views/auth/login.blade.php
#extends('layouts.app')
#section('form')
<form>
// input
</form>
#endsection
I would suggest you pass variables to the partials and echo
them inside it. This is an alternative way to achieve what you are
trying to do.
For example -
Partial blade file (resouces/views/partials.header.blade.php) -
<h4>{{ $name }}</h4>
View (resouces/views/custom.blade.php) -
#include('partials.header', [ 'name' => 'Lorem Ipsum' ])
I am also using laravel framework but i used to do in that way :-
Layout :- resouces/views/layouts/app.blade.php
<html>
<head>
...
...
</head>
<body>
#include('layouts.navigation')
#yield('content') // use #yield here why you need separate file
#include('layouts.footer')
</body>
</html>
After that :- resouces/views/auth/login.blade.php
#extends('layouts.app')
#section('content')
<form>
// input
</form>
#stop
Hope it helps!.. I used to follow this structure in laravel project
I have a project which has 2 login forms, one for consumers and one for creators.
Both have different "post-login" areas.
But the view should look pretty similar, so I thought why not DRY-it™.
QUESTION: Here is my solution, but I am sure there is a more elegant solution, please enlighten me if there is.
login.blade.php (master template)
#extends('layout.app')
#section('styles')
{{ Html::style('css/login.css') }} // This also looks deprecated, how do I have a specific css only for this page?
#stop
#section('content')
<div class="container">
<form class="form-signin" action="{{ $loginAction }}"> //smells really bad
<h2 class="form-signin-heading">Login {{ $loginTitle }}</h2>
...
#endsection
login_consumer.blade.php
#extends('layout.login', [
'loginTitle' => 'Consumer',
'loginAction' => 'login_consumers'
])
login_creator.blade.php
#extends('layout.login', [
'loginTitle' => 'Creators',
'loginAction' => 'login_creators'
])
Thanks in advance
Common layout containing header, body content and footer
are app.blade.php having #yields('') directive within allows you to inherit it as well as let you extend with new content through #extends('') directive. Also, you can append in master stylesheet through #show and #parent blade directive as below.
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - #yield('title')</title>
#section('stylesheets')
<link rel="stylesheet" type="text/css" href="style.css"> <!-- this is master stylesheet -->
#show
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
Extending a layout
<!-- Stored in resources/views/login.blade.php -->
#extends('layouts.app')
#section('title', 'Page Title')
#section('stylesheets')
#parent
<link rel="stylesheet" type="text/css" href="login.css">
#endsection
#section('content')
<p>This is my body content.</p>
#endsection
Now, explaining your second part of your question. Above case was about a common layout, but this case you are trying to achieve common body content so there's Components & Slots for that. Separate your common body content as a component and pass variable as a slot. This came from Laravel 5.4. Previously, it was called partials which was used through #include('') directive.
https://laravel.com/docs/5.5/blade#components-and-slots
I have the following files:
foo.blade.php
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
#yield('content')
</body>
</html>
bar.blade.php
<h2>Bar Template</h2>
<div class="bar-content">
#yield('bar-content')
</div>
I want to create another file that is able to extend both the above templates. e.g something like this:
#extends('foo')
#section('content')
<p>Hello World</p>
#extends('bar')
#section('bar-content')
<p>This is in div.bar-content</p>
#endsection
#endsection
To give:
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
<p>Hello World</p>
<h2>Bar Template</h2>
<div class="bar-content">
<p>This is in div.bar-content</p>
</div>
</body>
</html>
How can I do this?
Use multiple files.
for eg;
layout.blade.php:
#include('header')
#yield('layout_content')
#include('footer')
second.blade.php
#extends('layout')
#section('layout_content')
<div>
#yield('second_content')
</div>
#stop
third.blade.php
#extends('second.blade.php')
#section('second_content')
<h1>Hello World!</h1>
#stop
You can include #yield in any of the parent files and can be used in the child
I would recommend using components. Here is an example.
It seems to me layout/include has a weird logic when there are many of them and you start nesting them. Components are pretty straight forward. For these nested structures you are building there, components also have slots.
I think it's not possible to do what you want here, at least without extending Blade:
https://laravel.com/docs/5.1/blade#extending-blade
If I were you, I'd rearchitectured my views hierarchy to keep things simple.
I do not know if this will work, but try #include instead of #extends for your bar template. The put your section for bar below the other section (not nested). I did not tested this, so I hope it works ;)
// EDIT:
Try it with an if-statement in your foo file:
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
#yield('content')
#if(isset($displayBar) && $displayBar == true)
#include('dashboard.test.bar')
#endif
</body>
</html>
And now the child view:
#extends('dashboard.test.foo')
#section('content')
<p>Hello World</p>
#endsection
<?php $displayBar = true ?>
#section('bar-content')
<p>This is in div.bar-content</p>
#endsection
#php
$ext = '';
#endphp
#if (Request::segment(1)=='explications')
#php
$ext = '_explications'
#endphp
#endif
#extends('pages_templates/template_page_fluid'.$ext)
OK, it has taken me forever (since Friday) to configure everything related to Laravel, mcrypt & PHPStorm and now I am only trying to display a simple form field - it's completely blank
#section('content')
{{ Form::open() }}
{{ Form::label('username', 'Username:') }}
{{ Form::text('username') }}
{{ Form::close() }}
#stop
When I inspect element, no form exists and there are no errors - WTF?
My file is called index.blade.php
Within my routes.php:
Route::get('/', function()
{
return View::make('index');
});
The documentation makes it look so easy
As lagbox says you probably just need to extend a layout. So you have master.blade.php (in a layouts folder in your view probably) which has your HTML head/body tags etc:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/dist/css/app.min.css" rel="stylesheet">
</head>
<body>
#yield('content')
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Then you have your index.blade.php file which will have something like this:
#extends('layouts.master')
#section('content')
{{ Form::open() }}
{{ Form::label('username', 'Username:') }}
{{ Form::text('username') }}
{{ Form::close() }}
#stop
Take a look at the Laravel Blade documentation for more info: Laravel Blade