主页/PHP笔记/PHP问答/框架Laravel/Laravel Blade:使用 ‘@yield’ 和 ‘@section’ 指令

Laravel Blade:使用 ‘@yield’ 和 ‘@section’ 指令

Bug编译狮

Bug编译狮

标题:Laravel Blade:使用 @yield@section 指令

在 Laravel 中,@yield@section 是两个非常有用的指令,用于组织和分发视图中的内容。它们允许你在主模板中定义占位符,并在子模板中填充这些占位符。

使用 @yield

@yield 指令用于在主模板中定义一个占位符。这个占位符可以在子模板中被填充。

示例代码:

假设我们有一个主模板 resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }}</title>
</head>
<body>
    @include('layouts.navbar')

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

    @include('layouts.footer')
</body>
</html>

在这个示例中,@yield('content') 定义了一个名为 content 的占位符。

接下来,我们创建一个子模板 resources/views/pages/home.blade.php

@extends('layouts.app')

@section('content')
    <h1>Welcome to the Home Page</h1>
    <p>This is the home page content.</p>
@endsection

在这个子模板中,@section('content') 填充了 content 占位符的内容。

使用 @section

@section 指令用于在主模板中定义一个区域,并在子模板中填充这些区域。

示例代码:

假设我们有一个主模板 resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }}</title>
</head>
<body>
    @include('layouts.navbar')

    <div class="container">
        @yield('header')
        @yield('main')
        @yield('footer')
    </div>

    @include('layouts.footer')
</body>
</html>

在这个示例中,@yield('header'), @yield('main'), 和 @yield('footer') 定义了三个区域。

接下来,我们创建一个子模板 resources/views/pages/home.blade.php

@extends('layouts.app')

@section('header')
    <h2>Welcome to the Home Page</h2>
@endsection

@section('main')
    <p>This is the main page content.</p>
@endsection

@section('footer')
    <p>Copyright © 2023 Example.com</p>
@endsection

在这个子模板中,@section('header'), @section('main'), 和 @section('footer') 分别填充了 header, main, 和 footer 区域的内容。

通过这种方式,你可以灵活地组织和分发视图中的内容,使得你的项目更加模块化和易于维护。

黑板Bug讲师

黑板Bug讲师

介绍

Laravel Blade 是 Laravel 提供的强大模板引擎,使得开发者可以以最少的精力创建视图。它提供了模板层次结构和代码重用的一系列指令。@yieldand 是“和”的意思。@section掌握这些指令对于在Laravel应用程序中编写干净、可维护的视图代码至关重要。本教程将指导您通过各种示例(从基础到高级)使用这些指令。

理解基本概念

Blade视图编译为纯PHP代码,然后进行缓存以提高性能。在深入探讨之前,请先告诉我您需要了解的具体内容或问题是什么?@yieldand 还是。@section指令如下:请稍等,我来快速概述一下。

@section 定义特定部分的内容,然后在视图中使用 @yield 直接显示这部分内容。

@yield:这是一个用于定义一个将会被@section指令的内容填充并显示的区域。它起着占位符的作用。

使用@yield设置布局时,你需要确保在各个视图文件中正确地调用这个指令来定义不同的布局或模板。这通常用于实现动态内容加载和响应式设计。请提供具体的代码示例以便进一步帮助您。

在Laravel Blade模板引擎中,最常见的用例是在视图文件(如.blade.php)中使用包含标签(@include),来导入和渲染其他视图文件的内容。例如: <!– views/layouts/header.blade.php –> <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>My Application</title> </head> <body> <header> @include(‘partials.header’) </header> <!– 其他部分 –> <footer> @include(‘partials.footer’) </footer> </body> </html> // views/partials/header.blade.php <nav> <ul> <li><a href=”/”>Home</a></li> <li><a href=”/about”>About</a></li> </ul> </nav> 在这个例子中,layouts/header.blade.php文件包含了顶部导航栏的HTML结构,而views/partials/header.blade.php文件则定义了这个导航栏的具体样式和链接文本。通过这种方式,你可以创建一个模块化的布局系统,使得整个应用的前端代码更加整洁和易于维护。@yield在布局文件中。这些是定义您网页基本结构的常见模板,如头部、底部和侧边栏等。

示例 1:基本布局

<!-- resources/views/layouts/app.blade.php -->
<!doctype html>
<html lang="en">
<head>
<!-- Meta tags, CSS links -->
</head>
<body>
<header>
  <!-- Your website header -->
</header>

<section>
  @yield('content')
</section>

<footer>
  <!-- Your website footer -->
</footer>
</body>
</html>

