laravel 基础教程 —— Blade 模板引擎

Blade 模板引擎

简介

Blade 是 laravel 提供的一个简单强大的模板引擎。它不像其他流行的 PHP 模板引擎那样限制你在视图中使用原生的 PHP 代码,事实上它就是把 Blade 视图编译成原生的 PHP 代码并缓存起来。缓存会在 Blade 视图改变时而改变,这意味着 Blade 并没有给你的应用添加编译的负担。Blade 视图文件使用 .blade.php 后缀,一般情况下都被存储在 resources/views 目录。

模板继承

定义布局

Blade 带来的两个主要的福利就是模板继承和挂件。为了方便开始,我们来看一个简单的例子。首先,我们建立一个主页面布局。因为多数 web 应用是在不同的页面中使用相同的总体布局,我们可以方便的定义这个布局为单独的 Blade 视图:

<!-- Stored in resources/views/layouts/master.blade.php-->

<html>
  <head>
    <title>App Name - @yield('title')</title>
  </head>
  <body>
    @section('sidebar')
      This is the master sidebar.
    @show

    <div class="container">
      @yield('content')
    </div>
  </body>
</html>

从上面的例子你可以看到,Blade 模板文件包含了典型的 HTML 标记。你肯定注意到了 @section@yield 指令。@section 指令就如它的名字所暗示的那样定义了一个内容区块,而 @yield 指令是用来显示所提供的挂件区块所包含的内容。

现在我们已经定义好了一个基本的布局,接下来我们来构建一个子页面去继承这个布局。

扩展布局

我们可以使用 Blade 的 @extends 指令来明确的指定继承某个布局。然后使用 @section 指令将挂件中的内容挂载到布局中,在上面的例子中,挂件的内容将被挂载到布局中的 @yield 部分:

<!-- Stored in resoures/views/child.blade.php -->

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
  @parent

  <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
  <p>This is my body content.</p>
@endsection

在上面的例子作用 sidebar 挂件利用 @parent 指令来追加布局中的 sidebar 部分的内容,如果不使用则会覆盖掉布局中的这部分。@parent 指令会在视图被渲染时替换为布局中的内容。
Blade 视图可以像原生 PHP 视图一样使用全局帮助函数 view 来返回渲染后的内容:

Route::get('blade', function () {
  return view('child');
});

显示数据

