{"id":769,"date":"2025-06-11T23:15:26","date_gmt":"2025-06-11T15:15:26","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/php\/php-application-manual\/laravel\/769.html"},"modified":"2025-06-11T23:15:26","modified_gmt":"2025-06-11T15:15:26","slug":"laravel%ef%bc%9a%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-blade-%e6%9e%84%e5%bb%ba%e5%b8%83%e5%b1%80","status":"publish","type":"my1js","link":"https:\/\/www.zhaozhao123.cn\/php\/my1js\/769.html","title":{"rendered":"Laravel\uff1a\u5982\u4f55\u4f7f\u7528 Blade \u6784\u5efa\u5e03\u5c40"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

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

如何使用 Blade 构建布局<\/h3>\n
    \n
  1. \n

    安装 Laravel<\/strong>（如果还没有安装）：<\/p>\n

    composer create-project --prefer-dist laravel\/laravel my-laravel-app\ncd my-laravel-app<\/code><\/pre>\n<\/li>\n
  2. \n
    配置 Blade<\/strong>：\n在 config\/app.php<\/code> 文件中找到 view composers<\/code> 配置项，并添加自定义的视图编译器。<\/p>\n
    'view composers' => [\n   \/\/ 默认视图编译器\n   IlluminateSupportFacadesView::composer('*', function ($view) {\n       $view->with('menu', AppModelsMenu::all());\n   });\n],<\/code><\/pre>\n<\/li>\n
  3. \n
    创建布局文件<\/strong>：\n在 resources\/views\/layouts<\/code> 目录下创建一个新的文件 app.blade.php<\/code>，这个文件将作为所有页面的基模版。<\/p>\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n   <meta charset=\"UTF-8\">\n   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n   <title>{{ config('app.name') }}<\/title>\n   <link rel=\"stylesheet\" href=\"{{ asset('css\/app.css') }}\">\n<\/head>\n<body>\n   @include('partials.header')\n   <div class=\"container\">\n       @yield('content')\n   <\/div>\n   @include('partials.footer')\n<\/body>\n<\/html><\/code><\/pre>\n<\/li>\n
  4. \n
    创建子视图文件<\/strong>：\n在 resources\/views\/partials<\/code> 目录下创建一些子视图文件，例如 header.blade.php<\/code> 和 footer.blade.php<\/code>。<\/p>\n
    <!-- resources\/views\/partials\/header.blade.php -->\n<nav>\n   <ul>\n       <li><a href=\"\/\">Home<\/a><\/li>\n       <li><a href=\"\/about\">About<\/a><\/li>\n   <\/ul>\n<\/nav><\/code><\/pre>\n
    <!-- resources\/views\/partials\/footer.blade.php -->\n<footer>\n   &copy; {{ date('Y') }} - My Laravel App\n<\/footer><\/code><\/pre>\n<\/li>\n
  5. \n
    在控制器中使用 Blade<\/strong>：\n创建一个控制器并编写一个方法来渲染包含布局的视图。<\/p>\n
    \/\/ app\/Http\/Controllers\/HomeController.php\nnamespace AppHttpControllers;\n\nuse IlluminateHttpRequest;\nuse AppModelsMenu;\n\nclass HomeController extends Controller\n{\n   public function index()\n   {\n       return view('home', compact('menu'));\n   }\n}<\/code><\/pre>\n<\/li>\n
  6. \n
    路由配置<\/strong>：\n在 routes\/web.php<\/code> 中配置路由，指向 HomeController<\/code> 的 index<\/code> 方法。<\/p>\n
    \/\/ routes\/web.php\nuse AppHttpControllersHomeController;\n\nRoute::get('\/', [HomeController::class, 'index']);<\/code><\/pre>\n<\/li>\n
  7. \n
    访问主页<\/strong>：\n打开浏览器，访问 http:\/\/localhost:8000<\/code>，你应该会看到包含布局的首页。<\/p>\n<\/li>\n<\/ol>\n
    通过以上步骤，你可以使用 Blade 构建一个基本的 Laravel 网站布局。你可以根据需要进一步扩展和定制这些布局。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \"黑板Bug讲师\"<\/figure>\r\n\r\n\r\n\r\n
    黑板Bug讲师<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
    \r\n
    \r\n
    介绍<\/h2>
    Laravel的Blade模板引擎提供了一种简单而强大的方法来为Web应用程序创建布局。Blade引擎能够扩展布局，包括部分视图，并在特定区域注入内容，这使得它非常适合需要维护整洁和模块化代码库的开发者。在这篇教程中，我们将一起探索Blade布局的创建过程，从基础到高级概念，同时附带示例说明。<\/p>
    理解刀片布局<\/h2>
    要真正理解Blade布局的概念，首先需要了解Blade是一个在Laravel框架中使用的模板引擎，它允许开发人员通过简单的占位符和指令来构建动态的HTML模板，从而实现最小化操作。在Blade中，“布局”（layout）是指一个主页面，可以被其他视图扩展以创建应用程序中的统一外观和感觉。<\/p>
    让我们先创建一个基本的Blade布局：<\/p>
    <!-- resources\/views\/layouts\/app.blade.php -->\n<!doctype html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n    <!-- CSRF Token -->\n    <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\n    <title>{{ config('app.name', 'Laravel') }}<\/title>\n\n    <!-- Scripts -->\n    <!-- Add your JavaScript files here -->\n\n    <!-- Styles -->\n    <!-- Add your CSS files here -->\n<\/head>\n<body>\n    <div id=\"app\">\n        @yield('content')\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>
    这个布局定义了一个包含脚本和样式表的基本HTML文档，你可以根据需要填充这些部分。@yield指令则是在子视图的内容会被“注入”到此处的地方。<\/p>
    扩展刀片布局<\/h2>
    现在，让我们创建一个视图来扩展我们的应用程序布局：<\/p>
    <!-- resources\/views\/welcome.blade.php -->\n@extends('layouts.app')\n\n@section('content')\n    <h1>Welcome to my Laravel app!<\/h1>\n@endsection<\/code><\/pre>
    当“欢迎”视图渲染时，位于@section(‘content’)中的内容会被放置到布局文件的@yield(‘content’)区域。<\/p>
    包括部分<\/h2>
    片段（partials）是可重用的HTML块，可以包含在其他Blade视图中。让我们创建一个导航栏片段：<\/p>
    <!-- resources\/views\/partials\/nav.blade.php -->\n<nav>\n    <ul>\n        <li><a href=\"\/\">Home<\/a><\/li>\n        <!-- Add other nav items here -->\n    <\/ul>\n<\/nav><\/code><\/pre>
    现在，我们将这部分包含在布局中：<\/p>
    <!-- resources\/views\/layouts\/app.blade.php (updated) -->\n<body>\n    @include('partials.nav')\n    <!-- rest of the layout -->\n<\/body><\/code><\/pre>
    高级剑术技巧<\/h2>
    随着应用程序变得越来越复杂，您可能需要使用高级技术来管理布局。以下是几个先进的Blade功能：<\/p>
    堆栈（Stack）<\/h3>
    堆栈允许你在子视图中从命名的堆栈中推入，这些堆栈可以在布局中渲染。这对于需要在body标签末尾包含的脚本特别有用。<\/p>
    <!-- resources\/views\/layouts\/app.blade.php -->\n<!-- rest of the layout -->\n@stack('scripts')<\/code><\/pre>
    在子视图中，使用@push指令：<\/p>
    <!-- resources\/views\/welcome.blade.php (example) -->\n@push('scripts')\n<script>\n    \/\/ Some script that will be rendered at the end\n<\/script>\n@endpush<\/code><\/pre>
    组件<\/h3>
    Laravel 7 及后续版本引入了 Blade 组件，与部分相似但功能更强大，如提供数据绑定：<\/p>
    <x-alert type=\"error\" :message=\"$message\" \/><\/code><\/pre>
    结论。<\/h2>
    在本帖中，您已学习了构建和扩展Blade布局的基础知识、处理部分、使用堆栈来执行脚本以及利用Blade组件在Laravel中的使用方法。通过掌握Blade的力量，您可以创建高效且易于维护的模板，从而增强您的Web应用程序结构的整体简洁性和优雅性。<\/p><\/body>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \"长工码奴1523\"<\/figure>\r\n\r\n\r\n\r\n
    长工码奴1523<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
    \r\n
    \r\n
    在 Laravel 中构建布局非常简单，你可以使用 Blade 模板引擎来实现。以下是如何使用 Blade 构建基本布局的示例：<\/p>\n
    1. 创建一个新的 Laravel 应用<\/h3>\n
    首先，你需要创建一个新的 Laravel 应用并配置好数据库和环境。<\/p>\n
    composer create-project --prefer-dist laravel\/laravel my-app\ncd my-app<\/code><\/pre>\n
    2. 创建一个名为 resources\/views\/layouts<\/code> 的文件夹<\/h3>\n
    如果你还没有这个文件夹，可以创建它：<\/p>\n
    mkdir resources\/views\/layouts<\/code><\/pre>\n
    3. 在 resources\/views\/layouts<\/code> 文件夹下创建一个名为 base.blade.php<\/code> 的文件<\/h3>\n
    在这个文件中，我们将定义一些基础的布局组件。<\/p>\n
    <?php\n\nnamespace AppProviders;\n\nuse IlluminateSupportFacadesView;\nuse IlluminateViewComponentProvider;\n\nclass LayoutServiceProvider extends ServiceProvider\n{\n    public function register()\n    {\n        View::composer('*', function ($view) {\n            $view->with('title', 'Title of the page');\n            $view->with('description', 'Description of the page');\n        });\n    }\n}<\/code><\/pre>\n
    4. 运行 Laravel 命令以应用新的布局<\/h3>\n
    打开终端，然后运行 php artisan view:clear<\/code> 来清除默认的视图，然后运行 php artisan serve<\/code> 启动服务器。<\/p>\n
    5. 使用 Blade 编辑器编辑页面<\/h3>\n
    现在，你可以通过在页面上使用 <head><\/code> 标签中的 title<\/code> 和 meta<\/code> 标签来添加标题和元信息。<\/p>\n
    例如，如果你想在一个新创建的 articles\/new.blade.php<\/code> 页面中添加一个标题和元信息，可以在该页面的顶部添加以下代码：<\/p>\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <!-- 添加你的标题 -->\n    <title>New Article<\/title>\n\n    <!-- 配置 meta 描述 -->\n    <meta name=\"description\" content=\"A new article on our blog\">\n\n    <!-- 添加其他需要设置的元信息 -->\n    <meta property=\"og:title\" content=\"New Article\"\/>\n    <meta property=\"og:description\" content=\"A new article on our blog\"\/>\n\n    <!-- 其他元信息如 twitter:title 等等 -->\n<\/head>\n<body>\n<!-- 页面内容 -->\n<\/body>\n<\/html><\/code><\/pre>\n
    这样，当用户访问你的新文章页面时，他们将看到预定义的标题和元信息。<\/p>\n
    以上就是在 Laravel 中使用 Blade 构建布局的基本方法。可以根据需要自定义布局和样式。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Bug编译狮 Laravel 是一个流行的 PHP 框架，它提供了强&#22823..<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false},"tags":[],"my1js2nav":[44],"tuisongtax":[],"class_list":["post-769","my1js","type-my1js","status-publish","hentry","my1js2nav-laravel"],"acf":{"qian_art_seotitle":"","qian_art_seotitle_source":{"label":"SEO\u6807\u9898","type":"text","formatted_value":""},"qian_art_seokws":"","qian_art_seokws_source":{"label":"SEO\u5173\u952e\u8bcd","type":"text","formatted_value":""},"qian_art_stzhong":"","qian_art_stzhong_source":{"label":"\u4e2d | \u77ed\u6807\u9898","type":"text","formatted_value":""}},"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js\/769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/types\/my1js"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/media?parent=769"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tags?post=769"},{"taxonomy":"my1js2nav","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js2nav?post=769"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tuisongtax?post=769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}