宁皓网 Laravel 5：模板 有大用

Blade 是 Laravel 里面用的模板引擎 .. 使用它只需要把视图的文件名上面加上一个 .blade.php 的后缀 .. 在 blade 的模板里，可以使用简洁的语法去定义布局，输出数据，去做条件的判断，循环输出内容等等 ..

我们可以定义一些主要的布局模板，你可以根据需求，去定义并且设计一些区域 .. .. 在其它的 blade 模板里面，可以去继承这些模板 .. 然后去指定布局模板里的区域里的内容 ..
来自 http://ninghao.net/video/3296#info

在 Atom 编辑器里安装一个 language blade 插件，可以高亮显示 blade 模板的语法，它还提供了一些代码片断，可以方便的去创建 blade 模板。

打开 设置 .. install ，搜索一下 language blade .. 找到这个插件以后安装一下 .. 这里我提前安装好了 ..

下面再打开一个 blade 模板 .. 后缀是 .blade.php ．．　　　这里可以选择文件的格式 .. 点击右下角这里 .. 打开以后可以搜索一下 blade .. 选择这个 blade 格式就可以高亮显示文件里面的语法了 ..

另外这个插件还提供了一些代码片断 .. 输入指令的名字 .. 按一下 tab .. 可以快速的输入 blade 的指令 ..
来自 http://ninghao.net/video/3297#info

在我们的网站里，可能大部分要显示的页面都会使用类似的布局，这样我们就可以去定义一个主布局，或者叫默认的布局模板 .. 然后其它的视图可以继承使用这些布局的模板。这样做可以减少很多重复的模板代码。

打开 resources， views 这个目录的下面去创建一个默认的布局模板 .. 可以把它放到这个 layout 目录的下面，这个目录是我们在介绍 views 的时候创建的 .. 你可以根据自己的需求去组织应用的模板文件 ..

文件的名字可以是 master.blade.php .. blade 模板引擎的文件都是用 .blade.php 结尾的 .. 在这个模板文件里 .. 添加一个基本的 html 文档的结构 ..

因为我的编辑器里安装了 emmet 插件，所以可以用一个 !　号　.. 因为现在文档的格式是 blade ，所以不能使用 tab 去展开这个缩写，在 mac 上可以使用 command + shift + e 展开这个缩写，windows 上可以自己重新定义一下这个展开缩写用的快捷键 .. 这样会得到一个基本的 html 文档的结构 ..

然后在这个 head 标签里，去链接一个 css 样式表 ..
来自 http://ninghao.net/video/3299#info

打开之前创建的这个 master.blade.php ，在这个 body 标签里，先添加一组 div .. 上面用一个 ui 还有 container 这两个 css 类 .. 它们是 semantic ui 提供的样式 .. 具体的用法可以参考宁皓网关于 semantic ui 的课程。

在这个 div 标签里面，可以显示页面的主体内容 .. 这里用一个 @yield .. 然后是区域的名字 .. 比如我们叫它 content .. 这样在继承了这个模板的子模板里面，可以定义一个 content 区域，区域里的内容会显示会被 yield 到这里，也就是显示到这里，或者插入到这里。

再找到 title 这组标签，它包装的是页面的标题，在这里我们也可以用一个 @yield .. 名字是 title .. 同样这个 title 区域里的内容可以在继承它的子模板里面提供过来 ..
来自 http://ninghao.net/video/3300#toc

下面我们可以在一个模板文件里面去继承使用一个这个 master.blade.php ... 比如打开 resources，views，view 下面的这个 list.blade.php，这个文件是我们在视图课程里创建的 .. 先删除掉这里面所有的东西 ..

在这里去继承布局，可以使用 @extends 这个指令 .. 输入一个这样的指令 .. 然后是要继承的模板的名字.. 这里就是 layout 下面的 master 这个模板文件 .. 注意这个名字里面不需要包含 .blade.php 后缀 ...

@extends('layout.master')

先保存一下这个文件 .. 然后打开 app/Http .. routes.php .. 这里 movie 这个路由用了一个叫 MovieController 的控制器 .. 再打开这个控制器 .. app/Http .. Controllers .. MovieController.php

