Laravel中的blade布局使用

B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光；回首,是悠长深巷。

Laravel中的blade布局使用

Published on：2022-04-23

一.需求描述

在开发过程中，一般将 css 文件引用放在 head 中，js 文件的引用放在底部，而书写的 js 代码放在 js 文件引用的最下面。

有时候不同的页面会引用一些其他的 js 文件或 css 文件，若在布局中全部引入又有些不合理。

二.布局使用

主要使用布局的 @section (‘xxx’)，@stop @append @show

1.layout.blade.php，一个简单的布局文件

<!DOCTYPE html>
<html>
@include('public.header')
<body>
    @yield('content')
    @include('public.footer')
</body>
</html>

2.header.blade.php，公共头部

<head>
    <meta charset="utf-8">
    <title>B5LaravelCMF</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="通用css" rel="stylesheet"/>
    @section('css_common')
    @show
    <link href="通用css" rel="stylesheet">
</head>

在头部文件引用了通用的 css，而页面如果引用其他 css 文件则放在 @section (‘css_common’) 的位置。

3.footer.blade.php，底部文件

<script src="通用js"></script>
@section('js_common')
@show
<script src="通用js"></script>
@section('script')
@show

底部引用了通用 js，而页面如果引用其他 css 文件则放在 @section (‘js_common’) 的位置。页面书写的 js 代码在 @section (‘script’) 位置

4. 一个页面

@extends('public.layout')
@section('js_common')
    <script src="其他js"></script>
@append
@section('css_common')
    <link rel="stylesheet" href="其他css">
@append
@section('content')
 页面内容
@stop
@section('script')
<script>
    js代码
</script>
@stop

5. 总结

我们可以将每个插件的 js 和 css 引用放在一个单独文件中，如 bootstrap 插件

定义一个 assets/bootstrap.blade.php

@section('css_common')
    <link rel="stylesheet" href="bootstrap.min.css">
@append
@section('js_common')
<script src="bootstrap.min.js"></script>
@append

然后在页面中直接 include

@extends('public.layout')
@include('assets.bootstrap')
@include('assets.XXXXX')
@section('content')
 页面内容
@stop
@section('script')
<script>
    js代码
</script>
@stop

留言列表(0)

加载更多

留言

B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光；回首,是悠长深巷。

开源项目

B5LaravelCMF：基于laravel9+bootstrap3实现的快速开发后台
B5YiiCMF：基于Yii2+bootstrap3 实现的快速开发后台管理系统
B5ThinkCmf：基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
B5GoCmf：gin + sqlx +bootstrap 实现后端管理系统
See also：gitee.com@b5net