在 Laravel 8 中使用堆栈

Posted

技术标签:

【中文标题】在 Laravel 8 中使用堆栈【英文标题】:Using stacks in Laravel 8 【发布时间】:2021-05-29 08:38:20 【问题描述】:

我正在使用 Laravel 8 和 Jetstream 构建一个站点。 Jetstream 对 javascript / css 框架持固执己见,这很棒,但我需要将外部 javascript 库添加到我的一个组件中,而且我看不到任何地方可以将它们添加到默认的 app 布局中。所以我在默认的应用布局中为 css /js 添加了一个堆栈:

<!DOCTYPE html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
    <head>
        // head stuff
        <title> config('app.name', 'Laravel') </title>

        <!-- Styles -->
        <link rel="stylesheet" href=" mix('css/app.css') ">

        @livewireStyles
        @stack('css') // added this stack

        <!-- Scripts -->
        <script src=" mix('js/app.js') " defer></script>
    </head>
    <body class="font-sans antialiased">
        // body stuff
    </body>
    @stack('scripts') // and this stack
</html>

然后在我扩展应用布局的子视图中,我试图将 js 文件推送到 js 堆栈:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
             __('Stuff & Things') 
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <x-component.stuffnthings />
            </div>
        </div>
    </div>
</x-app-layout>
@push('scripts')
    <script src=public_path("js/mobiscroll.javascript.min.js")></script>
@endpush

当我查看源代码时,js 文件不在子视图中。我错过了什么?这是将自定义 js / css 添加到 Jetstream 的正确方法还是有更好的方法?

【问题讨论】:

【参考方案1】:

对于任何将头撞在类似墙上的人——我的代码的问题是push 需要在布局标签内。一旦我向上移动它,它就起作用了(而且我一直使用 public_path 错误):

<x-app-layout>
<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
         __('Stuff & Things') 
    </h2>
</x-slot>

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <x-component.stuffnthings />
        </div>
    </div>
</div>
@push('scripts')
    <script src="js/mobiscroll.javascript.min.js"></script>
@endpush
</x-app-layout>

如果有更好的方法来完成此操作,我将保持打开状态!

【讨论】:

以上是关于在 Laravel 8 中使用堆栈的主要内容,如果未能解决你的问题,请参考以下文章

在 App::abort(403) 之后抑制 Laravel 日志中的堆栈跟踪转储

使用 Laravel Vue Inertia 堆栈中的数据重定向路由

Laravel:是不是可以在捕获异常时记录堆栈跟踪并继续执行?

Laravel - 在 LAMP 堆栈上将 /public 设置为 root

修复:AWS Bitnami LAMP 堆栈错误中的 Laravel Git 克隆

在 API 端使用 Ionic 和 laravel 进行实时聊天