Laravel Blade通过@extends、@section和@yield实现布局继承与内容填充，结合@push和@stack管理资源，提升代码复用性、结构一致性及维护效率，同时利用@include和@component实现高级组件化复用。
Laravel Blade通过@extends指令继承，并用@section和@yield定义可填充区域来实现布局的创建和复用，极大地简化了前端视图的维护，确保了页面结构的一致性，同时也提升了开发效率。
创建和继承Blade布局，核心在于定义一个基础的布局文件，然后让其他视图文件去扩展它。这就像盖房子先打好地基和框架，再往里面添砖加瓦。
首先，你需要一个主布局文件，通常放在resources/views/layouts目录下，比如app.blade.php。这个文件会包含所有页面共有的HTML结构，比如<html>、<head>、<body>标签，以及导航栏、页脚等。
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', '我的应用')</title>
<!-- 这里可以放全局的CSS文件 -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@stack('styles') {{-- 用于子视图添加特定CSS --}}
</head>
<body>
<header>
<nav>
<!-- 导航栏内容 -->
<a href="/">首页</a>
<a href="/about">关于我们</a>
</nav>
</header>
<main>
@yield('content') {{-- 这是页面主体内容区域 --}}
</main>
<footer>
<p>© {{ date('Y') }} 我的公司. All rights reserved.</p>
</footer>
<!-- 这里可以放全局的JS文件 -->
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts') {{-- 用于子视图添加特定JS --}}
</body>
</html>在这个主布局文件中，@yield('title', '我的应用')定义了一个名为title的占位符，如果子视图没有提供title，就默认显示“我的应用”。@yield('content')则是核心内容区域的占位符。@stack('styles')和@stack('scripts')是更灵活的占位符，允许子视图“压入”多个内容块。
接着，创建一个子视图文件，比如resources/views/posts/index.blade.php，来继承这个布局。
<!-- resources/views/posts/index.blade.php -->
@extends('layouts.app') {{-- 声明继承 layouts/app.blade.php 布局 --}}
@section('title', '文章列表') {{-- 填充 title 占位符 --}}
@section('content') {{-- 填充 content 占位符 --}}
<h1>所有文章</h1>
<p>这里是文章列表的详细内容。</p>
<ul>
<li>文章一</li>
<li>文章二</li>
<li>文章三</li>
</ul>
@endsection
@push('styles') {{-- 向 styles 栈压入特定CSS --}}
<link rel="stylesheet" href="{{ asset('css/posts.css') }}">
@endpush
@push('scripts') {{-- 向 scripts 栈压入特定JS --}}
<script>
console.log('文章列表页面特有的JS逻辑。');
</script>
@endpush这里，@extends('layouts.app')是关键，它告诉Blade这个视图要使用layouts/app.blade.php作为它的父布局。@section('title', '文章列表')和@section('content')则分别填充了父布局中对应的@yield区域。而@push('styles')和@push('scripts')则会将内容追加到父布局中对应的@stack区域。
这样一来，所有使用layouts.app布局的页面，都会拥有相同的导航和页脚，而每个页面只需要关注自己的独特内容，大大减少了重复代码。
我个人觉得，Blade布局在提升开发效率上简直是立竿见影。想当年，没有这样的机制时，改个导航栏或者页脚，得在几十个甚至上百个HTML文件里挨个找、挨个改，那种痛苦现在回想起来都觉得不可思议。有了布局，这一切都变得集中且可控。
它的核心优势在于：
app.blade.php这一个文件，所有页面都会同步更新。这比手动修改几十个文件要高效太多了。@yield('content')区域的具体业务逻辑和数据展示。这种分离让协作变得更简单，也减少了冲突。可以说，Blade布局是现代Web开发中不可或缺的一部分，它把“少写代码，多做事情”的理念发挥得淋漓尽致。
管理CSS和JavaScript资源，在Blade布局中确实有一些技巧，用好了能让你的页面加载更快，代码更整洁。我通常会结合@yield和@stack来处理。
对于CSS：
全局CSS：那些所有页面都需要的基础样式，比如重置样式、UI框架（如Bootstrap或Tailwind CSS的基础部分），应该直接放在主布局文件（app.blade.php）的<head>标签内。使用asset()辅助函数来引用：
<link rel="stylesheet" href="{{ asset('css/app.css') }}">页面/模块特定CSS：有些样式只在特定页面或特定功能模块中使用，比如文章详情页的特殊排版，或者某个插件的样式。这时，我会使用@stack('styles')在<head>中创建一个占位符，然后在子视图中使用@push('styles')来添加：
<!-- app.blade.php -->
<head>
...
@stack('styles')
</head>
<!-- 子视图中 -->
@push('styles')
<link rel="stylesheet" href="{{ asset('css/posts-detail.css') }}">
@endpush这样做的好处是，避免了不必要的CSS加载，只在需要时才引入。
对于JavaScript：
<body>标签的结束前。这样做可以确保HTML内容已经加载完毕，避免JS阻塞页面渲染。<!-- app.blade.php -->
<body>
...
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts') {{-- 在这里放置，确保页面内容已加载 --}}
</body>@stack('scripts')和@push('scripts')。我通常会把它们放在@stack('scripts')中，这样它们会在全局JS之后加载，确保依赖关系正确。<!-- 子视图中 -->
@push('scripts')
<script src="{{ asset('js/post-comments.js') }}"></script>
<script>
// 页面特有的内联JS
$(document).ready(function() {
console.log('评论功能已初始化。');
});
</script>
@endpush最佳实践总结：
@push压入。asset()辅助函数：它能正确生成资源文件的URL，尤其是在项目部署到子目录时非常有用。webpack.mix.js或其他构建工具中，给资源文件添加哈希值（如app.css?id=abcdef），确保用户总能加载到最新版本。Laravel Mix就能很好地处理这些。除了基础的@extends和@section，Blade还提供了更高级的复用机制，尤其是@include、@component和@slot，它们能帮助我们构建更模块化、更具维护性的前端代码。这不仅仅是代码复用，更是设计模式的体现。
1. @include：简单的局部视图复用
这是最简单的复用方式，用于引入一个不带太多逻辑、纯粹是HTML片段的视图文件。比如一个表单的某个输入框组、一个简单的警告信息或者一个社交分享按钮。
<!-- resources/views/partials/alert.blade.php -->
<div class="alert alert-{{ $type ?? 'info' }}">
{{ $message ?? '这是一个提示信息。' }}
</div>
<!-- 在其他视图中使用 -->
@include('partials.alert', ['type' => 'success', 'message' => '操作成功！'])
@include('partials.alert') {{-- 不传参数时使用默认值 --}}@include的优点是轻量级，但它会将父视图的所有变量都传递给被包含的视图，这有时会导致变量污染或意外行为。所以，我倾向于只用它来引入非常简单的、无状态的HTML片段。
2. @component 和 @slot：更强大的组件化
@component是Blade中更强大的复用机制，它允许你创建带有明确接口（通过插槽@slot）和默认内容的“组件”。这更接近现代前端框架（如Vue、React）中组件的概念。它解决了@include变量污染的问题，并且提供了更清晰的结构。
假设我们想创建一个可复用的“卡片”组件：
<!-- resources/views/components/card.blade.php -->
<div class="card">
<div class="card-header">
{{ $header ?? '默认标题' }} {{-- 命名插槽的默认值 --}}
</div>
<div class="card-body">
{{ $slot }} {{-- 匿名插槽，这是组件的主要内容 --}}
</div>
@isset($footer) {{-- 可选的命名插槽 --}}
<div class="card-footer">
{{ $footer }}
</div>
@endisset
</div>然后在其他视图中使用这个组件：
<!-- 在其他视图中使用 -->
@component('components.card')
@slot('header')
文章详情
@endslot
<p>这是文章的详细内容。</p>
<p>更多内容...</p>
@slot('footer')
发布日期：2023-10-27
@endslot
@endcomponent
{{-- 也可以这样传递额外数据，作为变量在组件内部使用 --}}
@component('components.card', ['header' => '另一个标题'])
<p>这是另一个卡片的内容。</p>
@endcomponent这里，{{ $slot }}是默认的匿名插槽，用于接收组件标签内的所有内容。@slot('header')和@slot('footer')则是命名插槽，允许你向组件的特定区域传递内容。这种方式让组件的接口非常清晰，且组件内部的变量是隔离的，不会影响外部。
何时选择哪种方式？
@include：适用于简单的、静态的HTML片段，或者那些只需要少量数据就能渲染的“局部视图”，比如一个通用的消息提示框，或者一个不带逻辑的导航链接列表。@component：适用于更复杂的、带有特定结构和逻辑的UI元素，比如各种卡片、模态框、分页器、表单元素组。当你需要一个清晰的接口来传递内容和数据，并且希望组件内部逻辑与外部隔离时，@component是更好的选择。掌握这些高级复用策略，能让你的Blade模板代码更加模块化，也更容易理解和维护。这不仅是代码层面的优化，更是架构思维上的提升。
以上就是Laravel Blade如何创建和继承布局_模板引擎布局与视图复用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
527
收藏
