Подключение скриптов js и css в Yii2

yii2frameworkВсем привет. Решил написать как подключаются скрипты css и js в потому как по ходу изучения фреймворка часто встречал вопросы, типа: «Как подключить css и js», «Вроде все делаю, все правильно подключаю, а они не работают».

Ну так вот, приступим хватит лить водичку:

Все просто, открываем файл assets/, находим такую конструкцию:

Ну и соответсвенно элементами массива прописываем пути до файлов.

Для этого открываем дирретории и и соответсвенно разбрасываем ваши скрипты туда-сюда, в зависимости от того, какой скрипт.

Ну и для примера приведу, есесьна:

Допустим у нас есть 2 файла: vasya.js и vasya.css. Тот что vasya.js бросаем в дирреторию web/js, а vasya.css — в web/css. Да и конечно прописываем в файл assets/AppAsset.php, должно получиться что то вроде этого:

Для подключения одного скрипта  js или css на конкретной странице, прописываем следующий код:

Если Вам необходимо подключать набор файлов, создаем конкретный класс отвечающий за подключение нужных скриптов:

А затем подключаем его в нужной вьюхе:

Подробнее об этом, Вы можете посмотреть из Документации Yii.

Вот и все собственно то, ничего сложного не было вродь 🙂 .

Удачи всем в изучении!

19 комментариев

  • 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 ?

  • $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 у Вас получается, отсюда можно плясать с подключением скриптов.

  • Евгений:

    Привет! класный у вас сайт!

Leave a Comment

Войти с через: 

Защита от роБота * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.