在这个控制器的 index 方法里面，我们用了一个 view 返回了 view 目录下面的 list 这个视图 .. 就是这个 list.blade.php ..

下面我们再去访问一个 movie 这个地址 .. 打开浏览器 .. 访问一下 movie ..

在页面上没有显示什么东西 .. 再去查看一下这个页面的元素 .. 你会发现，这个页面已经用了一个基本的 html 文档的结构 .. 这里还链接了一个 css 样式表 ..

这些内容就是我们在 master.blade.php 里面定义的 .. 因为在这个页面使用的 list 这个视图里继承了 master 这个模板 ... 所以这个页面会包含这个模板里面要输出的内容 ..

来自 http://ninghao.net/video/3301

在 master 里面，使用了两个 yield ，意思是在这里要显示对应名字的区域里的内容 .. 这些内容可以在继承它的子模板里提供给给它 ...

打开 list.blade.php，在这个视图里继承了 master 模板 .. 定义区域可以使用 @section .. 在 master 的 title 这个区域里，只需要提供一个标题内容 .. 所以这里直接用一个 @section .. 第一个参数是区域的名字，这里就是 title .. 第二个参数是这个区域里的内容 ..

在使用这个视图的控制器里给这个视图传递了一个 title 数据 .. 可以使用它作为这个 title 区域里的内容 .. $title .. 保存 .. 再回到浏览器 .. 访问一下 movie 这个地址 ..

注意现在页面的标题 .. 会变成传递给 list 这个视图的 title 这个数据的值 .. 因为我们把这个数据放到了模板的 title 这个区域里 .. 在 master 模板里定义了这个区域，就是在 title 这个标签里面。

回到编辑器 .. 下面我们再去添加一个 content 区域 .. 同样使用 @section 指定 .. 这里我们再用一个 @endsection 结束一下 .. 然后再指定一下这个区域的名字 .. 这里就是 content ..

在这个 @section 还有 @endsection 之间就是这个 content 区域里要显示的内容 .. 使用一组 h1 标签 .. 要输出路由或者控制器传递过来的数据，可以使用两组花括号 .. 它里面就是数据的名字 .. 这里还是用一个 title ..

在它下面再用一个 p 标签 .. 里面随便添加点文字 ... 保存 .. 回到浏览器 .. 刷新一下 .. 在页面上会显示 content 这个区域里的内容 .. 一个大标题，还有一段文字 ..

注意这个内容的周围，用了一组还 ui 还有 container 类的 div 包装了一下 .. 这些就是在 master 模板里面提供的东西 ..

来自  http://ninghao.net/video/3302#info

如果在模板里面定义的要显示内容的区域里，需要一些默认的内容 .. 这些内容可以在继承它的子模板里覆盖掉，也可以在这些默认内容的基础上提供一些额外的内容。可以使用 @section 这个指令去定义这样的区域 ..

先打开 master 这个模板 .. 我们可以在这个 head 标签之间，使用 @section 去定义一个区域 .. @section .. 名字是 head .. 结束的地方用一个 @show ..

然后把下面这个链接样式表的代码放到这个区域里面 .. 这样这个链接样式表用的代码就是这个 head 区域里的默认的内容 .. 在继承它的子模板里面，可以覆盖掉这个链接的样式表，也可以去扩展它的内容 ..

再回到 list.blade.php .. 使用 @section 定义一个 head 区域 .. 这个区域是用 @endsection 结尾的 .. 在它的里面，用一个 link 去链接一个样式表 .. 比如 movie-page.css ..

保存 .. 回到浏览器 .. 访问一下 movie 这个地址 .. 查看一下页面元素 .. 注意这里链接的样式表是 movie-page.css .. 覆盖掉了 master 的 head 区域里面的内容 ..

回到编辑器 .. 如果想要保留父模板区域里的默认的内容，可以使用一个 @parent 指令 .. 保存 .. 再回到浏览器试一下 .. 刷新 ..

现在，这个页面的 head 里面， 链接了两个样式表，一个 semantic-ui 这个样式表，来自 master 的 head 区域 .. 还有一个 movie-page.css .. 它是在 list 模板里的 head 区域里要输出的东西 ...
来自 http://ninghao.net/video/3303#info

