Від автора: вітаю вас, друзі. Ми продовжуємо цикл статей, присвячених знайомству з фреймворком Yii2. У цій статті ми познайомимося з темою Yii2 Assets або, іншими словами, підключенням ресурсів з папки web: у першу чергу — це файли JS і CSS.
При створенні сайту нам так чи інакше доведеться підключати скрипти і стилі. Теоретично це можна зробити безпосередньо в шаблоні, вказавши шлях до підключеному файлу. Однак правильніше це зробити, використовуючи і реєструючи комплект ресурсів.
Комплект ресурсів — це ні що інше, як клас, який ми повинні наслідувати від класу yii\web\AssetBundle і помістити в папку assets. Якщо зазирнути в цю папку, то там ми вже знайдемо клас AppAsset. В цьому класі реєструється комплект ресурсів.
Давайте пройдемося по вмісту даного файлу. Насамперед нас у ньому повинні цікавити дві властивості: $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’,
];
Після виконаної процедури оновимо сторінку браузера.
Як бачимо, наші зусилля не пропали даром — скрипт спрацював і новий файл стилів був успішно підключений, фон сторінки став сірим. Досить просто, чи не правда. І давайте скажемо кілька слів про інших властивостях, які можна знайти у файлі з коробки.
У властивостях $basePath і $baseUrl записані аліаси шляхів (path). Перше властивість вказує на публічну директорію — web, в якій і зберігається комплект ресурсів. Друга властивість визначає URL даній директорії.
Ну і остання властивість — $depends — відповідає за встановлення залежностей. У ньому ми можемо перерахувати інші комплекти ресурсів, від яких буде залежати наш комплект. У наступній статті ми розглянемо деякі нюанси роботи з підключенням ресурсів (assets).
Більше про фреймворку ви можете дізнатися з наших безкоштовних або платних уроків. Також створення найпростішого блогу на Yii2 можна подивитися в цьому циклі уроків.