请稍等,我来为您翻译这段话。 对不起,您的文本似乎缺少一些关键信息,导致我无法理解您想要表达的内容或请求。如果您能提供更多上下文或者重新描述一下您的需求,我会非常乐意帮助您完成翻译工作。@yield('content')允许子视图注入其内容的指令。

使用@section提供内容

子视图扩展布局并为产出的区域提供内容。以下是我们在前面创建的布局上添加的一个简单子视图示例:

示例 2:扩展布局

<!-- resources/views/welcome.blade.php -->
@extends('layouts.app')

@section('content')
  <h1>Welcome to Our Website</h1>
  <p>Here's the introduction or any other content you would like to put here.</p>
@endsection

这个视图现在会显示定义的内容。@section('content')and也是,继续说。@endsectionWhere is the?@yield('content')指示放在布局里。

高级布局管理

Laravel允许多个部分的组合、继承和内容追加,这意味着你可以有一个子视图扩展布局并包含其自己的部分,在布局的不同部分可以被yield。

示例 3:合并部分

<!-- Add to resources/views/layouts/app.blade.php -->
@yield('sidebar')

<!-- New file: resources/views/partials/sidebar.blade.php -->
@section('sidebar')
<div>
  <!-- Sidebar content -->
</div>
@endsection

<!-- Modify resources/views/welcome.blade.php -->
@include('partials.sidebar')

该示例还包括一个侧边栏,通过添加一个新的部分并使用。@include指令:引入另一个视角,提供侧边栏内容。

嵌套和继承章节

你可以有子章节内的子章节。这尤其适用于为特定于子视图的脚本或样式注入注入代码。

示例 4:嵌套节

<!-- Modify resources/views/layouts/app.blade.php -->
@yield('styles')

<!-- Modify resources/views/welcome.blade.php -->
@section('styles')
<link rel="stylesheet" href="path/to/welcome-specific-styles.css">
@endsection

添加到部分

有时,你可能希望在布局或父视图中定义一个区域,然后在子视图中添加到它而不是完全重新定义它。要实现这一点,你可以使用@parent指令。

示例 5:追加到部分

<!-- Modify resources/views/layouts/app.blade.php -->
@section('scripts')
  <script src="path/to/default-script.js"></script>
@endsection

<!-- Modify resources/views/welcome.blade.php -->
@section('scripts')
  @parent
  <script src="path/to/welcome-specific-script.js"></script>
@endsection

请使用。@parent这意味着来自上级部分的内容应被包括,而您添加的内容将会附加到其中。

结论。

在本教程中,我们已经讲解了如何使用Laravel Blade的@yieldand 是中文中的“和”,表示并列关系。@section指令从基本布局到更高级的嵌套和继承场景。理解并有效地利用这些指令将引领您走向使您的Blade视图更加动态和组织化。

长工码奴1523

长工码奴1523

在 Laravel 5.2 及更高版本中,Blade 是一个强大的模板引擎,提供了丰富的特性来处理视图和页面逻辑。@yield@section 是两种主要的指令用于嵌套视图。

使用 @yield

@yield 指令允许你在视图内定义块(block),这些块可以被其他视图引用并执行特定的功能。它通常用于需要动态生成的内容或者跨模块操作的地方。

示例:

<div v-for="item in items">
    <h1>{{ item.title }}</h1>
    <p>{{ item.description }}</p>
</div>

@section('custom_js')
<script>
    // 在这里添加自定义 JavaScript 代码
    console.log("Custom JS");
</script>
@endsection

在这个例子中,items 是一个数组,每个元素都是一个对象,其中包含了标题和描述。通过将 {{ item.title }}{{ item.description }} 替换为 v-for 的表达式,我们可以动态渲染这些内容到页面上。同时,我们还定义了一个名为 custom_js 的区块,可以在视图之外运行一些JavaScript代码。

使用 @section

@section 指令则用于在视图中声明一个区域,该区域内的代码只会在该区域被渲染时执行。这适用于需要全局访问的数据或功能。

示例:

@section('global_data')
    {{ globalData }}
@endsection

<div v-if="globalData">
    <p>{{ globalData }}</p>
</div>

在这个例子中,我们首先在视图内部声明了 globalData。然后,我们在 <div> 标签内使用 v-if 检查条件来显示这个数据。如果 globalData 存在于视图之外,那么这部分代码不会被执行。

结论

@yield@section 都是很好的工具,帮助你创建灵活且可扩展的 Laravel 视图结构。理解它们之间的区别,并根据项目需求选择合适的方式使用它们,将使你的 Laravel 应用程序更加高效和可靠。