Подключение скриптов js и css в Yii2
Всем привет. Решил написать небольшой мануальчик как подключаются скрипты css и js в Yii2 потому как по ходу изучения фреймворка часто встречал вопросы, типа: «Как подключить css и js», «Вроде все делаю, все правильно подключаю, а они не работают».
Ну так вот, приступим хватит лить водичку:
Все просто, открываем файл assets/AppAsset.php, находим такую конструкцию:
public $css = [ 'css/site.css', ]; public $js = [ ];
Ну и соответсвенно элементами массива прописываем пути до файлов.
Для этого открываем дирретории web/css и web/js и соответсвенно разбрасываем ваши скрипты туда-сюда, в зависимости от того, какой скрипт.
Ну и для примера приведу, есесьна:
Допустим у нас есть 2 файла: vasya.js и vasya.css. Тот что vasya.js бросаем в дирреторию web/js, а vasya.css — в web/css. Да и конечно прописываем в файл assets/AppAsset.php, должно получиться что то вроде этого:
public $css = [ 'css/site.css', 'css/vasya.css' ]; public $js = [ 'js/vasya.js' ];
Для подключения одного скрипта js или css на конкретной странице, прописываем следующий код:
//во вьюхе $this->registerJsFile('path/to/myfile'); $this->registerCssFile('path/to/myfile'); //в контроллере или виджете $this->view->registerJsFile('path/to/myfile'); $this->view->registerCssFile('path/to/myfile');
Если Вам необходимо подключать набор файлов, создаем конкретный класс отвечающий за подключение нужных скриптов:
namespace app\assets; use yii\web\AssetBundle; class MyClassAsset extends AssetBundle { public $basePath = '@webroot'; //алиас каталога с файлами, который соответствует @web public $baseUrl = '@web';//Алиас пути к файлам public $css = [ 'css/vasya.css', ]; public $js = [ 'js/vasya.js', ]; }
А затем подключаем его в нужной вьюхе:
use app\assets\AppAsset; /*....................*/ MyClassAsset::register($this);
Подробнее об этом, Вы можете посмотреть из Документации Yii.
Вот и все собственно то, ничего сложного не было вродь 🙂 .
Удачи всем в изучении!
21 комментарий
VPS
Спасибо. Помогло
Дмитрий
Рад что помогло 🙂
Сергей
Не помогло. Это и так очевидно. Как сделать так, чтобы подключать яваскрипты только для конкретного модуля? Мне зачем vasya.js тащить во все модули? Мне оно нужно только для модуля vasya…
Дмитрий
Добавил реализацию для подключения скриптов на конкретной странице. Надеюсь Вам это поможет.
Стас
Создаю в модуле $this->registerCssFile(‘module_name/web/css/style.css’);,
но все файлы ищутся в директории frontend/web а не в директории модуля, и разумееться не находят. не подскажите как правильно настроить пути относительно папки модуля?
Дмитрий
Просто дело в том, что все доступные файлы извне, хранятся в дирректории /web соответственно ваши файлы оттуда берутся по умолчанию. Для переопределения можно создать свой ассет и уже через него переопределить расположение файлов.
В руководстве по ассетам есть описание свойства sourcePath:
sourcePath: задаёт корневую директорию содержащую файлы ресурса в этом комплекте. Это свойство должно быть установлено если корневая директория не доступна из Web. В противном случае, Вы должны установить basePath свойство и baseUrl свойство вместо текущего. Здесь могут быть использованы псевдонимы путей.
Вы можете объявить данное свойство например так:
class BootstrapPluginAsset extends AssetBundle{
public $sourcePath = '@modules/bootstrap';
...
Думаю что должно все переопределиться.
Алексей
А сумеете подсказать с более хитрым случаем — с зависимостями. Есть у нас к примеру файлики main.js и main.css, но есть еще папочка lib — внутри которой, в подпапках css, js… лежат другие *.js и *.css файлы, которые нужно подключить предварительно. Какой порядок действий в этом случае? Исходя из документации, у меня сложилось впечатление, что действовать нужно так: папочку lib копируем куда-нибудь в проект (куда хотим или все-таки нет?). Затем создаем класс набора ресурсов, наследованный от AssetBundle (создаем где угодно или нет?). В этом классе, в атрибуте $soursePath указываем путь к папке lib, в атрибутах $js и $css указываем пути на нужные нам файлы внутри папки lib, сохраняем и переходим в тот класс, в котором мы указали подключение main.js и main.css — например — в AppAsset который есть по умолчанию. И уже в нем, в свойство $depends дописываем путь к ранее созданному файлу. Правильно?
Дмитрий
Ну папку lib можете положить в папку Web, чтобы просто не разбрасывать свои файлы и не путать с папками фреймворка.
А потом да наследуйтесь от AssetBundle и создавайте свою композицию подключенных файлов 🙂
Alex
А как указать в созданном классе где подключать в body или head ?
Дмитрий
Есть параметр, где указывается где будет подключен скрипт:
public $jsOptions = ['position' => \yii\web\View::POS_HEAD];
Почитайте в документации: http://www.yiiframework.com/doc-2.0/guide-structure-assets.html тут это хорошо описано!
Наталья
$this->registerJsFile() работает, только если его подключить в layout. В обычной вьюшке не работает. То же самое с MyClassAsset::register($this) — если этот кастомный ассет прописать в файле из папки layout, то всё работает, в обычной вьюшке — ноль эффекта.
Как сделать чтоб работало? Мне нужно, чтобы был один layout со стандартным AppAsset, и при этом была возможность для разных страниц подключать свой набор стилей и скриптов. Например, для index.php мне достаточно AppAsset по умолчанию, а для view.php хочу подключить дополнительные js и css. Пробовала выше перечисленными методами — не подключаются ни стили, ни скрипты. Т.е. пробовала в view.php подключить скрипт с помощью registerJsFile — ноль эффекта. Затем сделала свой собственный аналог AppAsset, только с другим набором стилей и скриптов, и пыталась его через register($this) подключить в том же view.php — тоже не пашет. В layout файле всё пашет, но мне это не надо
Дмитрий
Предполагаю, что не верно указаны пути к файлам.
Через какой инструмент отлаживаете?
Что говорит Firebug к примеру (если Вы через него отлаживаете)?
Алекс
//во вьюхе
$this->registerJsFile(‘path/to/myfile’);
$this->registerCssFile(‘path/to/myfile’);
//в контроллере или виджете
$this->view->registerJsFile(‘path/to/myfile’);
$this->view->registerCssFile(‘path/to/myfile’);
Здесь имеется ввиду или там, или там? Или нужно и там, и там прописывать?
Дмитрий
Все в зависимости от того, что Вы подключаете.
Если идет подключение JS, да или в контроллере прописываем
$this->view->registerJsFile(‘path/to/myfile’);
или во вьюхе
$this->registerJsFile(‘path/to/myfile’);
Максим
Добрый день!
А вот какой вопросик…
Для работы с ЧПУ ссылками вынужден был задать в настройках baseUrl равным пустой строке:
'components' => [
'request' => [
'baseUrl' => ''
],
После чего «отвалились» все стили.
Чтобы хоть как-то исправить ситуацию пришлось в классе app\assets\AppAsset свойство $css задать так:
public $css = [
'/web/css/site.css',
];
Стили находящиеся в site.css вернулись. В конечном файле соответствующая строка выглядит так
и это правильно.
Но как я не пытался, мне так и не корректно подключить секцию $depends:
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
соответствующая строка выглядит так
и это не правильно. Должно быть так:
.
Подскажите чего, где менять?
Дмитрий
Здравствуйте в файл common.php для ‘components’ вы можете подключить ‘urlManager’ для управления своими url адресами, вот для примера :
Если Вы хотите использовать свою прежнюю конструкцию
Пустой отставлять нельзя, но вы можете указать ‘baseUrl’ => ‘/’.
PS.Если у Вас установлен FireBug (Mozilla FireFox) или браузерный отладчик, отслеживайте какой url у Вас получается, отсюда можно плясать с подключением скриптов.
Евгений
Привет! класный у вас сайт!
Алекснадр
Особенно его наполнение :)))))
Дмитрий
😉
Сержик
Спасибо! То — что нужно!)
Дмитрий
Очень рад, что моя статья вам помогла 😉