sonorado/yii2-adminlte-asset

为 Yii 2.0 框架设计的 AdminLTE 后端主题资产包

安装: 6

依赖者: 0

建议者: 0

安全: 0

星星: 0

关注者: 1

分支: 425

类型:yii2-extension

2.6.2 2018-07-24 14:47 UTC

README

Latest Stable Version Total Downloads License

基于 AdminLTE 的 Yii2 框架的后端 UI,详见 AdminLTE

"Yii2 AdminLTE Presentation"

此包包含一个 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 安装

  • 有关 DmitryBaranovskiy/eve.git 的问题,请参阅 #128#113

兼容性矩阵

有关其他 问题,请首先在 GitHub 上进行搜索。

快速入门

安装扩展后,您可以通过重新配置视图组件的路径映射来获得一个 预览

对于 Yii 2 高级应用程序模板基本应用程序模板

'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