如何在Laravel中定义一个高度灵活的视图布局文件

由学院君创建于8年前, 最后更新于 3年前版本号 #2 9733 views 10 likes 0 collects

首先我们定义一个默认布局文件：

<!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