Skip to main content

CSS JavaScript

CSS / JavaScript

引入CSS和JavaScript文件

如果你需要引入CSS或者JavaScript文件,可以在app/Admin/bootstrap.php加入下面的代码:

Admin::css('/your/css/path/style.css');
Admin::js('/your/javascript/path/js.js');

其中文件的路径为相对与public目录的路径,也支持引入外部文件:

Admin::js('https://cdn.bootcss.com/vue/2.6.10/vue.min.js');

页面插入JS脚本代码

如果你要在当前的页面加入一段JS脚本代码,可以使用Admin::script()

use Encore\Admin\Admin;

Admin::script('console.log("hello world");');

这段代码可以在插入当前请求所运行到的代码文件的任何地方,比如表单项之间的一些联动效果,可以用插入JS脚本代码的方式来实现。

压缩CSS和JavaScript

since v1.6.13

这个功能用来将后台引入的本地CSS和JS压缩,以加快后台的页面访问速度。

这个功能依赖[matthiasmullie/minify]作为压缩库,使用之前需要先安装好它:

composer require matthiasmullie/minify --dev

压缩

然后在项目根目录运行命令php artisan admin:minify:

$ php artisan admin:minify

JS and CSS are successfully minified:
vendor/laravel-admin/laravel-admin.min.js
vendor/laravel-admin/laravel-admin.min.css

Manifest successfully generated:
vendor/laravel-admin/minify-manifest.json

这个命令会生成三个文件,查看后台页面源码就可以看到效果了。

清理

运行命令php artisan admin:minify --clear来清理掉上面生成的压缩文件,回到压缩之前的状态。

$ php artisan admin:minify --clear

Following files are cleared:
vendor/laravel-admin/laravel-admin.min.js
vendor/laravel-admin/laravel-admin.min.css
vendor/laravel-admin/minify-manifest.json

配置

对于从低版本更新上来的用户,需要在config/admin.php增加一项配置:

'minify_assets' => true,