PHP 模板引擎----Blade（.blade.php文件）模板继承 @extends)使用详解

最新推荐文章于 2025-03-11 22:34:36 发布

爱倒腾

最新推荐文章于 2025-03-11 22:34:36 发布

阅读量1.3k

点赞数

分类专栏： PHP HTML

本文链接：https://blog.csdn.net/weixin_44514665/article/details/103627860

版权

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

PHP

2 篇文章

订阅专栏

本文详细解析了Laravel的Blade模板引擎，特别是模板继承的概念。通过定义布局（父视图）和扩展布局（子视图），演示了如何避免重复代码并创建高效页面结构。使用@extend指令子视图继承父视图布局，@section和@section('content')用于注入和展示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Blade模板基本使用之模板继承 @extends

官方简介

Blade 是 Laravel 提供的一个简单而又强大的模板引擎。和其他流行的 PHP 模板引擎不同，Blade 并不限制你在视图中使用原生 PHP 代码。所有 Blade 视图文件都将被编译成原生的 PHP 代码并缓存起来，除非它被修改，否则不会重新编译。

这表示使用Blade基本上不会给你的应用增加任何负担。

Blade 的模板视图文件使用 .blade.php 作为文件扩展名，存放在 resources/views 目录。

Blade 的两个主要优点是 模板继承和区块。

Blade模板继承

在实际开发中，因为大多数 web 应用会在不同的页面中使用相同的布局方式，就会有重复开发一些相同的东西。因此可以很方便地定义单个 Blade 布局视图。所以可以使用 模板继承 来解决这个问题。

话不多说，以下是一个简单的例子：
首先是子页面继承父页面的布局方式（就是在子页面中继承父页面的信息）

1.定义布局（父视图）

在父页面中的布局内容，此处以 demo.blade.php 为父页面例

<!-- 保存在 resources/views/components/demo.blade.php 文件中 -->
<html>
    <head>
        <title>App Name - @yield('title')</title>
        <style>
        *{
            font-size: 14px;
        }
        </style>
    </head>
    <body>
        @section('sidebar')
            这是父元素的 sidebar ***
        @show

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

以上是父页面的页面布局，文件内包含有典型的HTML语法。其中

@yield 指令是用来显示指定部分的内容；

@section 指令定义了视图的一部分布局内容。
指令的参数与子视图相对应，就会显示匹配的内容。

以上，我们就已经完成了一个简单的布局内容，接下来，我们定义一个继承此布局的子页面。

2. 扩展布局（子视图）

定义子视图时，使用Blade 的 @extends 指令定子视图要继承的父视图；使用 Blade 布局的视图的 @section 指令向布局片段注入内容，注入的这些片段的内容将由布局中的 @yield 指令控制显示：

{{-- 注释部分 --}}
{{-- 保存在 resources/views/index.blade.php 文件中  --}}
{{-- 在子页面 index.blade.php引入父页面demo.blade.php） --}}

@extends('components.demo')

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

@section('sidebar')
    @parent
    <p>+我是子页面的一段内容要添加在父页面的sidebar里面</p>
@endsection

@section('content')
    <p>+这是 子页面 的 content的内容</p>
@endsection

以上涉及到的指令总结：( 划重点)


@extends('components.demo')
继承resources/views/components/demo.blade.php 的文件内容

@section('title', 'Page Title')
 匹配父视图的的title属性，然后替换内容显示为 Page Title；
 如果没有传第二个参数，就以 @endsection 结束，之间的内容为匹配要显示的内容

@endsection 指令仅定义了一个片段， 
@show 则在定义的同时 立即 yield 这个片段。如果不加 @show，在页面中不会显示@section指令的内容

@parent 指令向布局的 sidebar 追加（而非覆盖）内容，
@parent 指令将被布局中的内容替换（不会显示指令，只会内容）

@yield  指令还接受一个默认值作为第二个参数。
如果被 「yield」的片段未定义，则该默认值就会被渲染。
例如： @yield('content', 'my_test') // 默认显示内容 my_test