如何在Laravel中定义一个高度灵活的视图布局文件
首先我们定义一个默认布局文件：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>@yield('title', 'Home Page')</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
@yield('meta')
@section('style')
<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/main.css') }}">
@show
<!-- App -->
<script>
window.App = window.App || {};
App.siteURL = '{{ URL::to("/") }}';
App.currentURL = '{{ URL::current() }}';
App.fullURL = '{{ URL::full() }}';
App.apiURL = '{{ URL::to("api") }}';
App.assetURL = '{{ URL::to("assets") }}';
</script>
<!-- jQuery 和 Modernizr -->
<script src="{{ URL::asset('assets/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js') }}"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ URL::asset("assets/js/vendor/jquery-1.10.1.min.js") }}"><\/script>')</script>
@yield('script.header')
</head>
<body>
@yield('body')
@section('script.footer')
<!-- Script Footer -->
<script src="{{ URL::asset('assets/js/vendor/underscore-min.js') }}"></script>
<script src="{{ URL::asset('assets/js/vendor/backbone-min.js') }}"></script>
<script src="{{ URL::asset('assets/js/vendor/bootstrap.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/main.js') }}"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)
}(document,'script'));
</script>
@show
</body>
</html>
下面我们定义一个扩展自默认布局的使用Bootstrap 3的高度灵活的布局文件：
<!-- views/layouts/master.blade.php -->
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>@yield('title', 'default title')</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
@yield('meta')
<!-- 样式表 -->
{{ HTML::style('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css') }}
{{ HTML::style('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css') }}
@yield('styles')
{{ HTML::style('public/css/app.css') }}
{{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js') }}
<script>
var URL = {
'base' : '{{ URL::to('/') }}',
'current' : '{{ URL::current() }}',
'full' : '{{ URL::full() }}'
};
</script>
</head>
<body>
@yield('navbar.prepend')
@include('app.navbar')
@yield('navbar.append')
<div id="main">
<div class="container">
@yield('main.prepend')
<div id="content">
@yield('content')
</div><!-- ./ #主体内容 -->
<div id="sidebar">
@yield('sidebar')
</div><!-- ./ #侧边栏 -->
@yield('main.append')
</div>
</div><!-- ./ #main -->
@yield('footer.prepend')
@include('app.footer')
@yield('footer.append')
<!-- scripts -->
{{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js') }}
{{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js') }}
@yield('scripts')
{{ HTML::script('public/js/app.js') }}
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)
}(document,'script'));
</script>
</body>
</html>
在具体视图文件中使用上面定义的布局：
@extends('layouts.master')
{{-- meta --}}
@section('meta')
<meta name="robots" content="index, follow">
{{-- other meta --}}
@stop
{{-- styles --}}
@section('styles')
{{ HTML::style('public/css/secondary.css') }}
@stop
{{-- scripts --}}
@section('scripts')
{{ HTML::script('public/js/secondary.js') }}
@stop
{{-- navbar.prepend --}}
@section('navbar.prepend')
{{-- 导航条之前后需要显示的... --}}
@stop
{{-- navbar.append --}}
@section('navbar.append')
{{-- 导航条之后需要显示的... --}}
@stop
{{-- main.prepend --}}
@section('main.prepend')
{{-- 打印表单错误信息 --}}
<div class="row">
@stop
{{-- content --}}
@section('content')
<div class="col-md-8">
<p>主体内容</p>
</div>
@stop
{{-- sidebar --}}
@section('sidebar')
<div class="col-md-4">
<p>侧边栏</p>
{{-- maybe, include sidebar's modules --}}
</div>
@stop
{{-- main.append --}}
@section('main.append')
</div>
@stop
{{-- footer.prepend --}}
@section('footer.prepend')
{{-- 页面尾部之前要做的... --}}
@stop
{{-- footer.append --}}
@section('footer.append')
{{-- 页面尾部之后要做的... --}}
@stop
No Comments