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 布局如何提升开发效率？理解其核心优势
我个人觉得，Blade 布局在提升开发效率上简直是立竿见影。想当年，没有这样的机制时，改个导航栏或者页脚，得在几十个甚至上百个 HTML 文件里挨个找、挨个改，那种痛苦现在回想起来都觉得不可思议。有了布局，这一切都变得集中且可控。
它的核心优势在于：
- 代码复用（DRY 原则）：这是最直观的。公共的头部、尾部、侧边栏，只需要写一次。这不仅仅是减少了代码量，更重要的是降低了维护成本。想象一下，如果品牌 Logo 换了，或者导航菜单多了一个选项，你只需要修改
app.blade.php这一个文件，所有页面都会同步更新。这比手动修改几十个文件要高效太多了。 - 结构一致性：一个网站的视觉和功能体验，很大程度上取决于其页面结构的一致性。Blade 布局强制你将共用元素放在统一的地方，这保证了所有页面都有一个统一的外观和导航逻辑。用户在浏览网站时，体验会更流畅，不会因为页面结构突然变化而感到困惑。
- 关注点分离 ：布局文件负责整体框架，子视图只负责填充自己的内容。这让开发者可以更专注于当前任务，而不是被整个页面的 HTML 结构所干扰。 前端 工程师可以专注于布局的搭建和公共组件的开发，后端或内容开发者则可以专注于填充
@yield('content')区域的具体业务逻辑和数据展示。这种分离让协作变得更简单，也减少了冲突。 - 易于维护和迭代：当项目需求变化时，比如要引入一个新的全局 JS 库，或者调整网站的整体响应式布局，你只需要修改布局文件。如果每个页面都有自己的完整 HTML，那修改起来简直是灾难。布局的存在，让项目在长期维护和功能迭代时，变得更加灵活和可控。
可以说，Blade 布局是现代 Web 开发中不可或缺的一部分，它把“少写代码，多做事情”的理念发挥得淋漓尽致。
在 Blade 模板中高效管理前端资源：CSS 与javaScript 的最佳实践
管理 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：
- 全局 JS：像 jquery、vue.js、react 等框架，或者一些网站通用的工具函数库，通常放在
<body>标签的 结束前。这样做可以确保 HTML 内容已经加载完毕，避免 JS 阻塞页面渲染。<!-- app.blade.php --> <body> …… <script src="{{asset('js/app.js') }}"></script> @stack('scripts') {{-- 在这里放置，确保页面内容已加载 --}} </body> - 页面 / 模块特定 JS：同 CSS 一样，对于只在特定页面运行的 JS 代码或库，使用
@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压入。 - CSS 放头部，JS 放尾部 ：这是 Web 性能优化 的基本原则。CSS 在头部能尽快渲染页面样式，JS 在尾部能避免阻塞页面内容显示。
- 利用
asset()辅助函数：它能正确生成资源文件的 URL，尤其是在项目部署到子目录时非常有用。 - 版本控制 / 缓存清除 ：在
webpack.mix.js或其他构建工具中，给资源文件添加哈希值（如app.css?id=abcdef），确保用户总能加载到最新版本。Laravel Mix 就能很好地处理这些。
超越基础继承：Blade 组件与局部视图的高级复用策略
除了基础的 @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 中文网其它相关文章！
