sonorado / yii2-adminlte-asset
为 Yii 2.0 框架设计的 AdminLTE 后端主题资产包
Requires
- almasaeed2010/adminlte: ^2.4.0
- cebe/yii2-gravatar: 1.*
- rmrevin/yii2-fontawesome: ~2.9
- yiisoft/yii2: 2.*
- yiisoft/yii2-bootstrap: ~2.0.0
- 2.6.2
- 2.6.1
- 2.6.0
- 2.5.0
- 2.5.0-rc1
- 2.4.4
- 2.4.3
- 2.4.2
- 2.4.1
- 2.4.0
- 2.4.0-rc1
- 2.4.0-beta1
- 2.3.4
- 2.3.3
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.4
- 2.2.3
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.0
- dev-master / 2.0.x-dev
- 2.0.0
- 2.0.0-beta1
- 2.0.0-alpha1
- 1.1.1
- 1.1.0
- 1.0.x-dev
- 1.0.0
- 0.2.0
- 0.1.0
- dev-patch-1
- dev-develop
- dev-feature/default-options
- dev-feature/scrutinizer
- dev-feature/fix-64
- dev-feature/tests
- dev-feature/phundament-sidebar-update
This package is not auto-updated.
Last update: 2024-10-02 10:00:18 UTC
README
基于 AdminLTE 的 Yii2 框架的后端 UI,详见 AdminLTE
此包包含一个 Yii 2.0 框架的资产包,用于注册 AdminLTE 用户界面的 CSS 文件。
CSS 文件通过 Yii 推荐的 fxp/composer-asset-plugin
v1.1.1 或更高版本进行安装。
安装
安装此扩展的首选方式是通过 composer。
要安装 AdminLTE v2,请运行
composer require dmstr/yii2-adminlte-asset "^2.1"
要安装 AdminLTE v1,请运行
composer require dmstr/yii2-adminlte-asset "^1"
常见问题解答
Web 字体使用
AdminLTE 在 2.4.0
中已删除对 Web 字体的包含,因此您需要手动包含所需的字体,例如。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
在生产环境中不推荐通过 CDN 包含,请根据您项目的资产打包工作流程进行调整。
有关详细信息,请参阅 #140。
升级
在升级时,请参阅 AdminLTE 升级指南,了解您需要在视图中进行的调整。
Composer 安装
兼容性矩阵
有关其他 问题,请首先在 GitHub 上进行搜索。
快速入门
安装扩展后,您可以通过重新配置视图组件的路径映射来获得一个 预览。
'components' => [ 'view' => [ 'theme' => [ 'pathMap' => [ '@app/views' => '@vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app' ], ], ], ],
对于 phd5 应用程序
'components' => [ 'view' => [ 'theme' => [ 'pathMap' => [ '@app/views' => '@vendor/dmstr/yii2-adminlte-asset/example-views/testing/app' ], ], ], ],
此资产包提供布局和视图的示例文件(请参阅 examples/
文件夹),它们 不应用于直接在 vendor/
文件夹中修改。
因此,建议您 将视图复制到您的应用程序中 并根据您的需求进行调整。
自定义
- 从
vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app
(或其他主题)复制文件到@app/views
。 - 如果您之前已创建自定义
view
配置,请通过删除路径映射来删除应用程序中的自定义view
配置。 - 根据 html 标记
vendor/almasaeed2010/adminlte/pages
编辑您的视图
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"
禁用皮肤文件加载,当使用捆绑资源时
Yii::$container->set(
AdminLteAsset::className(),
[
'skin' => false,
]
);
如果您想使用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>
左侧边栏菜单 - 小部件菜单
如果您需要将菜单的各个部分分开,只需将li.header
项添加到items
'items' => [ ['label' => 'Gii', 'icon' => 'file-code-o', 'url' => ['/gii']], ['label' => 'Debug', 'icon' => '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' => 'Mailbox', 'icon' => 'envelope-o', 'url' => ['/mailbox'], 'template'=>'<a href="{url}">{icon} {label}<span class="pull-right-container"><small class="label pull-right bg-yellow">123</small></span></a>' ], ]
默认情况下,将添加Font Awesome的前缀
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', ] ] ], ]; }
测试
转到测试文件夹并启动测试堆栈
cd tests
docker-compose up -d
在测试应用程序中安装yii2-adminlte-asset
docker-compose exec php composer install
在浏览器中打开测试URL
http://docker.local:20580/test
http://docker.local:20580/test/login
更多信息
有关AdminLTE文档,请阅读https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html
命名空间规则遵循Yii 2.0框架结构,例如,Asset Bundle的
dmstr\web
。