Laravel 如何在Blade模板中能够根据不同的子页面附加不同的js和CSS

在Laravel中遇到这么一个问题。我们使用了Blade模板,并创建一个layout作为通用的模板。将子页面作为yield输出:

<!-- store in resource/view/layout.blade.php -->
<!DOCTYPE html>
<html>
    <head>
        <title>Laravel 5 - @yield('title')</title>

        <link rel="stylesheet" href="./style/page.css">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <header>
        </header>
 
        <section>
            @yield('content')
        </section>
 
        <footer>
        </footer>
 
    </body>
</html>
<!-- store in resource/view/index.blade.php -->
@extends('layout')
 
@section('title', 'test')
 
@section('content')
<style>
    .pageText {
       font-color : #00ff00;
    }
</style>
 
<div>
    Some Child Page
</div>
 
@endsection

 

为了照顾不同的子页面,就需要在layout中把需要的js和css都加入进来,这样效率低且代码可读性较差,当我们在不同的子页面使用不同的css时,所有CSS就会和section参杂在一起,因此我们可以使用parent标记。

<!-- store in resource/view/layout.blade.php -->
<!DOCTYPE html>
<html>
    <head>
        <title>Laravel 5 - @yield('title')</title>
     @section('style')
        <link rel="stylesheet" href="./style/page.css">
     @show
@section('script') <script src="./js/jquery.min.js"></script> <script src="./js/bootstrap.min.js"></script>
@show
</head> <body> <header> </header> <section> @yield('content') </section> <footer> </footer> </body> </html>
<!-- store in resource/view/index.blade.php -->
@extends('layout')
 
@section('title', 'test')
 
@section('style')
@parent
<style>
    .pageText {
       font-color : #00ff00;
    }
</style> 
@endsection

@section('content')
<div>
    Some Child Page
</div>
 
@endsection

这样就可以解决问题了。

转载于:https://www.cnblogs.com/xiaoxiaff/p/5309135.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值