l-1

PHP笔记

主页/PHP笔记/PHP问答/框架Laravel/如何在 Blade 中向部分添加内容

如何在 Blade 中向部分添加内容

Bug编译狮

Bug编译狮

在 Blade 模板引擎中，你可以通过条件语句来决定是否向某个部分添加内容。以下是一些常见的方法：

1. 使用 @if 和 @else

<div>
    @if ($condition)
        <p>This is the content that will be displayed if $condition is true.</p>
    @else
        <p>This is the content that will be displayed if $condition is false.</p>
    @endif
</div>

2. 使用 @switch 和 @case

如果你需要根据不同的值进行不同的处理，可以使用 @switch 结构。

<div>
    @switch ($variable)
        @case (1)
            <p>Value is 1</p>
            @break
        @case (2)
            <p>Value is 2</p>
            @break
        default
            <p>Default value</p>
    @endswitch
</div>

3. 使用 @unless

如果你想在 $condition 为假时显示某些内容，可以使用 @unless 结构。

<div>
    @unless ($condition)
        <p>This is the content that will be displayed if $condition is false.</p>
    @endunless
</div>

示例代码

假设我们有一个简单的博客应用，我们想要根据文章的分类（例如“技术”、“生活”）来决定是否显示特定的侧边栏内容。

控制器代码

public function show($id)
{
    $article = Article::find($id);
    return view('articles.show', compact('article'));
}

Blade 模板代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $article->title }}</title>
</head>
<body>
    <h1>{{ $article->title }}</h1>

    <div class="content">
        {{ $article->body }}
    </div>

    <div class="sidebar">
        @if ($article->category == 'technology')
            <p>This is a technology article.</p>
        @elseif ($article->category == 'life')
            <p>This is a life article.</p>
        else
            <p>This is an other category article.</p>
        @endif
    </div>
</body>
</html>

在这个例子中，我们使用了 @if、@elseif 和 @else 来根据文章的分类动态地显示侧边栏的内容。

黑板Bug讲师

黑板Bug讲师

介绍

Laravel的Blade模板引擎提供了一种强大且方便的方式来构建Web应用前端的结构。它的一个特性是定义可以轻松插入到不同布局或视图中的内容块。在本教程中，您将学习如何高效地向Blade模板中的内容块中追加内容。

理解刀片结构和布局

在深入探讨拼接部分之前，我们先来了解一下基础知识。在Blade中，使用定义段落。@section()它们通过布局注入使用。@yield()哦，是的。@show一个典型的布局文件可能看起来像这样：

<!-- resources/views/layouts/app.blade.php -->
<html>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

一个孩子视图可能会扩展这个布局，并为内容区域定义内容：

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

@section('content')
    <!-- The post content -->
@endsection

基本的章节附加操作

在添加内容到部分时，可以使用。@parent指令。该指令将被相同名称的子视图中的内容所替换。

@section('content')
    <p>This is the original content.</p>
    @parent
    <p>This content is appended!</p>
@endsection

渲染后的HTML将会是这样的：

<div class="container">
    <p>This is the original content.</p>
    <p>This content is appended!</p>
</div>

使用Blade Stack进行追加操作。

Laravel的Blade也提供了一个称为“栈”的功能，这是一种用于从您在子模板或包含模板中推入内容的占位符堆栈。以下是如何定义一个栈的方法：

<!-- resources/views/layouts/app.blade.php -->
<body>
    @yield('content')
    @stack('scripts')
</body>

然后从子视图附加到它：

@push('scripts')
    <script>console.log('Script from child view!');</script>
@endpush

如果你想以后添加更多的脚本到栈里，只需使用另一个即可。@push指令：

@push('scripts')
    <script>alert('Another script!');</script>
@endpush

所有脚本都将按照它们被压入栈的顺序包含在内：

<body>
    <!-- Content Output -->
    <script>console.log('Script from child view!');</script>
    <script>alert('Another script!');</script>
</body>

高级追加操作与命名堆栈

为了有更多的控制权，您还可以为堆栈命名，这样可以在同一布局内管理多个堆栈。以下是使用Blade模板创建命名堆栈的方法：

@stack('scripts')
@stack('footer')

在整个申请过程中，您可以在需要时向这些命名堆栈中推入内容：

@push('scripts')
    <script>console.log('Loaded inline script.');</script>
@endpush

@push('footer')
    <p>This is custom footer content.</p>
@endpush

内容在渲染时按对应的堆栈整齐排列：

<!-- scripts stack content here -->
<script>console.log('Loaded inline script.');</script>

<!-- footer stack content here -->
<p>This is custom footer content.</p>

在包含子视图的视图中的段落添加

Blade 也允许你在视图内部包含子视图，通过使用 Blade 的功能实现。@include指令。您可以在这些子视图内通过使用相同的语法在其中添加到您的段落或堆栈上。@section哦，对了。@push指令：

@include('partials.notice')

@section('content')
    <!-- ... -->
    @parent
    <p>Extra content appended from a subview.</p>
@endsection

@push('scripts')
    <script>alert('Script from a subview.');</script>
@endpush

在你的部分：

<!-- resources/views/partials/notice.blade.php --> 
<p>Special notice: this comes from a subview.</p>

它完美地嵌入了布局的各个部分，就像它本身也是主子视图的一部分：

<div class="container">
    <!-- Original and extra content -->
    <p>Special notice: this comes from a subview.</p>
    <p>Extra content appended from a subview.</p>
</div>
<script>alert('Script from a subview.');</script>

结论。

添加到Blade片段允许您在Laravel中构建灵活且动态的布局，从而使视图管理更加容易和强大。通过利用这个功能，您可以轻松地创建具有不同布局和组件的视图。@parent指令、堆栈和结构化布局文件可以精确地注入和排列内容。利用这些技术，将显著提高Laravel应用视图的可扩展性和维护性。

长工码奴1523

长工码奴1523

在 Laravel 的 Blade 模板引擎中，你可以通过以下方式在视图文件中向部分添加内容：

  1. 创建一个新的部分（Part）： 在你的项目目录结构中创建一个名为 parts 的文件夹，并在这个文件夹中创建一个名为 my-part.blade.php 的新文件。

  2. 编辑 my-part.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', 'Laravel') }}</title>
</head>
<body>
    <div id="app">
        @section('content')
            <h1>Welcome to {{ $name }}</h1>
            <p>This is a part of the view.</p>
        @show
    </div>

    <!-- Your JavaScript code goes here -->
</body>
</html>
  1. 在其他模板文件中使用该部分： 例如，如果你有一个名为 index.blade.php 的视图文件，你可以这样引入并使用这个部分：
@push('styles')
    <!-- Your CSS styles go here -->
@endpush

@section('content')
    <!-- Your content goes here -->

    <div class="container mt-5">
        <div id="app">
            @include('parts.my-part')
        </div>
    </div>
@endsection

  1. 在视图文件中引用 part-name.blade.php： 在你的 HTML 视图文件中，可以使用 @section 或 @extends 标签来引用 part-name.blade.php 部分。例如：

    • 使用 @section 标签：

      @section('my-part-content')
 <!-- Your content for my-part goes here -->
@show

    • 使用 @extends 标签：

      @extends('part-name')
@section('my-part-content')
 <!-- Your content for my-part goes here -->
@show

这样，当用户访问具有 my-part 部分的视图时，就会看到这部分的内容。

最新更新