ajulcab/laravel-asset-manager

在 Laravel 中管理资源

1.1.0 2021-10-12 17:09 UTC

This package is auto-updated.

Last update: 2024-09-13 00:07:10 UTC


README

# Laravel 简单资源管理器

Build Status StyleCI

支持 Laravel 8。

安装

  1. 运行 composer require ajulcab/laravel-asset-manager
  2. Ajulcab\AssetManager\AssetManagerServiceProvider::class 添加到 app 配置的 providers 数组中
  3. 运行 php artisan vendor:publish --provider="Ajulcab\AssetManager\AssetManagerServiceProvider" --tag="config"

配置

所有资源都定义为 assets 数组中的键值对。然后在视图文件中使用键来包含资源,例如 @css('animate')

值部分允许三种格式。

  • 简单的资源 URL
'css' => 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'
  • 资源 URL 数组
'js' => [
    'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js'
]
  • js 也接受一个选项数组。 注意 在这种情况下,整个 js 资产必须包裹在数组中
'js' => [
    ['https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js', ['data-pace-options' => '{ "ajax": false }']]
]

输出

<script data-pace-options='{ "ajax": false }' type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js'></script>

这可以与第二种格式一起使用

示例使用

config/asset-manager.php

'assets' => [
    'animate' => [
            'css' => 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'
    ],
    'tagsinput' => [
        'css' => 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css',
        'js' => 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js'
    ],
    'datatables' => [
        'css' => 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css',
        'js' => [
            'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js'
        ]
    ],
    ...
]

view.blade.php

@css('animate', 'tagsinput', 'datatables')

@js('tagsinput', 'datatables')

这将创建包含对应 URL 的资源包含在你的 HTML 中。

你也可以直接调用 URL

@css('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css')