剑客
关注科技互联网

使用 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 扩展包基于 Laravel Blade 模板构建静态站点 —— 视图布局篇

Jigsaw默认提供了一个 _layouts 文件夹,不过只要你使用了 _ 前缀,就可以任意创建你所需要的文件或文件夹。

例如,如果你想要在某个地方存放所有局部视图,可以创建一个 _partials 目录:

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 视图布局篇

由于 _partials 目录以 _ 开头,这些文件不会在生成站点时被渲染,但是仍然可以在其他模板中通过 @include 指令引入。

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址