在 blade 模板引擎中输出传递给视图的数据，用的就是两组花括号，里面加上数据的名字 .. 比如在 list.blade.php 里面，就使用了这个方法 ，输出了名字是 $title 的数据 .. 这个数据从使用这个视图的 MovieController 控制器里传递给它的 ..

就是这个名字是 title 的数据 .. 它的对应的值是 电影列表 .. 有些 JavaScript 框架可能也会使用这样的形式 .. 如果你不想让 Laravel 处理输出两组花括号里的东西 .. 可以在它前面添加一个 @ 符号 ..

现在这里会直接输出 {{ $title }} ... 现在，其它的 JavaScript 框架就可以往里面填充数据了 ..

在输出数据以前，可以判断数据有没有值，如果有就输出，没有就输出一个默认的值 .. 像这样 .. 在这个 $title 后面添加一个 or .. 然后是默认输出的东西 .. 输入一个宁皓网 ..

现在这个 title 有值，所以会输出它的值 .. 这里我们在 MovieController 里面去掉传递的 title 这个数据 .. 现在这个标题就会是默认的 宁皓网 .. 恢复一下 ..

默认在这两组花括号里输出的东西，会交给 PHP 的 htmlentities 处理一下 .. 比如我们在传递这个 title 的时候，在它周围添加一组 span 标签 ..

保存 .. 这里会在页面上输出 html 标签的内容 .. 其实这些 html 里的特殊标记都被转换了一下 .. 显示网页源代码 .. 在这里你会看到转换之后的内容 .. 这样做是为了防止 XSS 的攻击 ..

在一些特别的情况下，你可能想要输出数据的原始内容，就是不去转换数据里的 html 标记 .. 这样做会比较危险 .. 如果你确定要这样的话，也可以 ..

这里使用一组花括号 .. 然后在开始 . . 还有结束的地方用两个 ! 号 .. 保存 ..

现在你会发现 .. 在这个 h1 标签里面，包装了一组 span 标签 .. 这组 span 标签这次并没有被转换 ..
来自 http://ninghao.net/video/3305#info

Blade 模板引擎里提供了一些方便的条件控制指令 .. 你可以使用它们去判断一些条件，根据这些条件的真假来决定显示还是隐藏某些内容。

使用一个 @if .. 结束的地方可以使用一个 @endif ... 这里可以设置一下要判断的条件，如果条件是真的，就会显示在 if 还有 endif 之间的东西 .. 在判断的条件这里，我们先直接使用一个 true ..

保存 .. 访问一下 movie 这个地址 .. 这里会显示在 if 还有 endif 之间的内容 .. 因为要判断的条件返回的是 true .. 如果还有其它要判断的条件，可以使用一个 @elseif .. 把要判断的条件放到这里，还是直接用一个 true .. 在这个 elseif 还有 endif 之间再添加点内容 ..

然后把上面的 if 条件设置成 false .. 保存 ... 现在就会显示在 elseif 还有 endif 之间的东西 .. 因为第一个 if 的条件返回的是 false .. 后面的 elseif 的条件返回的是 true ...

我们也可以添加一个默认的东西 .. 用的是 @else 这个指令 .. 再添加点内容 .. . 如果前面要判断的条件全是假的，就会显示这里的内容 ..

把 elseif 条件设置成 false　... 保存 .. 现在会显示 else 还有 endif 之间的内容 .. 因为前面要判断的条件全是假的 ..

还有一个 @unless 指令 .. 先去掉这里用的 if .. 再用一个 @unless .. 结束的地方用一个 @endunless .. 在这个 unless 后面，可以设置要判断的条件 .. 如果这个条件返回的是 false ，就会去显示在 unless 还有 endunless 之间的内容 ..

来自 http://ninghao.net/video/3307#info

Blade 里面也提供了一些循环的指令，for ，foreach，while 等等 .. 这些跟 PHP 本身的循环功能是一样的 .. 下面我们可以简单的用一个例子看一下 foreach 这个循环指令 ..

