Laravel|Laravel 博客开发｜使用 Blade 设置布局模版 laravel|php|前端|blog|bulma|博客开

在 Web 开发中会遇到许多页面布局很相似，甚至许多页面的头部和底部显示都是一样的，比如我的这个博客应用，前端所有展示页面的头部和底部就是一样的。
如果每个页面都要重复写这些代码，会导致代码不够灵活、简洁，当然谁也不愿意做重复工作。为了使后面的开发更容易，更好的维护代码，需要设置一个模版，这个模版包含一些通用的视图，页面只要继承这个模版，就拥有模版里面的内容。
Laravel 的 Blade 模板支持继承，这意味多个子视图可以共用父视图提供的视图模板，接下来就是使用 Blade 设置模版。
布局在 resources/views目录下创建一个 layouts目录，在layouts目录下添加三个文件：

模版文件（子视图需要继承的父视图）- app.blade.php。
通用头部 - header.blade.php。
通用底部 - footer.blade.php。

1. 模版
resources/vews/layouts/app.balde.php。

getLocale() }}"> @yield('title','SevDot')|SevDot-关注独立开发和自由职业 @include('layouts.header') @yield('content') @include('layouts.footer')

在模版中引入了头部和底部，继承这个模版的页面就会包含这两部分，使用 @include引入视图，@include接受两个参数，第一个参数是视图的路径，第二参数是数据，这里不需要给视图传输数据，所以省略了第二个参数。

@include('layouts.header')

@yield是占位区域，这里的内容将由继承自模版的视图文件定义，模版文件中定义了两个占位，分别是标题的部分内容和页面的主要内容区域：

@yield('title','SevDot')| @yield('content')

@yield接受两个参数，第一个是区域名称，第二个是默认内容，继承模版的视图没有填充的话，由该参数填充。
2. 通用头部
resources/vews/layouts/header.balde.php。

class="logo title is-3 has-text-white">SevDot > > > 首页项目博客关于

3. 通用底部
resources/vews/layouts/footer.balde.php。

项目博客关于 >?SevDot 2022. All rights reserved. 滇ICP备17004667号-3

使用模版现在需要修改首页、联系页和关于页面，让其继承模版视图。使用@extends并通过传参来继承父视图layouts/app.balde.php的视图模板。

@extends('layouts.app')

使用@section和 @stop 代码来填充父视图的@stop区块，所有包含在@section和@stop中的代码都将被插入到父视图的content区块。

@section('content') 主页 @stop

1. 首页
resources/views/pages/root.balde.php。

@extends('layouts.app')@section('content') class="hero is-link"> 独立自由崇尚独立开发，追求自由职业。联系 class="section"> 最新文章@if($articles->isEmpty())@else @foreach($articles as $key=>$value) {{$value->created_at->toDateString()}} ="margin: 0 5px; ">| ~~暂无数据，敬请期待~~ 站长：SevDot 文章图片 class="icon"> class="icon"> class="icon"> 微信公众号文章图片 @stop

2. 联系页
resources/views/pages/contact.balde.php。

@extends('layouts.app') @section('title') 联系 @stop @section('content') class="section"> 添加微信请道明来意，谢谢！文章图片公众号文章图片 @stop

3. 关于页
resources/views/pages/about.balde.php。

@extends('layouts.app') @section('title') 联系 @stop @section('content') class="section"> 您好，我是 SevDot。我是一名软件开发者和终身学习者，偶尔也写博客文章。关于博客基于 Laravel 和 Bulma 开发的个人博客应用。公众号文章图片 @stop