От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы познакомимся с темой Yii2 Assets или, иными словами, подключением ресурсов из папки web: в первую очередь — это файлы JS и CSS.
При создании сайта нам так или иначе придется подключать скрипты и стили. Теоретически это можно сделать непосредственно в шаблоне, указав путь к подключаемому файлу. Однако правильнее это сделать, используя и регистрируя комплект ресурсов.
Комплект ресурсов — это ни что иное, как класс, который мы должны наследовать от класса yii\web\AssetBundle и поместить в папку assets. Если заглянуть в эту папку, то там мы уже обнаружим класс AppAsset. В этом классе регистрируется комплект ресурсов по умолчанию.
Давайте пройдемся по содержимому данного файла. Прежде всего нас в нем должны интересовать два свойства: $css и $js. В этих свойствах в виде массивов перечисляются подключаемые стили и скрипты, соответственно.
Как видим, по умолчанию подключается только файл site.css. Свойство $js пусто, т.е. никакие пользовательские скрипты не подключаются. Давайте попробуем подключить дополнительно свой файл стилей и файл JS с простейшим содержимым. Итак, в папке web\css создадим файл custom.css:
|
1 2 3 |
body{ background-color: #ccc; } |
Ну а в папке web\js создадим файл custom.js со следующим тестовым кодом:
|
1 |
alert('Hello, world!'); |
Теперь давайте добавим новые ресурсы в комплект AppAsset, просто дописав новые элементы в массивы соответствующих свойств.
|
1 2 3 4 5 6 7 |
public $css = [ 'css/site.css', 'css/custom.css', ]; public $js = [ 'js/custom.js', ]; |
После проделанной процедуры обновим страницу браузера.
Как видим, наши усилия не пропали даром — скрипт сработал и новый файл стилей был успешно подключен, фон страницы стал серым. Достаточно просто, не правда ли. И давайте скажем несколько слов о других свойствах, которые можно найти в файле из коробки.
В свойствах $basePath и $baseUrl записаны алиасы путей (path). Первое свойство указывает на публичную директорию — web, в которой и хранится комплект ресурсов. Второе свойство определяет URL данной директории.
Ну и последнее свойство — $depends — отвечает за указание зависимостей. В нем мы можем перечислить другие комплекты ресурсов, от которых будет зависеть наш комплект. В следующей статье мы рассмотрим некоторые нюансы работы с подключением ресурсов (assets).
Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