先打开这个 MovieController 控制器 .. 在这个 index 方法里，定义一个变量 .. 名字是 movie_list .. 它的值是一个数组 .. 数组里面有一些电影标题 ...

然后把这个数据传递给它的视图 .. 添加一个 movie_list .. 对应的值就是上面定义的 movie_list .. 再回到 list 这个视图 ..

在这里我们可以使用 foreach 这个循环指令循环的输出传递过来的 movie_list 这个数据 .. 用一个 @foreach .. 结束的地方是 @endforeach ..

循环的是 movie_list 这个数据 .. as 后面是每次循环的时候当前项目的名字 .. 这里我们可以叫它 movie .. 每次循环要做的事放到这个 foreach 还有 endforeach 之间 .. 用两组花括号 .. 输出每次循环的时候得到的这个 movie ..

在它周围添加一个 li 标签 .. 保存 .. 到浏览器上看一下 .. 这里会输出传递给 list 视图的 movie_list 这个数据里的所有的项目 .. 每个项目的还用了一个 li 标签包装了一下 ..

来自 http://ninghao.net/video/3308

在一个视图里，我们可以使用 @include 这个指令，去嵌入其它的视图。视图里的数据，在被嵌入的视图上也是可用的。打开 master.blade.php ..

现在我想把这个视图里 head 标签里的东西单独拿出来放到一个视图里面 .. 选中这块儿内容 .. 剪切一下 .. 然后去创建一个新的视图 .. 把它放到 resources .. views ... layout 这个目录的下面.. 名字可以是 head.blade.php ..

把刚才粘贴的代码放到这里 .. 保存一下 .. 再回到 master.blade.php .. 在 head 标签里面 .. 用一个 @include .. 然后把要嵌入的视图的名字交给这个指令 .. 这里就是 layout 下面的 head 这个视图 ..

如果有其它的要传递给这个视图的数据，你可以把它放到 include 指令的第二个参数里面 .. 可以用一个数组 .. 里面的项目就是传递的数据 .. 先是数据的名字 .. 对应的是具体的数据 .. 这里我们不需要传递额外的数据 .. 去掉它 .. 然后 .. 保存

回到浏览器 .. 刷新 .. 这个页面用了 list 视图，在它里面继承了 master .. 在 master 这个视图里嵌入了 head 视图 .. 这个 head 标签包装的就是 head 视图里的东西 ...

来自 http://ninghao.net/video/3309#info

使用 @each 这个指令，可以把循环还有嵌入的功能合并到一块儿。 打开 list.blade.php ，在这里之前我们用了一个 foreach 指令循环输出了传递过来的 movie_list 里的项目 .. 这里我们使用 @each 去改造一下 .. 删除掉这个 foreach 指令 .. 然后先去创建一个新的视图 ..

把它放到 resources ，views，view 这个目录的下面 .. 名字是 li.blade.php .. 里面先用一组 li 标签 .. 在它里面输出一个 item ...

回到 list.blade.php .. 使用一个 @each .. 第一个参数是循环的时候，每个项目要使用的一个模板 .. 这里就是刚才我们创建的 view 下面的 li . . 然后是要循环处理的数据 .. $movie_list .. 接着是每个项目的名字 .. 这里我们设置成 item ... 第四个参数是没有要显示的内容的时候要使用一个视图 .. 把它设置成 layout.empty

再去创建这个视图 .. 放到视图目录里的 layout 这个目录的下面 .. 名字是 empty.blade.php .. 里面用一组 p 标签 .. 文字是，没有可以显示的内容 ！

保存 .. 到浏览器上再去试一下 .. 刷新 .. 页面上仍然可以正常显示传递给 list 视图的 movie_list 这个数据里的所有的项目 ..

回到编辑器 .. 打开 MovieController .. 把这个 movie_list 设置成一个空白的数组 .. 再打开 list.blade.php .. 因为有缓存，所以我们修改一个地方 .. 保存一下 .. 回到浏览器 .. 刷新 .. 再回到编辑器 .. 改回来 .. 保存 .. 再回到浏览器 .. 刷新 ..

这次 movie_list 里没有东西，所以这里会显示 layout 下面的 empty 这个视图里的东西 ...

来自 http://ninghao.net/video/3310