你可以使用花括号 { 来在视图中显示传递到视图中的变量,例如,你定义了下面的路由:

Route::get('greeting', function () {
  return view('welcome', ['name' => 'Samantha']);
})

你可以在视图中这样来输出 name 变量的内容:

Hello, {{ $name }}

当然,你并没有被限制只允许显示传递到视图中的变量的内容。你也可以从原生 PHP 方法中返回内容。事实上,你可以在 Blade echo 声明中使用任意的 PHP 代码:

The current UNIX timestamp is {{ time() }}

注意:Blade {{}} 声明中的内容是自动通过 PHP 的 htmlentities 方法过滤的,用来防止 XSS 攻击。

Blade & JavaScript Frameworks

由于很多 JavaScript 框架都使用花括号来表明所提供的表达式应该被显示在浏览器中。所以你可以使用 @ 符号来告诉 Blade 渲染引擎你需要这个表达式原样保留:

<h1>Laravel</h1>

Hello, @{{ name }}

上面的例子中,@ 符号会在 Blade 渲染时被移除,并且 {{ name }} 表达式会被原样保留下来。

输出数据假如它存在

有时候你可能希望输出一个变量,但是你并不确定它是否已经被设置,你可以使用这个表达式:

{{ isset($name) ? $name : 'Default' }}

Blade 提供了一个便捷的方式来替换这个三元声明:

{{ $name or 'Default' }}

上面的例子中,如果变量 $name 存在,它将被输入,如果不存在,Default 会被输出。

显示未转义的数据

默认的,Blade {{}} 声明会自动的使用 PHP 的 htmlentities 方法来避免 XSS 攻击。如果你不想你的数据被转义,你可以使用下面的语法:

Hello, {!! $name !!}

注意:当你在应用中输出用户输入的数据时应该非常的谨慎,你应该总是使用 {{}} 来转义内容中任意的 HTML 实体。

控制结构

除了模板继承和数据显示,Blade 为通用的 PHP 控制结构提供了便利的简写方式,比如条件声明和循环。这些简写提供了一个干净简洁的方式来处理 PHP 的控制结构,而且还保持与 PHP 语句的相似性。

if 声明

你可以通过 @if,@elseif,@else@endif 指令来使用 if 控制结构,这些指令和 PHP 方法保持一致:

@if (count($records) === 1)
  I have one record!
@elseif (count($records) > 1)
  I have multiple records!
@else
  I don't have any records!
@endif

为了方便,Blade 也提供了 @unless 指令:

@unless (Auth::check())
  You are not signed in.
@endunless

你也可以使用 @hasSection 指令来判断提供给布局的挂件是否包含了内容:

<title>
  @hasSection('title')
    @yield('title') - App Name
  @else
    App Name
  @endif
</title>

循环

除了条件声明,Blade 也提供了一些简单指令来支持 PHP 的循环结构。这些指令方法和 PHP 语法相同:

@for ($i = 0; $i < 10; $i++)
  The current value is {{ $i }}
@endfor

@foreach ($users as $user)
  <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
  <li>{{ $user->name }}</li>
@empty
  <p>No users</p>
@endforelse

@while (true)
  <p>I'm looping forever.</p>
@endwhile

Blade 也提供了终止迭代或取消当前迭代的指令:

@foreach ($users as $user)
  @if($user->type == 1)
    @continue
  @endif

  <li>{{ $user->name }}</li>

  @if($user->number == 5)
    @break
  @endif
@endforeach

你也可以使用指令声明包含条件的方式来达到中断:

@foreach ($users as $user)
  @continue($user->type == 1)

  <li>{{ $user->name }}</li>

  @break($user->number == 5)
@endforeach

包含子视图

你可以使用 @include 指令来包含一个视图的内容,当前视图中的变量也会被共享给子视图:

<div>
  @include('shared.errors')

  <form>
  <!-- Form Contents -->
  </form>
</div>

尽管子视图会自动继承父视图中的所有数据变量,你也可以直接传递一个数组变量来添加额外的变量到子视图:

@include('view.name', ['some' => 'data'])

主要:你应该在 Blade 视图中避免使用 __DIR____FILE__ 常量,因为它们会解析为视图缓存所在的位置。

为集合渲染视图

你可以使用 Blade 的 @each 指令来在一行中合并引入多个视图:

@each('view.name', $jobs, 'job')

第一个参数是数组或集合中每个元素需要被渲染的视图名称。第二个参数是一个数组或集合,被用来提供迭代。而第三个参数是要分配给当前视图的变量名。举个例子,如果你需要遍历一个数组 jobs,通常你想要在局部渲染的视图中使用 job 作为变量来访问 job 信息。

你也可以传递第四个参数到 @each 指令。如果所提供的数组是空数组的话,该参数所提供的视图将会被引入。

@each('view.name', $jobs, 'job', 'view.empty')

注释

Blade 也允许你在视图中定义注释,但是它不会在渲染时生成 HTML 注释:

{{-- This comment will not be present in the rendered HTML --}}

Blade 允许你在已命名的堆中压入内容:

@push('scripts')
  <script src="/example.js"></script>
@endpush

你可以在你需要的时候压入相同的堆任意的次数,你需要在布局中使用 @stack 来渲染堆:

<head>
  <!-- Head Contents -->

  @stack('scripts')
</head>

服务注入

你可以使用 @inject 指令来从服务容器中取回服务,该指令的第一个参数将作为所取回服务存放的变量名,而第二个参数是你想要在服务容器中取回的类或接口名称:

@inject('metrics', 'App\Services\MetricsService')

<div>
  Monthly Revenue: {{ $metrice->monthlyRevenue() }}
</div>

扩展 Blade

Blade 允许你自定义一些指令,你可以使用 directvie 方法来注册指令。当 Blade 编译器遇到该指令时,它会自动的调用该指令注册时提供的回调函数并传递它的参数。

下面的例子创建了 @datetime($val) 指令来格式化 $val:

<?php
namespace App\Providers;

use Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
  /**
   * Perform post-registration booting of services.
   *
   * @return void
   */
   public function boot()
   {
     Blade::directive('datetime', function ($expression) {
       return "<?php echo with{$express}->format('m/d/Y H:i'); ?>";
     });
   }

   /**
    * Register bindings in the container
    *
    * @return void
    */
    public function register()
    {
      //
    }
}

上面的例子中使用了 Laravel 的 with 帮助方法,它只是简单的返回一个所提供的对象或值,并提供方便的链式调用。最终该指令生成的 PHP 代码如下:

  <?php echo with($var)->format('m/d/Y H:i'); ?>

在你更新 Blade 指令的逻辑之后,你应该删除所有已缓存的 Blade 视图,你可以使用 view:clear Artisan 命令来清除。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,475评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 一早起来,楼上楼下转了一圈,发现又是只有我跟Disney了。收拾完厨房,坐在客厅倒腾Wi-Fi--这Wi-Fi最近...
    猫果树阅读 408评论 10 1
  • 哈佛大学有一条著名的理论:“一个人的成功取决于他的业余时间。”它告诉我们,你要把你喝茶聊天睡觉休息度假休闲……总之...
    小弈阅读 342评论 0 1
  • 剪一段细碎的光阴,倚在尘世的一角,看浅浅的流云,拂过天际,听啾啾的鸟语,在窗外轻唱。午后的阳光静静地洒在书桌...
    Jabari小殪阅读 787评论 0 2