laravel之模板使用
定義佈局的模板,供繼承
resource/views/layout/app.blade.php
<!DOCTYPE html>
<html lang="zh">
<head>
<base href="{{ url('/') }}" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
@section('head-meta')
@show
<title>@yield('title', trans('app.siteTitle'))</title>
@section('lib_styles')
<link href="{{ asset('/static/libs/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
@show
@section('stylesheets')
<link href="{{ asset('/static/css/base.css') }}" rel="stylesheet" />
@show
<script type="text/javascript">
var require = {
urlArgs: "_v={{ config('config.app_version', '0.0.1') }}"
};
</script>
@section('scripts')
<script type="text/javascript" src="{{ asset('static/libs/jquery/jquery-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('static/libs/bootstrap/js/bootstrap.min.js') }}"></script>
@show
</head>
<body>
@if (Auth::check())
<div>
<a href="{{ url('/auth/logout') }}">logout</a>
</div>
@endif
<div id="main-body">
@yield('content')
</div>
@section('footer')
<footer>
<p class="text-center copyright">© {{ date('Y') }}</p>
</footer>
@show
</body>
</html>
這裡以登入和註冊頁面為例子:
resource/views/auth/login.blade.php
登入頁面:
@extends('layout.app')
@section('title', '登入')
@section('stylesheets')
@parent
<link href="{{ asset('/static/css/auth/login.css') }}" rel="stylesheet" />
@endsection
@section('navbar')
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="">
<div class="page-header text-center">
<h1>Archist 管理系統</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div id="login-panel" class="panel panel-primary">
<div class="panel-heading">login</div>
<div class="panel-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form class="form-horizontal" role="form" method="POST" action="{{ url('/auth/login') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="col-sm-4 control-label">email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">password</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> remember
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-4">
<button type="submit" class="btn btn-primary">login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
註冊頁面:
resource/views/auth/register.blade.php
@extends('layout.app')
@section('title', '登入')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Register</div>
<div class="panel-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form class="form-horizontal" role="form" method="POST" action="/auth/register">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="col-md-4 control-label">UserName</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" value="{{ old('name') }}">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection