4

有没有办法在加载<head>子视图时将 js 加载到页面的部分。我只想根据被调用的视图加载特定的 JS 文件。我正在使用刀片模板引擎。

4

3 回答 3

12

使用节和模板继承有一种更简单的方法。

  1. 首先，创建一个主布局文件，如下所示：http: //paste.laravel.com/UY9这是我使用的包含 Initializr/Bootstrap 的文件。我将其存储在 views/layouts/frontend/ 作为
    master.blade.php 用于前端，将 views/layouts/admin/ 作为 master.blade.php 用于管理员并根据需要进行修改。
  2. 您会注意到各种以@show 结尾的@section 声明。在末尾使用@show 而不是@stop，允许您在其他视图中覆盖它们，您会注意到我添加了@section('scripts') 声明。所以，你可以像这样创建一个视图：
    
@extends('layouts.frontend.master')

@section('scripts')
    Your Scripts
@stop

@section('content')
    Your content
@stop

就是这么简单。这是非常强大的东西，因为它使您能够设置默认值，但也可以在必要时覆盖它，从而使您的视图非常干净和最小化。

一个更好的方法是这样做：

    
@extends('layouts.frontend.master')

@section('head')
    @parent
    Your Scripts
@stop

@section('content')
    Your content
@stop

然后，您可以从主布局中删除 @section('scripts') 声明。使用 @parent 帮助器将允许您将内容附加到一个部分，从而在添加您在视图中指定的额外内容时保持它的默认值。

您还可以为 @yield 声明提供默认内容，例如 @yield('content', 'Default content')。

查看http://codebright.daylerees.com/blade

于 2013-09-27T13:15:14.203 回答
2

首先制作一个通用的标题布局。

app/views/layouts/header.blade.php - header layout

<!DOCTYPE html>
<html>
<head>
  <title>{{ $page->title }}</title> {{-- Getting title from $page object, which is passed from route --}}
  {{ HTML::style('css/common.css') }}
  {{ HTML::script('js/jquery.js') }}
  {{ HTML::script('js/common.js') }}

然后页面特定的脚本布局。

app/views/layouts/script-about.blade.php - about-page script layout 

{{ HTML::script('js/about.js') }}

然后查看特定页面。

app/views/about.blade.php - about page

@extends('layouts.master')
@section('content')
  <p>About-Us page content goes here</p>
@stop

然后是普通页脚。

app/views/layouts/footer.blade.php - footer layout 

  </body>
</html>

然后是要渲染的主要布局。

app/views/layouts/master.blade.php - main layout

@include('layouts.header')
@include('layouts.script-'.$page->slug) {{-- Getting page name from $page object  --}}
</head>
<body>
  @yield('content')
@include('layouts.footer')

并且从路由中，您可以传递$page变量。你可能喜欢这条路线，

Route::get('{slug}', function($slug) {

    $page = Page::where('slug', '=', $slug)->first();
        // getting the datas from Page model with pages table where slug = last uri in your address-bar

    if ( is_null($page) ) { // if no page in db, call 404
        App::abort(404);
    }
        // render the view with page details
    return View::make($page->slug)->with(array('page' => $page));
});
于 2013-09-27T04:54:03.973 回答
0

如文档中所述，在 laravel 5.4 中

您可以简单地使用堆栈（@stack 和 @push）来从子视图（子视图）加载 CSS 和 JS。

  1. 添加@stack到您希望将 JS 文件或 CSS 文件从子视图添加到布局的布局中。

在这里，我将在布局文件中定义两个堆栈，一个用于 CSS 文件，一个用于 JS 文件。styles例如，我给第一个和第二个堆栈起任意名称scripts

我们希望我们的 CSS 文件被加载到布局文件的一部分

<head>
@stack('styles')
</head>

假设我们希望将脚本添加到布局文件中的结束正文标记中

@stack('scripts')
</body>
  1. 现在在子视图中，我可以像这样轻松添加 CSS 和 JS 文件
@push('styles')
<style rel="stylesheet" href="{{asset('dropzone/dist/min/dropzone.min.css') }}" ></style>
@endpush

@push('scripts')
<script src="{{ asset('dropzone/dist/min/dropzone.min.js') }}"></script>
@endpush
于 2017-07-15T14:48:47.693 回答