Интернет,  Программирование

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

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

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

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

public $css = [
        'css/site.css',
    ];
public $js = [
];

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

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

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

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

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 комментарий

  • Сергей

    Не помогло. Это и так очевидно. Как сделать так, чтобы подключать яваскрипты только для конкретного модуля? Мне зачем 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 и создавайте свою композицию подключенных файлов 🙂

  • Наталья

    $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 адресами, вот для примера :

      'components' => [
       ...
       'urlManager' => [
                  'class' => 'yii\web\UrlManager',
                  'enablePrettyUrl' => true,
                  'showScriptName' => false,
                  'rules' => [
                      '' => 'main/default/index',
                      'contact' => 'main/contact/contact',
                      'prices' => 'main/default/prices',
                      '<_a:error>' => 'main/default/<_a>',
                      '<_a: (login|logout|signup|email-confirm|password-reset-request|password-reset)>' => '/user/default/<_a>',
                      '<_a: (references|addlink|telegramm)>' => '/user/references/<_a>',
                      '<_m: [\w\-]+>/<_c: [\w\-]+>/<_a: [\w\-]+>/' => '<_m>/<_c>/<_a>',
                      '<_m: [\w\-]+>/<_c: [\w\-]+>/' => '<_m>/<_c>/view',
                      '<_m: [\w\-]+>' => '<_m>/default/index',
                      '<_m: [\w\-]+>/<_c: [\w\-]+>' => '<_m>/<_c>/index',
                  ],
              ],
      ...
      ]

      Если Вы хотите использовать свою прежнюю конструкцию

      components' => [
      'request' => [
      'baseUrl' => ''
      ],

      Пустой отставлять нельзя, но вы можете указать ‘baseUrl’ => ‘/’.
      PS.Если у Вас установлен FireBug (Mozilla FireFox) или браузерный отладчик, отслеживайте какой url у Вас получается, отсюда можно плясать с подключением скриптов.

Добавить комментарий

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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