Yii2 Assets. Часть 1

Yii2 Assets

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы познакомимся с темой Yii2 Assets или, иными словами, подключением ресурсов из папки web: в первую очередь — это файлы JS и CSS.

При создании сайта нам так или иначе придется подключать скрипты и стили. Теоретически это можно сделать непосредственно в шаблоне, указав путь к подключаемому файлу. Однако правильнее это сделать, используя и регистрируя комплект ресурсов.

Комплект ресурсов — это ни что иное, как класс, который мы должны наследовать от класса yii\web\AssetBundle и поместить в папку assets. Если заглянуть в эту папку, то там мы уже обнаружим класс AppAsset. В этом классе регистрируется комплект ресурсов по умолчанию.

Yii2 Assets

Давайте пройдемся по содержимому данного файла. Прежде всего нас в нем должны интересовать два свойства: $css и $js. В этих свойствах в виде массивов перечисляются подключаемые стили и скрипты, соответственно.

Как видим, по умолчанию подключается только файл site.css. Свойство $js пусто, т.е. никакие пользовательские скрипты не подключаются. Давайте попробуем подключить дополнительно свой файл стилей и файл JS с простейшим содержимым. Итак, в папке web\css создадим файл custom.css:

body{
    background-color: #ccc;
}

Ну а в папке web\js создадим файл custom.js со следующим тестовым кодом:

alert('Hello, world!');

Теперь давайте добавим новые ресурсы в комплект AppAsset, просто дописав новые элементы в массивы соответствующих свойств.

public $css = [
    'css/site.css',
    'css/custom.css',
];
public $js = [
    'js/custom.js',
];

После проделанной процедуры обновим страницу браузера.

Yii2 Assets

Как видим, наши усилия не пропали даром — скрипт сработал и новый файл стилей был успешно подключен, фон страницы стал серым. Достаточно просто, не правда ли. И давайте скажем несколько слов о других свойствах, которые можно найти в файле из коробки.

В свойствах $basePath и $baseUrl записаны алиасы путей (path). Первое свойство указывает на публичную директорию — web, в которой и хранится комплект ресурсов. Второе свойство определяет URL данной директории.

Ну и последнее свойство — $depends — отвечает за указание зависимостей. В нем мы можем перечислить другие комплекты ресурсов, от которых будет зависеть наш комплект. В следующей статье мы рассмотрим некоторые нюансы работы с подключением ресурсов (assets).

Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree