[筆記]關於blade佈局的使用

李先生發表於2021-03-10
筆記

一.需求描述

在開發過程中，一般將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
本作品採用《CC 協議》，轉載必須註明作者和本文連結
流年的舊吉他，彈不出時光的悲傷；慧極必傷，情深不壽

相關文章