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

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

    开源项目
    最新评论
    34 :感谢你的开源项目
    奥德赛 on Electron+vue搭建项目或将vue项目转为electron :大声道奥术大师大声道
    cmf :你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
    laravel新手 :您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类