[笔记]关于blade布局的使用

一。需求描述#

在开发过程中，一般将 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