首页 > 解决方案 > 如何将 bootstrap-colorpicker 附加到我的 laravel/blade 页面?

问题描述

我在我的 laravel 5.7 / Bootstrap v4.1 中安装了 https://github.com/farbelous/bootstrap-colorpicker插件。/Jquery 3/Blade 应用程序和问题是将我需要的文件附加到我的页面的正确方法是什么?我只在某些页面上需要这个插件,所以在这个页面上我做了:

    ...
@endsection

@section('scripts')
    ...
    <script src="{{ asset('js/'.$frontend_template_name.'/print_to_pdf_options.js') }}{{  "?dt=".time()  }}"></script>
    <link href="../../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">
    <script src="../../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
    ...
    <script>

@endsection

但这种方式行不通,似乎无效。哪种方式有效?

谢谢!

标签: jquerylaravel-5npmlaravel-blade

解决方案


您可以使用堆栈

从文档:

Blade 允许您推送到命名堆栈,这些堆栈可以在另一个视图或布局中的其他位置呈现。这对于指定子视图所需的任何 JavaScript 库特别有用:

@push('scripts')
    <script src="/example.js"></script>
@endpush

在您的布局中:

<head>
    <!-- Head Contents -->

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

    @stack('scripts')
</body>

查看需要插件的位置:

@push('styles')
    <link href="../../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('js/'.$frontend_template_name.'/print_to_pdf_options.js') }}{{  "?dt=".time()  }}"></script>
    <script src="../../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
@endpush

推荐阅读