Запис #20 "Додавання своїх JS, CSS бібліотек та коду до проекту"

Додано: 2016-02-07 03:19:16 'admin

Свої модулі JS та CSS потрібно розмістити в в теках js та css в корені теки /web.

Структура повинна бути схожою на:

basic
|-web
   |-js
|-module1.js
|-module2.js
   |-css
|-menu1.css
|-menu2.css

 

Глобальне розміщення

Після цього необхідно відкрити файл /assets/AppAsset.php. Це файл розширення базового класу /vendor/yiisoft/yii2/web/AssetBundle.php, який має наступні властивості:

public $sourcePath; //Визначає шлях до файлів для завантаження в /web/assets
public $basePath; //Визначає шлях до фізичного розміщення директорій JS та CSS. В даному випадку /web
public $baseUrl; //Визначає URL адреси до файлів
public $depends = []; //Массив із залежностями зовнішніх бібліотек. Наприклад, Bootstrap.
public $js = []; //Перелік файлів js для підключення
public $css = []; //Перелік файлів css для підключення
public $jsOptions = []; //Додаткові параметри для js файлів
public $cssOptions = []; //Додаткові параметри для css файлів
public $publishOptions = []; //Додаткові параметри для властивості $sourcePath

У файлі /assets/AppAsset.php прописані наступні:

public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];

Як видно, цей файл керує додаванням необхідних модулів JS та CSS до проекту. У його властивостях $basePath та $baseUrl прописані відповідні аліаси, що вказують на директорію web. Далі йде перелік css та js модулів. І в кінці залежності. Їх дві. Якщо відкрити вказані класи, то там будуть подібні параметри, до тих що у файлі /assets/AppAsset.php. Вони приведуть до ключових файлів JQuery та Bootstrap фреймворків. Тому, додавши сюди любий плагін на JQuery, він буде працювати без додаткових підключень.

Що ж, далі додаються необхідні файли у параметри. 

public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
 'css/site.css',
 'css/menu1.css',
 'css/menu2.css',
 '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' //можна й так. На зовні.
];
public $js = [
'js/module1.js',
'js/module2.js',
];
public $depends = [
 'yii\web\YiiAsset',
 'yii\bootstrap\BootstrapAsset',
];

Наступним кроком буде підключення та реєсрація цього класу у файлі шаблону. В базовій версії фреймворка це /views/layouts/main.php. 

use app\assets\AppAsset; //підключення класу
AppAsset::register($this); //реєстрація вкладень у шаблоні

Також доступні додаткові налаштування для файлів JS та CSS. Наприклад, розміщення коду JS у тілі сторінки. Необхідно додати цей код до файла /assets/AppAsset.php.

public $jsOptions = [
'position' => \yii\web\View::POS_HEAD //Даний ключ дозволить розмістити код JS у тезі HEAD.
];

В загальному клас /assets/AppAsset.php після змін буде виглядати так:

class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
  'css/menu1.css',
  'css/menu2.css',
'//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'
];
public $js = [
'js/module1.js',
'js/module2.js',
];
public $jsOptions = [
'position' => \yii\web\View::POS_HEAD
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}

Після цього під"єднані файли почнуть підгружатись під час завантаження сторінки. І будуть діяти на ВЕСЬ проект. Тобто, будуть підгружатись навіть тоді, коли їх не потрібно. Тому цей спосіб дієвий, коли необхідно задіяти глобальні налаштування або функціонал.

Коментарі: