file: app/route.php
Route::get('/', function()
{
return View::make('home');
});
file: app/views/home.blade.php
{{-- Blade comment. --}}
#extends('layouts.base')
#section('head')
<link rel="stylesheet" href="second.css" />
#stop
#section('body')
<h1>Heading</h1>
<p>Hello Home!</p>
#stop
file: app/views/layouts/base.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
#section('head')
<link rel="stylesheet" href="style.css" />
#show
</head>
<body>
#yield('body')
</body>
</html>
When I access to laravel.localhost/
It only output
#extends('layouts.base')
but however, if I remove the
{{-- Blade comment. --}}
then it works perfectly.
May I know what is the issue?
The first line in your extended blade view must be the #extends directive.
Yes it is a convention by the devs.
Look at BladeCompiler.php on line 119.
protected function compileExtends($value)
{
// By convention, Blade views using template inheritance must begin with the
// #extends expression, otherwise they will not be compiled with template
// inheritance. So, if they do not start with that we will just return.
if (strpos($value, '#extends') !== 0)
{
return $value;
}
Related
Template:
<!DOCTYPE html>
<html>
<head>
<title>App Name #yield('title')</title>
</head>
<body>
#section('content')
</div>
</body>
</html>
View:
#section('content')
#if(session('message'))
<p>{{session('message')}}</p>
#endif
#foreach ($posts as $post)
<h2> {{$post->title}}</h2>
<p>{{$post->body}}</p>
Edit
Delete
#endforeach
#endsection
I have used this code and get white screen how to solve this problem
make layout folder and layout file get only white screen no any error and output
MASTE PAGE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="csrf-token" content="{{csrf_token()}}">
#yield('metas')
#yield('head')
#yield('style')
</head>
<title>#yield('title')</title>
<body class="skin-blue sidebar-mini">
#yield('body')
</body>
<footer>
#yield('footer')
#yield('script_whole')
</footer>
</html>
CHILD PAGES:
#extends('path.to.master_page')
#section('head')
//head elemetns here
#endsection
#section('style')
//style here
#endsection
#section('title', 'my_title')
#section('content')
//content elemetns here
#endsection
#section('footer')
//footer elemetns here
#endsection
#section('script_whole')
//scripts here
#endsection
and now every page that extends from MASTER_page, so should use #section
Instead of using
#section('content');
in main blade file use
#yield('content');
I've a simple main layout:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
#yield('style')
</head>
<body>
#include('layouts.frontend.partials.slider')
#yield('javascript')
</body>
</html>
layouts.frontend.partials.slider
#section('style')
<link rel="stylesheet" type="text/css" href="mystyle.css">
#append
#section('javascript')
<script></script>
#append
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 1</div>
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 2</div>
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 3</div>
</div>
<div class="swiper-pagination"> </div>
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>
The #section('style') will be ignored while the #section('javascript') is working fine within the include file...
I've reduced both files (main and include) to a minimum and swapped the position of style and javascript without any difference
What seems to be working is to change to position from the #yield('style') to the body, like:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
#include('layouts.frontend.partials.slider')
#yield('javascript')
#yield('style')
</body>
Maybe it's not allowed to have #section in an include file?
What i want to archive is to have multiple partial includes with it's own css and javascript includes
Thanks
Here is another way to do, it's good because you have some flexibility.
You create a master template, put your main files
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="">
#section('css')
<!-- some master css here -->
#show
</head>
<body>
#section('navbar')
#include('common.navbar')
#show
#yield('content')
#include('common.footer')
#section('js')
<!-- some js here -->
#show
</body>
</html>
The others childs extends the master, you'll have all your layout and can customize what you want:
Child blade
#extends('master')
#section('css')
#parent
<!-- more css -->
#endsection
#section('navbar')
#parent
#endsection
#section('content')
<!-- Main content goes here -->
#endsection
#section('js')
<!-- replace js and add my own -->
<!-- others js -->
#endsection
Did you try extending your child blade file to use the master template?
At the top of layouts.frontend.partials.slider did you put #extends('layout.master') (or whatever the path to your master template is?)
It could be an issue caused by the order in which you are including files. Wouldn't a simpler solution be to have a #yield('slider') in your master template and simply wrap the slider content in #section('slider') and drop the #include...?
My view (template) #extends on first line:
#extends('layout')
#section('content')
<p>This is my body content.</p>
#stop
My layout :
<!DOCTYPE html>
<html>
<head>
<title>Hello!!!</title>
</head>
<body>
<div>
#yield('content')
</div>
</body>
</html>
If load page header (Status Code:500 Internal Server Error)
Its better if you turn on debugging and post the error log along..
And this should work usually..and make sure your blade files are on root of views folder .
index.blade.php
#extends('layout')
#section('content')
<p>This is my body content.</p>
#endsection
layout.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Hello!!!</title>
</head>
<body>
<div>
#yield('content')
</div>
</body>
</html>
--Use this on Routes--
Route::get('/', function () {
return view('index');
});
I'm very new to Laravel and I'm trying to figure out how to use the templating.
I feel so sure that what I have here should work, but I keep getting an error when I run it. I think it has to do with having to #yield commands on the same line. Is this simply a limitation of the blade engine?
routes.php
Route::get('/', function()
{
return View::make('hello');
});
// Test Route:
Route::get('jtest', function(){
$page = array(
"lang" => "en",
"title" => "jtest",
"css" => "css/layout.css",
"rand" => rand()
);
return View::make('jtest')->with('page', $page);
});
jtest.blade.php
#extends('layout')
#section('html-lang')
#if ( isset($page['lang']) )
{{ $page['lang'] }}
#endif
#endsection
#section('title')
#if ( isset($page['title']) )
{{ $page['title'] }}
#endif
#endsection
#section('meta-description')
#if ( isset($page['meta-description']) )
{{ $page['meta-description'] }}
#endif
#endsection
#section('css')
#if ( isset( $page['css'] ) )
{{ $page['css'] }}
#endif
#endsection
#section('rand')
#if ( isset( $page['rand'] ) )
{{ $page['rand'] }}
#endif
#endsection
layout.blade.php
<!doctype html>
<html lang="#yield('html-lang')">
<head>
<meta charset="utf-8">
<title>#yield('title')</title>
<meta name="description" content="#yield('meta-description')">
<meta name="author" content="Jimmy Hogoboom">
<link rel="stylesheet" href="#yield('css')?r=#yield('rand')">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src=""></script>
</body>
</html>
And the error is
syntax error, unexpected '='
and the line the error's on looks like this:
<link rel="stylesheet" href="<?php echo $__env->yieldContent('css')?r=#yield('rand'); ?>">
So the problem is here:
<link rel="stylesheet" href="#yield('css')?r=#yield('rand')">
If I remove the second #yield:
<link rel="stylesheet" href="#yield('css')?r=">
the page loads fine.
So is this just a limitation of blade, or is there some other way I should be placing these values in the page?
The best idea is to use #yield and sections only for bigger parts like main content or for a sidebar.
If you need 'isset' condition you can use
#if(isset($title)){{$title}}#endif
But this also should be done on controller with clean php including default value for a variable.
I am not sure why you need to use #yield for a small thing.
the following simple code will do the job:
<link rel="stylesheet" href="{{ $page['css'] }}?r={{ $page['rand'] }}">
I'm new in codeigniter, I feel trouble about layout/template/themes in codeigniter.
I don't know when should using one of them..
What is the best way that i can do? if i want to make a website with free a html/css template like
goodnatured
|--img
|--img01.jpg
|--css
|--style.css
|--js
|--jquery.js
|--index.html
Anyone can tell me a tutorial, suggest, ... thanks
I just write little additional library(application/libraries/display_lib.php) for rendering tempates and similar page blocks.
Something like this:
class Display_Lib{
private $_CI;
private $_template_data;
public function __construct()
{
$this->_CI =& get_instance();
}
public function set($key, $value)
{
$this->_template_data[$key] = $value;
}
public function get($key)
{
return $this->_template_data[$key];
}
public function get_template_data()
{
return $this->_template_data;
}
public function display_page($view, $data = array())
{
$this->set('content', $this->_CI->load->view($view, $data, TRUE));
$this->_CI->load->view('templates/main_template', $this->get_template_data());
}
}
Set this library in auto load:
$autoload['libraries'] = array('session', 'database', 'display_lib');
And call it in controller:
class Main extends CI_Controller{
public function index()
{
$some_data = array();
$this->display_lib->display_page('views/main_view', $some_data);
}
}
Template example:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<?=base_url();?>">
<meta charset="utf-8">
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header></header>
<div class="auth_wrapper">
<div class="content">
<?=$content;?>
</div>
<div class="buffer"></div>
</div>
<footer></footer>
</body>
</html>
And application/views/main_view simple exmaple:
<div>Come content will be here</div>
This lib allow to use templates and render views from controllers.
Templates handle the layout of your page. You create a template that will contain your meta, header, footer, and a space for the body. The body get injected in the template, this is where the content change.
The idea is that most of the site don't change, only the body changes. This is where templates are useful, they save you time and increase consistency.
See this template library, it's pretty good: http://getsparks.org/packages/template/show
Themes is combined with a template as templates often define the layout and a theme just 'skin' the layout. A theme include assets and styles that will modify the template further more.
Cheers
Make a template.php, header.php, footer.php. Below is template.php, Similarly make header and footer and place them all in views folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header><?=$this->load->view('header');?></header>
<div class="wrapper">
<div class="content">
<?=$main?>
</div>
</div>
<footer><?=$this->load->view('footer');?></footer>
</body>
</html>
In your Controller function:
function index(){
$data = array();
$data['main'] = "home"; #this view is home.php in views folder, the content part of template.php
$this->load->view('template', $data); #this is the template file being rendered.
}
This is the most simple way of using templates in CI I think.