正确使用Blade(Laravel),在其自己的文件中有标题的问题

时间:2014-08-12 15:52:45

标签: php css laravel-4 blade

我以为我会从我的刀片模板中拆分标题并分别包含页眉和页脚。它将我的header.blade.php放在layouts / partials /中,然后在下一个模板中,它扩展了layouts.partials.header。它有效,但样式表和脚本在内容之后加载。如何以一种快速且正确顺序运行的方式进行组织?

header.blade.php

@section('header')
<!DOCTYPE html>
<html>
<head>
<title>
@section('title')
@show
</title>  
<script type="text/javascript" src="{{ asset('bower/jquery/dist/jquery.min.js') }}"></script>
<link href="{{ asset('bower/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('bower/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bower/ckeditor/ckeditor.js') }}"></script>
<link href="{{ asset('css/default.css') }}" rel="stylesheet"> 
</head>
<body>
@show

@section('footer')
    @section('scripts')
    @show
</body>
</html>
@show

master.blade.php

@extends('layouts.partials.header')
@yield('header')

    <div class="container">

        @section('topNav')
            <div class="row center-block text-center indexWrapper">
                <div class="indexNav">
                    <ul class="text-right">
                        <li><a href="{{URL::to('people')}}">People</a></li>
                        <li><a href="{{URL::to('bulletin')}}">Bulletin</a></li>
                        <li><a href="{{URL::to('current')}}">Current</a></li>
                        <li><a href="{{URL::to('finished')}}">Finished</a></li>
                    </ul>
                </div>
                <div class="indexHeading">
                    <h1 class="indexH1">
                        @section('navTitle')
                        @show
                    </h1>
                </div>
                <div class="clearfix"></div>
            </div>
        @show

        @yield('content')

        <div class="center-block login">
            @yield('login')
        </div>

    </div>

    @section('scripts')
    @show

</body>
</html>

home.blade.php

@extends('layouts.master')

    @section('title')
    @parent
        ::Home
    @stop

    @section('navTitle')
    @parent
        Mumble
    @stop

    @section('login')

            @if (Auth::check()) 
                <div class="col-md-12 panel panel-default">
                    <div class="panel-body text-center">
                        <h4>Welcome back  <em>{{ Auth::user()->name }}</em></h4>
                    </div>
                </div>

                <div class="text-center">
                    <a href="logout" class="btn btn-warning">Logout</a>
                </div>
            @else

                @if($error) 
                    <div class="alert alert-danger">
                        {{ $error }}
                    </div>
                @endif

                @if($errors->first('email'))
                    <div class="alert alert-warning">
                        {{ $errors->first('email') }}
                    </div>
                @endif
                @if($errors->first('password'))
                    <div class="alert alert-warning">
                        {{ $errors->first('password') }}
                    </div>
                @endif
                {{ Form::open(array('url' => '')) }}
                    <div class="form-group">
                        {{Form::label('email', 'Email')}}
                        {{Form::text('email', Input::old('email'),array('class'=>'form-control','placeholder'=>'enter email'))}}
                    </div>
                    <div class="form-group">
                        {{Form::label('password', 'Password')}}
                        {{Form::password('password',array('class'=>'form-control','placeholder'=>'enter password'))}}
                    </div>
                    <div class="form-group">

                        {{ Form::checkbox('remember','remember') }}  
                        <span style="margin-left:5px;">Remember Me</span>
                    </div>
                    <div class="text-center">
                        {{ Form::submit('Login',array('class'=>'btn btn-default')) }}
                    </div>
                {{ Form::close() }}
            @endif

    @stop

    @section('scripts')
        <script type="text/javascript">
            $(document).ready(function(){
                //$('.indexWrapper').addClass('homeCenter');
                //$('.indexWrapper').css( 'margin-top', '25%' );
            });
        </script>
    @stop

刀片中的模块化程度如何?我把它分成了太多碎片吗?当脚本处于“页脚”(在标题部分中定义,我想我应该重命名)时脚本运行缓慢,但我只是想知道是否有办法正确地执行此操作。

1 个答案:

答案 0 :(得分:1)

对于我的项目,我通常做这样的事情,效果很好。粒度确实取决于您自己的要求。

而不是使用@extends等。将您的视图设置为主布局的属性,以便在控制器中呈现它们。

<强> master.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitename | @yield('title')</title>

    {{ stylesheet() }}

</head>
<body class="{{ $authClass }}{{ isset($bodyClass) ? $bodyClass : ''  }}" role="document">

    {{ $mainNav }}

    <section id="content">

        <section id="main">
            @yield('content')
        </section>

    </section>

    <footer></footer>
    {{ script('jQuery-2-0-3.min.js') }}
    {{ script('bootstrap.js') }}
</body>
</html>

将此添加到您的基本控制器: 如果Laravel存在,它会自动调用

protected function setupLayout()
{

    $this->layout = View::make('layouts.master');

}

控制器方法(嵌套视图)

public function index()
{

    $this->layout->content = View::make('public.interior.index')
                                ->nest('content', 'components.login')
                                ->nest('sideBar', 'components.sidebars.interiorSidebar1', ['extra' => View::make('components.sidebars.extra.extra1')]);

}

索引视图 (父视图.. @section定义):

@section('content')

    <div class="row-fluid col-md-7 col-sm-12 col-md-offset-1 col-sm-offset-0">
        {{ $content }}
    </div>

    <div class="row-fluid col-md-3 col-sm-12 col-md-offset-1 col-sm-offset-0 pull-right">
        {{ $sideBar }}
    </div>

@stop

嵌套视图 (组件类型的东西。没有@section定义)

{{ Form::open(['class' => 'form-horizontal', 'role' => 'form']) }}
    <h2>User Login</h2>
    <div class="form-group">
        {{ Form::label('email', 'Email:', ['class' => 'col-sm-2 control-label']) }}
        <div class="col-sm-10">
            {{ Form::text('email', null, ['id' => 'email','class' => 'form-control']) }}
        </div>
    </div>
    <div class="form-group">
        {{ Form::label('password', 'Password:', ['class' => 'col-sm-2 control-label']) }}
        <div class="col-sm-10">
            {{ Form::text('password', null, ['class' => 'form-control']) }}
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            {{ Form::submit('Login', ['class' => 'btn btn-primary']) }}
             <a href="#" class="btn btn-default">Forgot Password</a>
        </div>
    </div>

{{ Form::close() }}

那么哦,如此神奇的部分...查看作曲家: 创建composers.php文件并将其包含以将数据绑定到某些视图

View::composer(['layouts.master'], function($view){

    if(Auth::check()){
        $authClass = 'logged-in';
    } else {
        $items          = MenuMaker::getPublic();

        $authClass = 'logged-out';

        $view->with('mainNav', View::make('components.mainNavPublic', ['items' => $items]))
                ->with('authClass', $authClass);
    }

});