CSS / JavaScript

设置网站favicon

app/Admin/bootstrap.php加入下面的代码来设置网站的favicon:

  1. use Encore\Admin\Admin;
  2. Admin::favicon('/your/favicon/path');

引入CSS和JavaScript文件

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

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

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

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

页面插入JS脚本代码

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

  1. use Encore\Admin\Admin;
  2. Admin::script('console.log("hello world");');

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

页面插入CSS样式

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

  1. use Encore\Admin\Admin;
  2. Admin::style('.form-control {margin-top: 10px;}');

这段代码可以在插入当前请求所运行到的代码文件的任何地方。

页面插入HTML代码

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

  1. use Encore\Admin\Admin;
  2. Admin::html('<template>...</template>');

这段代码可以在插入当前请求所运行到的代码文件的任何地方, 比如要在当前页面加入一些隐藏的HTML代码的时候,可以使用这个方法来实现。

压缩CSS和JavaScript

since v1.6.13

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

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

  1. composer require matthiasmullie/minify --dev

压缩

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

  1. $ php artisan admin:minify
  2. JS and CSS are successfully minified:
  3. vendor/laravel-admin/laravel-admin.min.js
  4. vendor/laravel-admin/laravel-admin.min.css
  5. Manifest successfully generated:
  6. vendor/laravel-admin/minify-manifest.json

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

清理

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

  1. $ php artisan admin:minify --clear
  2. Following files are cleared:
  3. vendor/laravel-admin/laravel-admin.min.js
  4. vendor/laravel-admin/laravel-admin.min.css
  5. vendor/laravel-admin/minify-manifest.json

配置

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

  1. 'minify_assets' => true,