使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 视图布局篇
使用模板语言最大的好处之一就是可以创建可复用的整体布局和局部视图。
1、定义整体布局
布局本身只是包含一个或对个@yield调用（用于渲染子视图内容）的基本Blade模板。
一个基本的布局文件内容如下：
<!DOCTYPE html>
<html>
<head>
<title>The Amazing Web</title>
</head>
<body>
<header>
My Amazing Site
</header>
@yield('contents')
<footer>
<p>©2016 Awesome Co</p>
</footer>
</body>
</html>
Jigsaw开箱提供的source/_layouts目录就包含了这个基本布局视图文件。
2、继承布局
要继承一个布局，需要创建一个视图模板并通过@extends指令来指定继承哪一个布局，并使用@section指令来指定渲染哪一部分：
@extends('_layouts.master')
@section('contents')
<div>
<p>The contents of my amazing homepage.</p>
</div>
@endsection
布局和局部视图文件的引用都是通过.对目录层级进行分隔并且相对于source根目录，同时省略了.blade.php。
关于Blade布局请参考Blade官方文档。
3、局部视图
要在一个模板中引入另一个模板，使用@include指令：
<!DOCTYPE html>
<html>
<head>
<title>The Amazing Web</title>
</head>
<body>
@include('_partials.header')
@yield('contents')
@include('_partials.footer')
</body>
</html>
你可以在第二个参数中以关联数组的方式传递数据到局部视图：
<!DOCTYPE html>
<html>
<head>
<title>The Amazing Web</title>
</head>
<body>
@include('_partials.header', ['page_title' => 'My Amazing Site'])
@yield('contents')
@include('_partials.footer')
</body>
</html>
传递过去的变量就可以被有效使用：
<!-- _partials/header.blade.php -->
<header>
{{ $page_title }}
</header>
4、防止布局/局部视图被渲染
要阻止文件或文件夹被渲染，需要加上_前缀：
Jigsaw默认提供了一个 _layouts 文件夹，不过只要你使用了_前缀，就可以任意创建你所需要的文件或文件夹。
例如，如果你想要在某个地方存放所有局部视图，可以创建一个_partials目录：
由于 _partials 目录以_开头，这些文件不会在生成站点时被渲染，但是仍然可以在其他模板中通过@include指令引入。
本系列教程：
- 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 安装预览篇
- 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 环境变量篇
- 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 视图布局篇
- 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇
- 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 站点部署篇
No Comments