Laravel 5 - 仅在特定页面/控制器(页面特定资产)上添加样式表 [英] Laravel 5 - Add a stylesheet only if on a certain page/controller (page specific asset)

查看：15
本文介绍了Laravel 5 - 仅在特定页面/控制器(页面特定资产)上添加样式表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 Laravel 布局目前如下(移除了导航栏等):

<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css"rel="样式表"><link href="{{ asset('/css/app.css') }}" rel="stylesheet"><!-- 字体--><link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet'类型='文本/css'><!-- 脚本--><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><!-- HTML5 shim 和 Respond.js 用于 IE8 对 HTML5 元素和媒体查询的支持 --><!-- 警告:如果您通过 file://查看页面，Respond.js 将不起作用 --><!--[如果是 IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><身体><div class="容器">@yield('内容')

<!-- 脚本--><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><script src="{{ asset('assets/vendor/toastr/toastr.min.js') }}"></script>

然后我将视图附加到布局:

@extends('app')@section('内容')内容在这里.@endsection

我很困惑，例如，如果我在 clinicController.php 中或在诊所路线中(它是一个资源)，然后注入"一个样式表和一个Javascript 文件放入适当的位置.

有没有办法做到这一点?我想 @if 在某个页面上，显示这个 会起作用，但我确定一定有更Laravel"的方式来做到这一点?

任何帮助将不胜感激.

解决方案

您可以在 view 中创建如下所示的 section，例如:

@extends('layouts.master')@section('样式')<link href="{{asset('assets/css/custom-style.css')}}"/>@停止

然后在你的layout中，@yield，例如:

<link href="{{asset('assets/css/common-style.css')}}" rel="stylesheet"/><!--从视图添加的动态样式表将粘贴在这里-->@yield('样式')

同样适用于 script 标签，例如(layout 可能看起来像这样，styles/scripts):

<头><!--静态样式表--><link href="{{asset('assets/css/common-style.css')}}"/><!--从视图添加的动态样式表将粘贴在这里-->@yield('样式')</头/><!-- 模板正文--><身体><!-- 其他 HTML 元素 --><div class="容器">@yield('内容')

<!-- 将所有动态脚本转储到模板中 -->@yield('脚本')

更新:从 Laravel 5.2 开始，可以使用 Stacks 用于 styles/scripts，例如:

在视图中:

@extends('layouts.master')@section('内容')<!-- 内容-->@endsection<!-- 从视图中动态推送样式 -->@push('样式')<link href="{{asset('assets/css/common-style.css')}}"/>@endpush<!-- 从视图中动态推送脚本 -->@push('脚本')<script src="/example.js"></script>@endpush

模板:

<头><!--静态样式表--><link href="{{asset('assets/css/common-style.css')}}"/><!--从视图添加的动态样式表将粘贴在这里-->@stack('样式')</头/><!-- 模板正文--><身体><!-- 其他 HTML 元素 --><div class="容器">@yield('内容')

<!-- 将所有动态脚本转储到模板中 -->@stack('脚本')

My Laravel layout is currently as follows (removed navbar etc..):

<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" 
     rel="stylesheet">
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">

<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' 
    type='text/css'>

<!-- Scripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div class="container">

        @yield('content')

    </div>

    <!-- Scripts -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="{{ asset('assets/vendor/toastr/toastr.min.js') }}"></script>
</body>
</html>

Then I attach a view to the layout:

@extends('app')

@section('content')

Content here.

@endsection

I'm confused as to, say for example, if I'm in the clinicController.php or within a clinic route (it's a resource), then to "inject" a stylesheet and a Javascript file into the appropriate places.

Is there a way to do this? I'd imagine that @if on a certain page, display this would work, but I'm sure there must be a more "Laravel" way to do it?

Any help would be hugely appreciated.

解决方案

You may create a section like the following in your view, for example:

@extends('layouts.master')

@section('styles')
    <link href="{{asset('assets/css/custom-style.css')}}" />
@stop

Then also in your layout, @yield that, for example:

<!--Static StyleSheets-->
<link href="{{asset('assets/css/common-style.css')}}" rel="stylesheet" />

<!--Dynamic StyleSheets added from a view would be pasted here-->
@yield('styles')

Same goes for script tags, for example (A layout may look like this with styles / scripts):

<html>
    <head>
        <!--Static StyleSheets-->
        <link href="{{asset('assets/css/common-style.css')}}" />

        <!--Dynamic StyleSheets added from a view would be pasted here-->
        @yield('styles')
    </head/>

    <!-- Template Body -->
    <body>
        <!-- Other HTML Elements -->
        <div class="container">
            @yield('content')
        </div>

        <!-- Dump all dynamic scripts into template -->
        @yield('scripts')
    </body>
</html>

Update: Since Laravel 5.2, it's possible to use Stacks for styles/scripts, for example:

In A View:

@extends('layouts.master')

@section('content')
    <!-- Content -->
@endsection

<!-- Push a style dynamically from a view -->
@push('styles')
    <link href="{{asset('assets/css/common-style.css')}}" />
@endpush

<!-- Push a script dynamically from a view -->
@push('scripts')
    <script src="/example.js"></script>
@endpush

The Template:

<html>
    <head>
        <!--Static StyleSheets-->
        <link href="{{asset('assets/css/common-style.css')}}" />

        <!--Dynamic StyleSheets added from a view would be pasted here-->
        @stack('styles')
    </head/>
    <!-- Template Body -->
    <body>

        <!-- Other HTML Elements -->
        <div class="container">
            @yield('content')
        </div>

        <!-- Dump all dynamic scripts into template -->
        @stack('scripts')

    </body>
</html>

这篇关于Laravel 5 - 仅在特定页面/控制器(页面特定资产)上添加样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