Yii2 整合 Color Admin 后台 UI 库 [ 2.0 版本 ]

▪ 环境

基于 Yii2 高级模板 和 Color Admin 2.2

▪ 后台 UI 库

通常做后台的时候我们都会选择一个成熟的 UI 库，既省心又省力：

• Bootstrap
• ZUI
• amazeUI
• ...

以上都是一些优秀的 UI 开源库，你随时通过下载、GitHub 甚至于 Composer 等方式获取。

相比我更喜欢 Color Admin 这款 UI 库；但因为它是收费的，所以基本上目前你无通过 GitHub 和 Composer 方式获取，只能通过付费下载的方式获取。

接下来我将详解一下如果将 Color Admin UI 库整合到 Yii2 中的 后台模块(backend)。

▪ Yii2 的资源管理（Assets）

在正式编码前，你需要大致了解 Yii2 的资源管理机制，可以直接访问官网的权威手册进行查阅。

▪ Yii2 整合 Color Admin 库

1. 引入源码

由于 Color Admin 无法通过 Composer 下载并管理，也就说无法直接安装到 /vendor 目录，所有我们就在根目录下新建一个 library 用于存放那些无法通过 Composer 安装的第三方库。

我们将 Color Admin 源码放到以下目录：

/library/ColorAdmin/V2.2

2. 新建 Color Admin 资源包类

在 /common/config/bootstrap.php 文件里新建 library 目录的别名，内容如下：

Yii::setAlias('@library', dirname(dirname(__DIR__)).'/library');

新增资源包类文件 /backend/assets/ColorAdminAsset.php，内容如下：

class ColorAdminAsset extends AssetBundle
{
    public $baseUrl = '@web';
    public $sourcePath = '@library';

    public $js = [
        // 基础脚本
        'ColorAdmin/V2.2/plugins/pace/pace.min.js',
        'ColorAdmin/V2.2/plugins/jquery/jquery-1.9.1.min.js',

        'ColorAdmin/V2.2/plugins/bootstrap/js/bootstrap.min.js',
        'ColorAdmin/V2.2/plugins/jquery/jquery-migrate-1.1.0.min.js',
        'ColorAdmin/V2.2/plugins/jquery-ui/ui/minified/jquery-ui.min.js',

        'ColorAdmin/V2.2/crossbrowserjs/html5shiv.js',
        'ColorAdmin/V2.2/crossbrowserjs/respond.min.js',
        'ColorAdmin/V2.2/crossbrowserjs/excanvas.min.js',

        'ColorAdmin/V2.2/plugins/jquery-cookie/jquery.cookie.js',
        'ColorAdmin/V2.2/plugins/slimscroll/jquery.slimscroll.min.js',

        // 消息通知
        'ColorAdmin/V2.2/plugins/gritter/js/jquery.gritter.js',

        // 时间选择器
        'ColorAdmin/V2.2/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js',
        'ColorAdmin/V2.2/plugins/bootstrap-datepicker/js/locales/bootstrap-datepicker.xxxxxxxxxx.js',

        // 下拉框
        'ColorAdmin/V2.2/plugins/bootstrap-select-1.10/bootstrap-select.min.js',

        // 初始化脚本
        'ColorAdmin/V2.2/js/apps.min.js',
    ];

    public $css = [
        // 基础样式
        'ColorAdmin/V2.2/css/style.css',
        'ColorAdmin/V2.2/css/style-responsive.min.css',

        'ColorAdmin/V2.2/css/animate.min.css',
        'ColorAdmin/V2.2/css/theme/default.css',

        'ColorAdmin/V2.2/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css',
        'ColorAdmin/V2.2/plugins/bootstrap/css/bootstrap.css',
        'ColorAdmin/V2.2/plugins/font-awesome/css/font-awesome.min.css',

        // 消息通知
        'ColorAdmin/V2.2/plugins/gritter/css/jquery.gritter.css',

        // 时间选择器
        'ColorAdmin/V2.2/plugins/bootstrap-datepicker/css/datepicker.css',
        'ColorAdmin/V2.2/plugins/bootstrap-datepicker/css/datepicker3.css',

        // 下拉框
        'ColorAdmin/V2.2/plugins/bootstrap-select-1.10/bootstrap-select.min.css',
    ];

    public $depends = [
    ];
}

以上配置代码中除了引入 Color Admin 基础脚本样式，还默认引入了常用的几个 UI 组件部分。

3. 使用 Color Admin 资源包类

资源包类建立完成后，那么接下来就需要把 Color Admin 的脚本和样式引入到视图中使用了，编辑 /backend/view/layouts/main.php，添加如下内容：

use backend\assets\ColorAdminAsset;
ColorAdminAsset::register($this);

至此，Color Admin 就整合成功了；打开页面查看源码可以发现 Color Admin 资源包类 ColorAdminAsset 中定义的脚本和样式已全部加载。

更多Yii2文章参见 https://my.oschina.net/lengdo/blog