Aliases, Assets, Widgets - uniqcle/Yii2 GitHub Wiki

Aliases
Assets
- 1. Connecting styles and scripts right on the page
- 2. Asset Bundles
Widgets

Aliases

Используется для работы с путями

Определение: Yii::setAlias('@files', '/var/www/project/upload/files');

Вызов: Yii::getAlias('@files').'/test2'

namespace frontend\controllers; 

use Yii; 
use yii\web\Controller; 

class AliasController extends Controller 
{

	public function actionTest(){

		//Работаете с определенным путем /var/www/project/upload/files
		//Создаем папку test1
		$result = mkdir('/var/www/project/upload/files/test1');
		
			debug($result); 

		//Создаем папку test2 с помощью псевдонима
		Yii::setAlias('@files', '/var/www/project/upload/files');

		$result = mkdir( Yii::getAlias('@files').'/test2' );

			debug($result);
	}
}

Настройка псевдонима в конфигурации приложения

'components' => [
...
    ],
    'params' => $params,
    'aliases' => [
         '@files' => '/var/www/project/upload/files',
         '@photos' => '@files/photos'    
     ]

Заранее определенные псевдонимы

echo Yii::getAlias('@app');      # /var/www/project/frontend
echo Yii::getAlias('@yii');      # /var/www/project/vendor/yiisoft/yii2
echo Yii::getAlias('@runtime');  # /var/www/project/frontend/runtime
echo Yii::getAlias('@vendor');   # /var/www/project/vendor
echo Yii::getAlias('@webroot');  # /var/www/project/frontend/web
echo Yii::getAlias('@web');      //не работает

Документация

Псевдонимы

Assets

Файл, кот. может подключаться в веб-странице

1 Connecting styles and scripts right on the page

(Так делать не рекомендуется)

Создаем новый контроллер frontend/controllers/GalleryController.php

namespace frontend\controllers; 

use yii\web\Controller; 

class GalleryController extends Controller 
{

	public function actionIndex(){

		return $this->render('index'); 

    }
}

Временно отключаем debugger в frontend/config/main-local.php чтоб не выводились лишние скрипты

    /*$config['bootstrap'][] = 'debug';
    $config['modules']['debug'] = [
        'class' => 'yii\debug\Module',
    ];*/

Создаем вью frontend/views/gallery/index.php

Добавляем css-стили frontend/web/css/style.css

Добавляем js-скрипты (jquery и isotope) frontend/web/js/jquery.js и frontend/web/js/jquery.isotope.js

А также скрипт инициализации в конец файла view

<link rel="stylesheet" href="/css/style.css">
<script src = "/js/jquery.js"></script>
<script src = "/js/jquery.isotope.js"></script>

<h1>Gallery</h1>

<div class="portfolioFilter">

	<a href="#" data-filter="*" class="current">All Categories</a>
	<a href="#" data-filter=".people">People</a>
	<a href="#" data-filter=".places">Places</a>
	<a href="#" data-filter=".food">Food</a>
	<a href="#" data-filter=".objects">Objects</a>

</div>

<div class="portfolioContainer">

	<div class="objects">
		<img src="/upload/photos/isotope/watch.jpg" alt="image">
	</div>
	
	<div class="people places">
		<img src="/upload/photos/isotope/surf.jpg" alt="image">
	</div>	

	<div class="food">
		<img src="/upload/photos/isotope/burger.jpg" alt="image">
	</div>
	
	<div class="people places">
		<img src="/upload/photos/isotope/subway.jpg" alt="image">
	</div>

	<div class="places objects">
		<img src="/upload/photos/isotope/trees.jpg" alt="image">
	</div>

	<div class="people food objects">
		<img src="/upload/photos/isotope/coffee.jpg" alt="image">
	</div>

	<div class="food objects">
		<img src="/upload/photos/isotope/wine.jpg" alt="image">
	</div>	
	
	<div class="food">
		<img src="/upload/photos/isotope/salad.jpg" alt="image">
	</div>	
	
</div>


<script type="text/javascript">

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
 
    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');
 
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});

</script>

Отключаем некоторые ассеты, кот. по умолчанию. Отключаем js-файлы, в некот. определенных пакетах. В секцию components в файле frontend/config/main.php вставляем

        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'js'=>[]
                ],
                'yii\web\YiiAsset' => [
                    'js'=>[]
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'js'=>[]
                ],
            ],
        ],

2 Asset Bundles

Это класс, кот. подключает необходимые js и css файлы. Расширяется от yii\web\AssetBundle

Помещаем файлы jquery.js и jquery.isotope.js в frontend/web/js/

Опишем свой комплект ресурсов в классе frontend/assets/GalleryAsset.php

namespace frontend\assets; 

use yii\web\AssetBundle; 

class GalleryAsset extends AssetBundle
{
	//Указываем какие ресурсы нужно подключать на страницу
	public $css = [
		'css/style.css'
	]; 

	public $js = [
		'js/jquery.js',
		'js/jquery.isotope.js', 
	];

	public $depends = [
		//className
	]; 
}

Выносим скрипт инициализации в отдельный файл frontend/web/js/gallery/script.js

Если галерея работает только с определенной версией jquery (которая идет в комплекте), в таком случае отключить загрузку > предустановленной jquery из папки vendor, чтобы избежать дублирования.

Отрубаем в конкретном экшене загружаемый по умолчанию скрипт:

