weison-tech / yii2-adminlte-asset
Yii2 框架的后端主题
Requires
- cebe/yii2-gravatar: 1.*
- rmrevin/yii2-fontawesome: ~2.9
- weison-tech/adminlte: ~2.0
- yiisoft/yii2: 2.*
- yiisoft/yii2-bootstrap: 2.*
This package is not auto-updated.
Last update: 2024-09-14 18:09:50 UTC
README
基于 AdminLTE 的 Yii2 框架后端 UI
本包包含 Yii 2.0 框架的资产包,用于注册 AdminLTE 用户界面的 CSS 文件。
CSS 文件通过 Yii 推荐的 fxp/composer-asset-plugin
v1.1.1 或更高版本安装。
安装
安装此扩展的首选方式是通过 composer。
要安装 AdminLTE v2,请运行
php composer.phar require weison-tech/yii2-adminlte-asset "2.*"
要安装 AdminLTE v1,请运行
php composer.phar require weison-tech/yii2-adminlte-asset "1.*"
快速入门
安装扩展后,您可以通过重新配置视图组件的路径映射来预览
'components' => [ 'view' => [ 'theme' => [ 'pathMap' => [ '@app/views' => '@vendor/weison-tech/yii2-adminlte-asset/example-views/yiisoft/yii2-app' ], ], ], ],
对于 phd5 应用程序
'components' => [ 'view' => [ 'theme' => [ 'pathMap' => [ '@app/views' => '@vendor/weison-tech/yii2-adminlte-asset/example-views/phundament/app' ], ], ], ],
此资产包提供了布局和视图的示例文件(请参阅文件夹 examples/
),它们**不应用于直接在 vendor/
文件夹中自定义**。
因此,建议您**将视图复制到您的应用程序中**并根据您的需求进行调整。
自定义
- 从
vendor/weison-tech/yii2-adminlte-asset/example-views/yiisoft/yii2-app
(或其他主题)将文件复制到@app/views
。 - 如果之前已创建,通过删除路径映射从您的应用程序中删除自定义
view
配置。 - 编辑您的视图,遵循
vendor/almasaeed2010/adminlte/pages
中的 HTML 标记
AdminLTE 插件
AdminLTE 插件的资产不包括在我们的 AdminLteAsset
中,但您可以在您的供应商目录下的 vendor/almasaeed2010/adminlte/plugins
中找到这些文件。因此,如果您想使用其中的任何一个,我们建议您创建一个自定义包,其中列出您需要的插件文件。
use yii\web\AssetBundle; class AdminLtePluginAsset extends AssetBundle { public $sourcePath = '@vendor/almasaeed2010/adminlte/plugins'; public $js = [ 'datatables/dataTables.bootstrap.min.js', // more plugin Js here ]; public $css = [ 'datatables/dataTables.bootstrap.css', // more plugin CSS here ]; public $depends = [ 'dmstr\web\AdminLteAsset', ]; }
由于此资产依赖于我们的 AdminLteAsset
,因此您只需注册一个资产,例如在您的 main.php
布局文件中。
皮肤
默认情况下,此扩展使用蓝色皮肤为 AdminLTE。您可以在配置文件中更改它。
'components' => [ 'assetManager' => [ 'bundles' => [ 'dmstr\web\AdminLteAsset' => [ 'skin' => 'skin-black', ], ], ], ],
然后只需替换 body 的 class 为 skin-blue
。如果您不想在更改皮肤颜色时修改每个视图文件,可以使用 AdminLteHelper::skinClass()
。
<body class="<?= \dmstr\helpers\AdminLteHelper::skinClass() ?>">
注意:仅当您通过配置覆盖皮肤时才使用 AdminLteHelper::skinClass()
。否则,您将无法获得正确的 body CSS 类。
以下是可用的皮肤列表
"skin-blue",
"skin-black",
"skin-red",
"skin-yellow",
"skin-purple",
"skin-green",
"skin-blue-light",
"skin-black-light",
"skin-red-light",
"skin-yellow-light",
"skin-purple-light",
"skin-green-light"
如果您想使用 AdminLTE 的原生 DOM 标题
<h1> About <small>static page</small> </h1>
您可以按照以下代码进行
/* @var $this yii\web\View */ $this->params['breadcrumbs'][] = 'About'; $this->beginBlock('content-header'); ?> About <small>static page</small> <?php $this->endBlock(); ?> <div class="site-about"> <p> This is the About page. You may modify the following file to customize its content: </p> <code><?= __FILE__ ?></code> </div>
左侧侧边栏菜单 - Widget 菜单
如果您需要将菜单的各个部分分开,则只需将 li.header
项添加到 items
'items' => [ ['label' => 'Gii', 'icon' => 'fa fa-file-code-o', 'url' => ['/gii']], ['label' => 'Debug', 'icon' => 'fa fa-dashboard', 'url' => ['/debug']], ['label' => 'MAIN NAVIGATION', 'options' => ['class' => 'header']], // here // ... a group items ['label' => '', 'options' => ['class' => 'header']], // ... a group items ['label' => '', 'options' => ['class' => 'header']], // ... a group items
为项目添加标签
'items' => [ [ 'label' => '<span>Mailbox</span><span class="pull-right-container"><small class="label pull-right bg-yellow">' . $mailCount . '</small></span>', 'icon' => 'fa fa fa-envelope-o', 'url' => ['/mailbox'], 'encode' => false, ],
Gii CRUD 生成器的模板
告诉 Gii 关于我们的模板。设置在配置文件中完成
if (YII_ENV_DEV) { $config['modules']['gii'] = [ 'class' => 'yii\gii\Module', 'allowedIPs' => ['127.0.0.1', '::1', '192.168.0.*', '192.168.178.20'], 'generators' => [ //here 'crud' => [ 'class' => 'yii\gii\generators\crud\Generator', 'templates' => [ 'adminlte' => '@vendor/dmstr/yii2-adminlte-asset/gii/templates/crud/simple', ] ] ], ]; }
更多信息
有关 AdminLTE 文档,请阅读 https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html
命名空间规则遵循 Yii 2.0 框架结构,例如 Asset Bundle 的
dmstr\web
。