LaravelBlade模板怎么用_LaravelBlade模板语法继承及组件使用指南

Laravel Blade通过模板继承和组件系统提升前端开发效率。首先定义包含@yield和@section的布局文件,子页面用@extends继承并填充内容;其次利用Artisan命令创建组件,通过语法复用UI元素,支持默认插槽与命名插槽,实现灵活内容分发,构建可维护的页面结构。

Laravel Blade 是 Laravel 框架自带的轻量级、强大且直观的模板引擎。它允许开发者通过简洁的语法编写 PHP 模板,同时支持模板继承、组件复用、条件判断、循环等功能,极大提升前端开发效率。本文将详细介绍 Blade 的核心用法,重点讲解模板继承与组件使用方法。

模板继承:布局与内容占位

Blade 的模板继承机制允许你定义一个基础布局文件(layout),然后在其他页面中继承并填充特定区域。

1. 定义主布局(layout)
创建一个通用布局文件,例如 resources/views/layouts/app.blade.php




    
    @yield('title', '默认标题')
    


    
        @section('sidebar')
            这是默认侧边栏
        @show

        
@yield('content')

说明:

  • @yield('title'):定义可被子页面替换的内容区域,第二个参数为默认值。
  • @section ... @endsection@section ... @show:定义可重写或追加的区块。@show 表示在父模板中也输出内容。

2. 继承布局并填充内容
在子页面中使用 @extends 继承布局,再用 @section 填充内容。


@extends('layouts.app')

@section('title', '首页 - 我的网站')

@section('sidebar')
    
        

首页专属侧边栏

这里是首页的导航

@endsection @section('content')

欢迎来到首页

这是主页的主要内容。

@endsection

组件(Components):构建可复用 UI 元素

Blade 组件是 Laravel 提供的一种封装 HTML 结构和逻辑的方式,适合按钮、卡片、模态框等重复使用的界面元素。

1. 创建组件
使用 Artisan 命令生成组件:

php artisan make:component Alert

这会生成:

  • app/View/Components/Alert.php(组件类)
  • resources/views/components/alert.blade.php(视图文件)

2. 编写组件逻辑与视图

组件类(Alert.php):

```php class Alert { public $type;
public function __construct($type = 'info') 
{
    $this->type = $type;
}

public function render()
{
    return view("components.alert");
}

}

组件视图(alert.blade.php):

```blade {{ $slot }}

3. 在页面中使用组件


    操作成功!数据已保存。



    这是一条普通提示信息。

说明:

  • 是组件调用语法。
  • $slot 代表组件标签之间的内容。
  • 属性如 type 会自动传递给组件类的构造函数。

插槽(Slots):更灵活的内容分发

除了默认插槽,Blade 还支持命名插槽,用于多区域内容注入。

1. 组件中定义多个插槽



    
        {{ $header ?? '' }}
    
    
        {{ $slot }}
    
    @if(isset($footer))
    
        {{ $footer }}
    
    @endif

2. 使用命名插槽


    
        

卡片标题

这里是卡片主体内容。

发布时间:2025年

这样可以清晰地组织结构化内容,特别适用于复杂组件。

基本上就这些。掌握 Blade 的模板继承和组件系统后,你可以高效构建结构清晰、易于维护的 Laravel 前端页面。不复杂但容易忽略细节,建议多实践常见布局和自定义组件。