Wallogit.com
2017 © Pedro Peláez
Yii2 Metronic theme integration
Yii2 Metronic theme integration. Currently is supported the version 4.7.5, (*1)
Master branch as per 12 November 2021 uses bootstrap 5.x, so if you need support for bootstrap 3.x then uses version 2.0.x, (*2)
The extension is in development and the only way to use this fork is through through composer., (*3)
So add it to your composer.json with this composer command:, (*4)
php composer.phar require hidayat365/yii2-metronic dev-master
Then You've to unzip the contents of your metronic Zip theme inside the @webroot/metronic folder. Check Aliases., (*5)
You should have a folder structure like this:, (*6)
Edit your config/web.php configuration file and add the metronic component:, (*7)
'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,
],
]
WARNING Check the "resources" key. This component field is used to locate the content of the zip theme. The component try to create a symlink to this directory inside it's folder. Eventually this may not work! In the case the link is invalid, you've to build it by yourself :), (*8)
My vendor folder looks like this:, (*9)
I suggest also to configure the assetManager. My actual configuration is this:, (*10)
'assetManager' => [
'linkAssets' => true,
'bundles' => [
'yii\web\JqueryAsset' => [
'sourcePath' => null, // do not publish the bundle
'js' => [
'//code.jquery.com/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',
]
],
]
],
],
],
In the ThemeAsset class i've added the support for addons. You can specify additional css/js for specific controller/action., (*11)
In the example is visible the way to add login-4.min.css and jquery.backstretch.min.js to the login page (in my case, the actionLogin is managed by a controller named DefaultController)., (*12)
Configuring the layout for your views is the last step., (*13)
The metronic component contains a sample layout view. I've not checked it. I'm working on my layout :), (*14)
Here is my sample views/layout/main.php:, (*15)
assetManager->getPublishedUrl($asset->sourcePath);
?>
beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<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) ?>>
beginBody() ?>
= $this->render('parts/header.php', ['directoryAsset' => $directoryAsset]) ?>
= $this->render('parts/sidebar.php', ['directoryAsset' => $directoryAsset]) ?>
= $this->render('parts/content.php', ['content' => $content, 'directoryAsset' => $directoryAsset]) ?>
= $this->render('parts/footer.php', ['directoryAsset' => $directoryAsset]) ?>
endBody() ?>
</body>
</html>
endPage() ?>
Metronic theme require that you replace yii\helpers\Html with it's helper. So, you have to add a config/bootstrap.php with the following content:, (*16)
<?php Yii::$classMap['yii\helpers\Html'] = '@vendor/dlds/yii2-metronic/helpers/Html.php'; ?>
The file bootstrap.php should be loaded before the web application is created. So you need to edit your web/index.php file
and adjust it, and add a require directive. The file content should look like this:, (*17)
<?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();
Things to notice:, (*18)
Yii2 Metronic theme integration
BSD-3-Clause
yii2 theme metronic
Yii2 Metronic theme integration
BSD
yii2 theme metronic
Yii2 Metronic theme integration
BSD
yii2 theme metronic