Yii::$app->assetManager->bundles = [ 'yii\web\JqueryAsset' => false ];

Во вьюхе подключаем нужную версию:

$this->registerJsFile('@web/js/jquery-latest.js');

Обновленный frontend/controllers/GalleryController.php

namespace frontend\controllers; 

use Yii; 
use yii\web\Controller; 

class GalleryController extends Controller 
{

	public function actionIndex(){

		Yii::$app->assetManager->bundles = [ 'yii\web\JqueryAsset' => false ];

		return $this->render('index');
	}
}

Обновленный вью frontend/views/gallery/index.php

//Подключаем класс GalleryAsset, чтоб использовать
use frontend\assets\GalleryAsset; 

//Вызвать метод подключения, он называется register()
//Принимает на вход экземпляр текущего класса View
GalleryAsset::register($this);

$this->registerJsFile('@web/js/gallery/script.js', [
	'depends' => GalleryAsset::className()
]);
?>
 
<h1>Gallery</h1>

<div class="portfolioFilter">

	<a href="#" data-filter="*" class="current">All Categories</a>
	<a href="#" data-filter=".people">People</a>
	<a href="#" data-filter=".places">Places</a>
	<a href="#" data-filter=".food">Food</a>
	<a href="#" data-filter=".objects">Objects</a>

</div>

<div class="portfolioContainer">

	<div class="objects">
		<img src="/upload/photos/isotope/watch.jpg" alt="image">
	</div>
	
	<div class="people places">
		<img src="/upload/photos/isotope/surf.jpg" alt="image">
	</div>	

	<div class="food">
		<img src="/upload/photos/isotope/burger.jpg" alt="image">
	</div>
	
	<div class="people places">
		<img src="/upload/photos/isotope/subway.jpg" alt="image">
	</div>

	<div class="places objects">
		<img src="/upload/photos/isotope/trees.jpg" alt="image">
	</div>

	<div class="people food objects">
		<img src="/upload/photos/isotope/coffee.jpg" alt="image">
	</div>

	<div class="food objects">
		<img src="/upload/photos/isotope/wine.jpg" alt="image">
	</div>	
	
	<div class="food">
		<img src="/upload/photos/isotope/salad.jpg" alt="image">
	</div>	
	
</div>

Подключаем скрипты из Assets в необходимом месте с помощью меток

Метки

PH_HEAD
PH_BODY_BEGIN
PH_BODY_END

Опции подключения скриптов по меткам

namespace frontend\assets; 

use yii\web\AssetBundle; 

class GalleryAsset extends AssetBundle
{
	//Указываем какие ресурсы нужно подключать на страницу
	public $css = [
		'css/style.css'
	]; 

	public $js = [
		'js/jquery.js',
		'js/jquery.isotope.js', 
	];

	public $depends = [
		//className
	]; 

	public $jsOptions = [
		'position' => View::POS_HEAD, //View::POS_END, View::POS_BEGIN
	];  
}

Widgets

Widget with View

Добавляем папку frontend/widgets/newsList, где newsList имя виджета.

Создаем класс widget frontend/widgets/newsList/newsList.php

namespace frontend\widgets\newsList; 

use Yii; 
use yii\base\Widget; 
use frontend\models\News; 

class newsList extends Widget 
{

	public $showLimit = null; //кол-во новостей. По-умолч. null

	public function run(){

		$maxNewsInList = Yii::$app->params['maxNewsInList'];

		if( $this->showLimit ){
			$maxNewsInList = $this->showLimit; 
		}

        $listNews = News::getNewsList($maxNewsInList);

        return $this->render('block', [
            'listNews' => $listNews
        ]);
	}
}

Создаем вью виджета frontend\widgets\newsList\views\block.php

<?php foreach($listNews as $newsItem): ?>
    <h2>
        <a href = "<?php echo Yii::$app->urlManager->createUrl(['news/view', 'id' => $newsItem['id']]); ?>"> 
        <?=$newsItem['title']; ?> 
    </a> 
    </h2>
    <p><?=$newsItem['content']; ?></p>
<?php endforeach; ?>

Во вью подключаем виджет use frontend\widgets\newsList\newsList;

выводим с параметрами <?php echo newsList::widget(['showLimit' => 3]); ?>

use yii\helpers\Html;

// Подключаем виджет 
use frontend\widgets\newsList\newsList; 

$this->title = 'About';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="site-about">
    <h1><?= Html::encode($this->title) ?></h1>

	<div class="row">
		<div class="col-md-9">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, maiores, molestias. In facere necessitatibus, excepturi praesentium accusantium modi blanditiis repellat quae. Amet perspiciatis placeat, culpa maiores recusandae magni nulla, minima.</div>
		<div class="col-md-3">
	        
	        <!-- Вызов виджета --> 
	        <?php echo newsList::widget(['showLimit' => 3]); ?>

		</div>
	</div>
</div>

Widget with Init

frontend\widgets\MyWidget\MyWidget.php

namespace frontend\widgets\MyWidget; 

use yii\base\Widget; 

class MyWidget extends Widget 
{	
	public $name; 

	public function init(){
		parent::init(); 

		if($this->name === null ){
			$this->name = 'Гость'; 
		}

	}

	public function run(){
		return $this->name. ', привет!'; 
	}
}

Вывод в любом View

<!-- Вывод Виджета --> 
<div class="container">
    <?php echo MyWidget::widget(['name' => 'Andrey']);  ?>
</div>

Output Custom Content