README

集成 Yii2 Metronic 主题。当前支持版本 4.6

需求

要使用此扩展，您需要从 https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes 购买 Metronic 主题的许可证

安装

此扩展处于开发中，使用此分支的唯一方法是通过 composer。

因此，请使用以下 composer 命令将其添加到您的 composer.json 中

php composer.phar require dlds/yii2-metronic dev-master

然后，您需要在 @webroot/metronic 文件夹中解压缩您的 metronic Zip 主题的内容。检查别名。

您的文件夹结构应如下所示

app/
- web/
  - metronic/
    - _documentation
    - _resources
    - _start
    - theme
    - theme_rtl

快速开始

编辑您的 config/web.php 配置文件，并添加 metronic 组件

'components' => [
    'metronic'=>[
        'class'=>'dlds\metronic\Metronic',
        'resources'=>'[path to my web]/web/metronic/assets/theme/assets',
        'style'=>\dlds\metronic\Metronic::STYLE_MATERIAL,
        'theme'=>\dlds\metronic\Metronic::THEME_LIGHT,
        'layoutOption'=>\dlds\metronic\Metronic::LAYOUT_FLUID,
        'headerOption'=>\dlds\metronic\Metronic::HEADER_FIXED,
        'sidebarPosition'=>\dlds\metronic\Metronic::SIDEBAR_POSITION_LEFT,
        'sidebarOption'=>\dlds\metronic\Metronic::SIDEBAR_MENU_ACCORDION,
        'footerOption'=>\dlds\metronic\Metronic::FOOTER_FIXED,

    ],
]

警告检查 "resources" 键。此组件字段用于定位 zip 主题的内容。组件尝试在其文件夹内创建指向此目录的符号链接。 这最终可能不起作用！ 如果链接无效，您必须自己构建它：）

我的 vendor 文件夹看起来像这样

app/
- [...]
- vendor/
  - dlds/
    - yii2-metronic/
      - assets -> 链接到 /var/www/project/web/metronic/assets/theme/assets
      - builders/
      - bundles/
      - helpers/
      - layouts/
      - widgets/

我还建议配置 assetManager。我当前的配置如下

'assetManager' => [
        'linkAssets' => true,
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'sourcePath' => null,   // do not publish the bundle
                'js' => [
                    '//code.jqueryjs.cn/jquery-1.11.2.min.js',  // use custom jquery
                ]
            ],
            
            'dlds\metronic\bundles\ThemeAsset' => [
                'addons'=>[
                    'default/login'=>[
                        'css'=>[
                            'pages/css/login-4.min.css',
                        ],
                        'js'=>[
                            'global/plugins/backstretch/jquery.backstretch.min.js',

                        ]
                    ],
                ]
            ],
        ],
    ],

我在 ThemeAsset 类中添加了对插件的支持。您可以为特定的控制器/动作指定额外的 css/js。

在示例中可以看到如何将 login-4.min.css 和 jquery.backstretch.min.js 添加到登录页面（在我的案例中，actionLogin 由名为 DefaultController 的控制器管理）。

配置您视图的布局是最后一步。

Metronic 组件包含一个示例布局视图。我尚未检查它。我正在制作我的布局：）

以下是我的示例 views/layout/main.php

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use dlds\metronic\helpers\Layout;
use dlds\metronic\Metronic;

$asset = Metronic::registerThemeAsset($this);

$directoryAsset = Yii::$app->assetManager->getPublishedUrl($asset->sourcePath);
?>
<?php $this->beginPage() ?>
<!--[if IE 8]> <html lang="<?= Yii::$app->language ?>" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="<?= Yii::$app->language ?>" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<!--<![endif]-->
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body <?= Layout::getHtmlOptions('body',['class'=>'page-container-bg-solid'],true) ?>>
<?php $this->beginBody() ?>

<?= $this->render('parts/header.php', ['directoryAsset' => $directoryAsset]) ?>

<!-- BEGIN CONTAINER -->
<div class="page-container">
<?= $this->render('parts/sidebar.php', ['directoryAsset' => $directoryAsset]) ?>

<?= $this->render('parts/content.php', ['content' => $content, 'directoryAsset' => $directoryAsset]) ?>
</div>
<?= $this->render('parts/footer.php', ['directoryAsset' => $directoryAsset]) ?>

<?php $this->endBody() ?>

</body>
</html>
<?php $this->endPage() ?>

Metronic 主题要求您将 yii\helpers\Html 替换为其辅助函数。因此，您需要添加一个 config/bootstrap.php，内容如下

<?php
Yii::$classMap['yii\helpers\Html'] = '@vendor/dlds/yii2-metronic/helpers/Html.php';
?>

bootstrap.php 文件应在创建 Web 应用程序之前加载。因此，您需要编辑您的 web/index.php 文件并调整它，并添加一个 require 指令。文件内容应如下所示

<?php

// comment out the following two lines when deployed to production
defined('YII_DEBUG') or define('YII_DEBUG', true);
defined('YII_ENV') or define('YII_ENV', 'dev');

require(__DIR__ . '/../vendor/autoload.php');
require(__DIR__ . '/../vendor/yiisoft/yii2/Yii.php');

$config = require(__DIR__ . '/../config/web.php');
require(__DIR__ . '/../config/bootstrap.php');
(new yii\web\Application($config))->run();

注意事项

我已经将主要部分的渲染移动到单独的文件（parts/*）。您可以将这些文件构建并添加到您的项目中。
我到处传递 $directoryAsset 变量：它包含资产的路径。这对于加载与 Metronic 主题捆绑在一起的照片非常有用。
使用 Layout::getHtmlOptions() 管理的 BODY 标签。此方法能够构建所有 Metronic 所需的类。
始终检查在适当的位置使用 $this->beginPage()、$this->beginBody() 以及相关的 $this->endBody() 和 $this->endPage()。

dlds / yii2-metronic

维护者

详细信息

README

需求

安装

快速开始