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 install
和 composer update
命令的时候,就会自动执行这个脚本。
本文由 forecho 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。
如果这篇文章对您有帮助,不妨微信小额赞助我一下,让我有动力继续写出高质量的教程。
这个也太麻烦了,yii的核心思想是依赖注入,外面的包里面的内容都是可以通过注入的方式来解决的。
'assetManager' => [
'bundles' => [
'dmstr\web\AdminLteAsset' => [
'css' => [
'//你的文件服务器地址/css/AdminLTE.min.css',
],
],
],
],