Шаблонизатор
- приложение, которое используется для
подстановки данных в определенные
указанные места шаблона и формирование
окончательного вида проекта.
Шаблон
- документ, который содержит в себе
html-теги, т.е оформление и
структуру страницы, а также специальные
метки, в которые подставляются данные
из логической части.
В
шаблоне Blade не должно быть
ни одной строки на php, т.к
вся логика для формирования дизайна
заменяется на специальные метки и
конструкции шаблонизатора.
Которые
в последствии при компиляции будут
заменены на строки кода в php.
Шаблоны
располагаются \resourse\views
Скомпилированные
шаблоны располагаются в \storage\framework\views
Файл
шаблона должен храниться с расширением
blade.php!
Разобьем шаблон
на части.
Выделим панель
навигации в в секцию.
@section('navbar')
<nav
class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Laravel
Project:</a>
</div>
<div id="navbar" class="navbar-collapse
collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="<?php
echo route('home'); ?>">Home</a></li>
<li><a href="<?php echo route('about');
?>">About</a></li>
<li><a href="<?php echo route('articles');
?>">Articles</a></li>
<li><a href="<?php echo
route('article',array('id'=>10)); ?>">Article</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
@endsection <!-- закрывает
секцию -->
@yield('navbar') <!-- вызывает
секцию -->
Мы
можем заменить эти две директивы на
одну @show()
@endsection <!-- закрывает секцию
-->
@yield('navbar') <!-- вызывает секцию
→
на
@show()
Применяется
в том случае, если секцию нужно вызвать
сразу в этом же месте.
Поделим
на секции весь шаблон.
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>Laravel
FrameWork Theory</title>
<!--
Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!--
Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
</head>
<body>
@section('navbar')
<nav
class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Laravel
Project:</a>
</div>
<div id="navbar" class="navbar-collapse
collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="<?php
echo route('home'); ?>">Home</a></li>
<li><a href="<?php echo route('about');
?>">About</a></li>
<li><a href="<?php echo route('articles');
?>">Articles</a></li>
<li><a href="<?php echo
route('article',array('id'=>10)); ?>">Article</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
@show
@section('header')
<!-- Main jumbotron for a primary marketing message or call to
action -->
<div class="jumbotron">
<div class="container">
<h1><?php echo $title;?></h1>
<p>This is a template for a simple marketing or informational
website. It includes a large callout called a jumbotron and three
supporting pieces of content. Use it as a starting point to create
something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#"
role="button">Learn more »</a></p>
</div>
</div>
@show
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
@section('sidebar')
<div class="sidebar-module">
<h2>Archives</h2>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
@show
</div>
@section('content')
<div class="col-md-9">
<div class="col-md-6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#"
role="button">View details »</a></p>
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#"
role="button">View details »</a></p>
</div>
<div style="clear:both"></div>
<div class="blog-post">
<div class="page-header">
<h1>Sample blog post</h1>
</div>
<p>This blog post shows a few different types of content
that's supported and styled with Bootstrap. Basic typography, images,
and code are all supported.</p>
<p>Cum sociis natoque penatibus et magnis <a
href="#">dis parturient montes</a>, nascetur
ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam
quis risus eget urna mollis</strong> ornare vel eu leo. Nullam
id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em>
mollis euismod. Cras mattis consectetur purus sit amet fermentum.
Aenean lacinia bibendum nulla sed consectetur.</p>
</div><!-- /.blog-post -->
</div>
@show
</div>
<hr>
<footer>
<p>© 2015 Company, Inc.</p>
</footer>
</div>
</body>
</html>
Теперь
каждая секция может быть динамичной.
В папке с нашим
шаблоном создаем папку layouts
для макетов и переносим туда наш
шаблон template.blade.php
Переименуем
его в layout.blade.php
В
корне создаем новый файл index.blade.php — это
шаблон главной страницы нашего проекта.
Это дочерний шаблон, который будет
наследовать функционал layout.blade.php
Идем
в контроллер:
App\Http\Controllers\Admin\IndexController.php
и подключаем там новый шаблон.
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class IndexController extends Controller
{
public function show() {
if(view()->exists('default.index')) {
return view('default.index')->withTitle('Hello World');
}
abort(404);
}
}
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class IndexController extends Controller
{
public function show() {
if(view()->exists('default.index')) {
return view('default.index')->withTitle('Hello World');
}
abort(404);
}
}
Но
у нас ничего не отображается при обращении
к http://tlaravel.loc/, потому
что шаблон index.blade.php пуст
В
дочернем шаблоне index.blade.php наследуем
родительский шаблон. Пишем:
@extends('default.layouts.layout')
default.layouts.layout
— путь к шаблону относительно каталога
view.
Определив
секции и родительском макете, их можно
переопределить в дочернем макете.
В
дочернем шаблоне index.blade.php полностью
переопределим секцию меню:
@section('navbar')
hello
@endsection
Если
нам необходимо использовать
содержимое из родительской секции,
то напишем:
@section('navbar')
@parent
@endsection
Добавим
в еще элементы на страницу, а также
добавим в сайдбар дополнительный блок:
@extends('default.layouts.layout')
@section('navbar')
@parent
@endsection
@section('header')
@parent
@endsection
@section('sidebar')
@parent
<div class="sidebar-module">
<h4>About</h4>
<p>Text here</p>
</div>
@endsection
Для
контента нет смысла определять секцию,
т.к он будет динамически изменяться.
В
layouts\ layout.blade.php удалим
контент.
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>Laravel
FrameWork Theory</title>
<!--
Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!--
Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
</head>
<body>
@section('navbar')
<nav
class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Laravel
Project:</a>
</div>
<div id="navbar" class="navbar-collapse
collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="<?php
echo route('home'); ?>">Home</a></li>
<li><a href="<?php echo route('about');
?>">About</a></li>
<li><a href="<?php echo route('articles');
?>">Articles</a></li>
<li><a href="<?php echo
route('article',array('id'=>10)); ?>">Article</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
@show
@section('header')
<!-- Main jumbotron for a primary marketing message or call to
action -->
<div class="jumbotron">
<div class="container">
<h1><?php echo $title;?></h1>
<p>This is a template for a simple marketing or informational
website. It includes a large callout called a jumbotron and three
supporting pieces of content. Use it as a starting point to create
something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#"
role="button">Learn more »</a></p>
</div>
</div>
@show
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
@section('sidebar')
<div class="sidebar-module">
<h2>Archives</h2>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
@show
</div>
@yield('content')
</div>
<hr>
<footer>
<p>© 2015 Company, Inc.</p>
</footer>
</div>
</body>
</html>
В дочернем
шаблоне index.blade.php определим секцию с
контентом:
@extends('default.layouts.layout')
@section('navbar')
@parent
@endsection
@section('header')
@parent
@endsection
@section('sidebar')
@parent
<div class="sidebar-module">
<h4>About</h4>
<p>Text here</p>
</div>
@endsection
@section('content')
<div
class="col-md-9">
<div class="col-md-6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#"
role="button">View details »</a></p>
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#"
role="button">View details »</a></p>
</div>
<div style="clear:both"></div>
<div class="blog-post">
<div class="page-header">
<h1>Sample blog post</h1>
</div>
<p>This blog post shows a few different types of content
that's supported and styled with Bootstrap. Basic typography, images,
and code are all supported.</p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis
parturient montes</a>, nascetur ridiculus mus. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed
posuere consectetur est at lobortis. Cras mattis consectetur purus
sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam
quis risus eget urna mollis</strong> ornare vel eu leo. Nullam
id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em>
mollis euismod. Cras mattis consectetur purus sit amet fermentum.
Aenean lacinia bibendum nulla sed consectetur.</p>
</div><!-- /.blog-post -->
</div>
@endsection
Если кода
много, то его можно вынести в отдельный
файл.
Создаем файл
для контента content.blade.php:
<div
class="col-md-9">
<div class="col-md-6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#"
role="button">View details »</a></p>
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#"
role="button">View details »</a></p>
</div>
<div style="clear:both"></div>
<div class="blog-post">
<div class="page-header">
<h1>Sample blog post</h1>
</div>
<p>This blog post shows a few different types of content
that's supported and styled with Bootstrap. Basic typography, images,
and code are all supported.</p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis
parturient montes</a>, nascetur ridiculus mus. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed
posuere consectetur est at lobortis. Cras mattis consectetur purus
sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam
quis risus eget urna mollis</strong> ornare vel eu leo. Nullam
id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em>
mollis euismod. Cras mattis consectetur purus sit amet fermentum.
Aenean lacinia bibendum nulla sed consectetur.</p>
</div><!-- /.blog-post -->
</div>
В дочернем
шаблоне index.blade.php включим файл с контентом:
@extends('default.layouts.layout')
@section('navbar')
@parent
@endsection
@section('header')
@parent
@endsection
@section('sidebar')
@parent
<div class="sidebar-module">
<h4>About</h4>
<p>Text here</p>
</div>
@endsection
@section('content')
@include('default.content')
@endsection
Сформируем
макет для страницы about. Создаем
страницу about.blade.php
@extends('default.layouts.layout')
@section('header')
@endsection
@section('sidebar')
@endsection
@section('content')
<div class="jumbotron">
<h2 class="blog-post-title">Sample blog
post</h2>
<p class="blog-post-meta">January 1, 2014 by <a
href="#">Mark</a></p>
<p>This blog post shows a few different types of content
that's supported and styled with Bootstrap. Basic typography, images,
and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a
href="#">dis parturient montes</a>, nascetur
ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam
quis risus eget urna mollis</strong> ornare vel eu leo. Nullam
id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em>
mollis euismod. Cras mattis consectetur purus sit amet fermentum.
Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum
faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam
porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed
consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl
consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget
metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla.
Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod
semper.</li>
<li>Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit
amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed
posuere consectetur est at lobortis.</p>
</div>
@endsection
Открываем
AboutController.php
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class AboutController extends Controller
{
public function show() {
if(view()->exists('default.about')) {
return view('default.about')->withTitle('Hello World');
}
abort(404);
}
}
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class AboutController extends Controller
{
public function show() {
if(view()->exists('default.about')) {
return view('default.about')->withTitle('Hello World');
}
abort(404);
}
}
Комментариев нет:
Отправить комментарий