Yii2 使用 AdminLTE 模板

技巧库 · forecho · 于 3年前 发布 · 12157 次阅读

引言

AdminLTE 作为一款功能非常齐全,界面美观的免费模板,肯定是 做后台的首选。

毫无悬念的 GetYii 后来也使用了这套模板。下面我来教教大家怎么使用。

实战

安装

找到 dmstr/yii2-adminlte-asset,使用 Composer 安装非常方便。

composer require dmstr/yii2-adminlte-asset "2.*"

然后我一般就会去直接改默认的 layout 布局文件,自己布局。更新使用,你可以看这个扩展的说明

替换 AmdinLTE 模板的字体文件

由于 AmdinLTE 使用的是 Google 的字体 CDN,但是在国内被墙了,所以这步一定要操作。怎么操作? 不要告诉我你直接去改 vendor 里面的源代码,这样是非常不符合规范的,其实我们可以利用 Composer 写一个脚本自动执行。

新建一个文件 common/components/ComposerInstaller.php

<?php
/**
 * author     : forecho <caizhenghai@gmail.com>
 * createTime : 16/8/7 上午10:44
 * description:
 */
namespace common\components;
use yii\composer\Installer;
class ComposerInstaller extends Installer
{
    public static function initProject($event)
    {
        foreach (['formatAdminLTE'] as $method) {
            call_user_func_array([__CLASS__, $method], [$event]);
        }
    }
    /**
     * 替换 AmdinLTE 模板的google api, 原因嘛....
     * [@link](/member/link) http://www.cmsky.com/google-fonts-ssl-ustc/
     * @param $event
     */
    public static function formatAdminLTE($event)
    {
        $composer = $event->getComposer();
        $extra = $composer->getPackage()->getExtra();
        if (isset($extra['asset-installer-paths']['bower-asset-library'])) {
            $bowerAssetDir = $extra['asset-installer-paths']['bower-asset-library'];
            $cssFile[] = rtrim($bowerAssetDir, '/') . '/../almasaeed2010/adminlte/dist/css/AdminLTE.css';
            $cssFile[] = rtrim($bowerAssetDir, '/') . '/../almasaeed2010/adminlte/dist/css/AdminLTE.min.css';
            foreach ($cssFile as $css) {
                self::replaceCss($css);
            }
        } else {
            echo "'npm-asset-library' is not set.\n";
        }
    }
    /**
     * @param $cssFile
     */
    public static function replaceCss($cssFile)
    {
        if (file_exists($cssFile)) {
            $content = file_get_contents($cssFile);
            if ($content = str_replace('fonts.googleapis.com', 'fonts.css.network', $content)) {
                file_put_contents($cssFile, $content);
                echo "'{$cssFile}' google api replace success.\n";
            }
        } else {
            echo "'{$cssFile}' file is not exists.\n";
        }
    }
}

修改 Composer.json 文件

// ....

"autoload": {
    "psr-4": { "common\\": "common" },
},
"scripts": {
    "post-create-project-cmd": [
        "yii\\composer\\Installer::postCreateProject"
    ],
    "post-install-cmd": [
        "common\\components\\ComposerInstaller::initProject"
    ],
    "post-update-cmd": [
        "common\\components\\ComposerInstaller::initProject"
    ]
},

这样每次执行 composer installcomposer update 命令的时候,就会自动执行这个脚本。

本文由 forecho 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。


如果这篇文章对您有帮助,不妨微信小额赞助我一下,让我有动力继续写出高质量的教程。

共收到 2 条回复 AmdinLTE 模板
buptlsp#13年前 0 个赞

这个也太麻烦了,yii的核心思想是依赖注入,外面的包里面的内容都是可以通过注入的方式来解决的。

  1. adminLTE中用了googleAPIS,在国内会被墙。所以先把css文件拷贝下来,把google改为360,然后把文件上传到自己的文件服务器上。
  2. 在配置中加入如下的一行,就可以了。
     'assetManager' => [
           'bundles' => [
               'dmstr\web\AdminLteAsset' => [
                   'css' => [
                       '//你的文件服务器地址/css/AdminLTE.min.css',
                   ],
               ],
           ],
       ],
    
forecho#23年前 1 个赞

@buptlsp #1楼 你这个需要手动处理,没有我写的程序自动处理方便。不过也算是一个不错的方案。

添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册