I'm trying to yield in one of my blade files but it's not working.
This is my index.blade.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="token" content="{{ csrf_token() }}">
<title>Forum</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/css/bulma.css" rel='stylesheet' type='text/css'>
<link href="/css/all.css" rel='stylesheet' type='text/css'>
</head>
<body>
<div id="app">
#include('shared.menu.menu')
#yield('content')
</div>
<script src="/js/app.js"></script>
</body>
</html>
This is my login.blade.php:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
So the navigation bar is showing at this point. But the bar is not! When I replace: #yield('shared.bar.bar') with test, test shows up. This is shared/bar/bar.blade.php:
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
test
</h1>
<h2 class="subtitle">
test
</h2>
</div>
</div>
</section>
#stop
What am I doing wrong? Is it also possible to pass variables to the bar? So I can show another title and subtitle on every page?
--EDIT--
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
{{ $title }}
</h1>
<h2 class="subtitle">
{{ $subtitle }}
</h2>
</div>
</div>
</section>
#stop
If you are showing all of your code, looks like your yield is
#yield('shared.bar.bar')
And yout section
#section('bar')
When it should be
#section('shared.bar.bar')
Or you should change your yield to
#yield('bar')
Because #yield and #section are only strings, they are not related to files like #include.
And looks like this file is also wrong:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
#yield is something you should start using only in your main layout file, because it can get messy and hard and harder to undestand what's happening. So, unless you have a section 'shared.bar.bar' to fill this #yield, you should probably do something like
#extends('index')
#section('content')
<form>
.... your login form
</form>
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop
To have the title changed via section you can also do:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>#yield('title')</title>
</head>
or
<h1 class="title">
#yield('title')
</h1>
And your login blade file, you can do
#extends('index')
// This will tell the Blade Compiler to replace every
// occurence of #yield('title')
#section('title')
User Login
#stop
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop
Related
I am new to laravel framework, want to use laravel layout master pages, and used to include child pages in master page. here is my header and footer page and app.blade.php is my master page, where i am using #yield to show data. but it did not work for me. my output is showing blank.
app.blade.php (Layout master page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div>
#yield('header')
</div>
<div class="content">
#section('content')
<h1> Body </h1>
#endsection
</div>
<div>
#yield('footer')
</div>
</div>
</body>
</html>
Header.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.header
{
height:100px;
width:100%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="header">
#section('header')
<center> Layout Header Master page </center>
#show
</div>
</body>
</html>
footer.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.footer
{
height:100px;
width:100%;
background-color: aquamarine;
padding-top: 50px ;
}
</style>
</head>
<body>
<div class="footer">
#section('footer')
<center> Layout Footer Master page </center>
#show
</div>
</body>
</html>
web.php (Route)
Route::get('/masterpage','studentcontroller#viewmasterpage')->name('masterpage');
studentcontroller.php
public function viewmasterpage()
{
return view('layouts/app');
}
Problems:
There are some problems in your blades.
Every opening #section Tag needs a closing #endsection Tag.
The section Tags should everything that you want to display in between.
You don't need to add the whole <html> etc. you can simply add the necessary code
I think the content should be a yield because you might want to insert the content of other pages there..
I also think you are confusing #includeand #yield
If you want to outsource your header and footer you can simply #include('yourFolder/footer') and it inserts the code
Solution:
Change the #yield to #include
Change the #section to #yield('content')
Examples:
File named: header.blade.php
<div class="header">
<center> Layout Header Master page </center>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
#include('header')
<div class="content">
#yield('content')
</div>
#include('footer')
</div>
</body>
</html>
afterwards you can create a new view: example.blade.php
#extends('layout.app')
#section('content')
//put your content here
#endsection
You are misunderstanding the #extends, #yield and #section directives.
#extends uses another blade file, and fills in the #yield directives with the #sections it defines.
Say you have app.blade.php
<html>
<body>
#yield('header')
#yield('content')
#yield('footer')
</body>
</html>
You could then have say landing.blade.php
#extends('app')
#section('header')
<header>I am the header for the landing page!</header>
#endsection
#section('content')
<div>I am the content for the landing page!</div>
#endsection
#section('footer')
<header>I am the footer for the landing page!</footer>
#endsection
header.blade.php (Just use the code remove others)
#section('header')
<center> Layout Header Master page </center>
#endsection
footer.blade.php (Just use the code remove others)
#section('footer')
<center> Layout Footer Master page </center>
#endsection
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div class="header">
#include('header')
</div>
<div class="content">
#yield('content')
</div>
<div class="footer">
#include('footer')
</div>
</div>
</body>
</html>
studentcontroller.php
public function viewmasterpage()
{
return view('layouts.app');
}
Can not add OwlCarousel to laravel project properly and it doesn't work.
What should I do?
I copied owl.carousel.min.css and owl.theme.default.min.css and owl.carousel.min.js to owlcarousel folder that was placed in the same directory as view.blade.php file was.
My code is:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
</script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
The right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/owl.min.js') }}"></script>
The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/owl.css') }}" />
You have to place owlcarousel folder in the laravel's app/public folder, not in views folder.
Hope this helps.
Laravel view page displays additional '<' character,but it is not given in the code. How can I fix it? I have given the blade.php code for the view. While inspecting, all the tags are misplaced and the head tag is shown inside the body tag.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
GitHub
</div>
</div>
</div>
</body>
</html>
I built a Basic blade template inside
resources/views
,
Further I am using Vuetify.
it look like this:
//app.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', env('APP_NAME')) }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app" dark>
<v-app dark v-if="loading">
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-progress-circular :indeterminate="true" :size="80" color="primary"></v-progress-circular>
</v-flex>
</v-layout>
</v-app>
<v-app v-else v-cloak dark>
<v-navigation-drawer app right></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<v-container grid-list-xl>
<v-layout>
#section('content')
</v-layout>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
#yield('javascript')
</body>
</html>
I create a section
#section('content') so that I can extend the layout and put Content to that area. Inside
resources/views/Event
i have a blade file which extends this and shall add data to the Content
// create.blade.php
#extends('layouts.app')
#section('content')
testests
#endsection
But Nothing gets shown, what am I missing?
In you Blade template, you want to use
#yield('content')
not:
#section('content')
I'm very new to PHP. I have a several of sites in which the only difference is a token. I use twig templating. How can I refactor my code to don't repeat myself and make a code more correct? I assume there is a way in twig to create a base template and reuse that. How should it look in my case?
My file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{# The only different is token below #}
::CLOUDFLARE_ERROR_500S_BOX::
</div>
</div>
</body>
</html>
Another file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{# The only different is token below #}
::ALWAYS_ONLINE_NO_COPY_BOX::
</div>
</div>
</body>
</html>
Create a master template file with twig extension (eg. main.twig) containing below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{% block BodyMain %}{% endblock %}
</div>
</div>
</body>
</html>
and in your other pages, use the code below
{% extends "main" %}
{%block BodyMain %}
::ALWAYS_ONLINE_NO_COPY_BOX::
{% endblock %}
See reference twig extends documentation