l-1

PHP笔记

主页/PHP笔记/PHP问答/框架Laravel/Laravel：如何使用 Blade 构建布局

Laravel：如何使用 Blade 构建布局

Bug编译狮

Bug编译狮

Laravel 是一个流行的 PHP 框架，它提供了强大的功能来构建用户界面。其中，Blade 是一个用于生成 HTML 的模板引擎，使得开发者可以更方便地创建和维护复杂的网页布局。

如何使用 Blade 构建布局

  1. 安装 Laravel（如果还没有安装）：

    composer create-project --prefer-dist laravel/laravel my-laravel-app
cd my-laravel-app

  2. 配置 Blade： 在 config/app.php 文件中找到 view composers 配置项，并添加自定义的视图编译器。

    'view composers' => [
   // 默认视图编译器
   IlluminateSupportFacadesView::composer('*', function ($view) {
       $view->with('menu', AppModelsMenu::all());
   });
],

  3. 创建布局文件： 在 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>
   <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
   @include('partials.header')
   <div class="container">
       @yield('content')
   </div>
   @include('partials.footer')
</body>
</html>

  4. 创建子视图文件： 在 resources/views/partials 目录下创建一些子视图文件，例如 header.blade.php 和 footer.blade.php。

    <!-- resources/views/partials/header.blade.php -->
<nav>
   <ul>
       <li><a href="/">Home</a></li>
       <li><a href="/about">About</a></li>
   </ul>
</nav>
    <!-- resources/views/partials/footer.blade.php -->
<footer>
   &copy; {{ date('Y') }} - My Laravel App
</footer>

  5. 在控制器中使用 Blade： 创建一个控制器并编写一个方法来渲染包含布局的视图。

    // app/Http/Controllers/HomeController.php
namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsMenu;

class HomeController extends Controller
{
   public function index()
   {
       return view('home', compact('menu'));
   }
}

  6. 路由配置： 在 routes/web.php 中配置路由，指向 HomeController 的 index 方法。

    // routes/web.php
use AppHttpControllersHomeController;

Route::get('/', [HomeController::class, 'index']);

  7. 访问主页： 打开浏览器，访问 http://localhost:8000，你应该会看到包含布局的首页。

通过以上步骤，你可以使用 Blade 构建一个基本的 Laravel 网站布局。你可以根据需要进一步扩展和定制这些布局。

黑板Bug讲师

黑板Bug讲师

介绍

Laravel的Blade模板引擎提供了一种简单而强大的方法来为Web应用程序创建布局。Blade引擎能够扩展布局，包括部分视图，并在特定区域注入内容，这使得它非常适合需要维护整洁和模块化代码库的开发者。在这篇教程中，我们将一起探索Blade布局的创建过程，从基础到高级概念，同时附带示例说明。

理解刀片布局

要真正理解Blade布局的概念，首先需要了解Blade是一个在Laravel框架中使用的模板引擎，它允许开发人员通过简单的占位符和指令来构建动态的HTML模板，从而实现最小化操作。在Blade中，“布局”（layout）是指一个主页面，可以被其他视图扩展以创建应用程序中的统一外观和感觉。

让我们先创建一个基本的Blade布局：

<!-- resources/views/layouts/app.blade.php -->
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <!-- Add your JavaScript files here -->

    <!-- Styles -->
    <!-- Add your CSS files here -->
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
</body>
</html>

这个布局定义了一个包含脚本和样式表的基本HTML文档，你可以根据需要填充这些部分。@yield指令则是在子视图的内容会被“注入”到此处的地方。

扩展刀片布局

现在，让我们创建一个视图来扩展我们的应用程序布局：

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

@section('content')
    <h1>Welcome to my Laravel app!</h1>
@endsection

当“欢迎”视图渲染时，位于@section(‘content’)中的内容会被放置到布局文件的@yield(‘content’)区域。

包括部分

片段（partials）是可重用的HTML块，可以包含在其他Blade视图中。让我们创建一个导航栏片段：

<!-- resources/views/partials/nav.blade.php -->
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <!-- Add other nav items here -->
    </ul>
</nav>

现在，我们将这部分包含在布局中：

<!-- resources/views/layouts/app.blade.php (updated) -->
<body>
    @include('partials.nav')
    <!-- rest of the layout -->
</body>

高级剑术技巧

随着应用程序变得越来越复杂，您可能需要使用高级技术来管理布局。以下是几个先进的Blade功能：

堆栈（Stack）

堆栈允许你在子视图中从命名的堆栈中推入，这些堆栈可以在布局中渲染。这对于需要在body标签末尾包含的脚本特别有用。

<!-- resources/views/layouts/app.blade.php -->
<!-- rest of the layout -->
@stack('scripts')

在子视图中，使用@push指令：

<!-- resources/views/welcome.blade.php (example) -->
@push('scripts')
<script>
    // Some script that will be rendered at the end
</script>
@endpush

组件

Laravel 7 及后续版本引入了 Blade 组件，与部分相似但功能更强大，如提供数据绑定：

<x-alert type="error" :message="$message" />

结论。

在本帖中，您已学习了构建和扩展Blade布局的基础知识、处理部分、使用堆栈来执行脚本以及利用Blade组件在Laravel中的使用方法。通过掌握Blade的力量，您可以创建高效且易于维护的模板，从而增强您的Web应用程序结构的整体简洁性和优雅性。

长工码奴1523

长工码奴1523

在 Laravel 中构建布局非常简单，你可以使用 Blade 模板引擎来实现。以下是如何使用 Blade 构建基本布局的示例：

1. 创建一个新的 Laravel 应用

首先，你需要创建一个新的 Laravel 应用并配置好数据库和环境。

composer create-project --prefer-dist laravel/laravel my-app
cd my-app

2. 创建一个名为 resources/views/layouts 的文件夹

如果你还没有这个文件夹，可以创建它：

mkdir resources/views/layouts

3. 在 resources/views/layouts 文件夹下创建一个名为 base.blade.php 的文件

在这个文件中，我们将定义一些基础的布局组件。

<?php

namespace AppProviders;

use IlluminateSupportFacadesView;
use IlluminateViewComponentProvider;

class LayoutServiceProvider extends ServiceProvider
{
    public function register()
    {
        View::composer('*', function ($view) {
            $view->with('title', 'Title of the page');
            $view->with('description', 'Description of the page');
        });
    }
}

4. 运行 Laravel 命令以应用新的布局

打开终端，然后运行 php artisan view:clear 来清除默认的视图，然后运行 php artisan serve 启动服务器。

5. 使用 Blade 编辑器编辑页面

现在，你可以通过在页面上使用 <head> 标签中的 title 和 meta 标签来添加标题和元信息。

例如，如果你想在一个新创建的 articles/new.blade.php 页面中添加一个标题和元信息，可以在该页面的顶部添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 添加你的标题 -->
    <title>New Article</title>

    <!-- 配置 meta 描述 -->
    <meta name="description" content="A new article on our blog">

    <!-- 添加其他需要设置的元信息 -->
    <meta property="og:title" content="New Article"/>
    <meta property="og:description" content="A new article on our blog"/>

    <!-- 其他元信息如 twitter:title 等等 -->
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

这样，当用户访问你的新文章页面时，他们将看到预定义的标题和元信息。

以上就是在 Laravel 中使用 Blade 构建布局的基本方法。可以根据需要自定义布局和样式。

最新更新